First, the principle of positioning
- stable
- Simple and flexible
- only
WebDriver provides two ways to locate the page elements, namely find_element_by_XXX and find_elements_by_XXX. The results first way is to return a page element in the object under normal circumstances, once an exception error is reported. The second way is to return results of multiple objects page elements under normal circumstances, if none can match the DOM element, this returns the list is empty.
Second, a large element positioned Method 8
id name classname tagName (before 4 through CSS Seletor principle) link_text partial_link_text Css xpath
Priority use id, name, classname, tagename unique positioning
- find_elemet_by_id ( "id attribute value") # fewer parameters, intuitive VS find_element (by = By.ID, value = 'kw')
- find_element_by_name ( "name attribute value")
- find_elemnt_by_classname ( "class attribute value")
- find_element_by_tagname("tag标签")
- find_element_by_link_text(" ")
- find_element_by_partial_link_text(" ")
- find_element_by_css_selector()
- find_element_by_xpath()
There is also a find_element (by = By.ID, value = "id"), in fact, view find_element_by_id () source code, we can see that the method is actually invoked find_element () method.
Three, css vs xpath
- Introduction to CSS more simple positioning;
- CSS for major browsers, more efficient;
- For complex positioning, using xpath more concise;
- xpath basically able to locate, more powerful
Four, xpath positioning
1.xpath basic concepts and syntax (https://www.runoob.com/xpath/xpath-syntax.html)
Node name
- Very wide
Choose from the root node, the root node is /
- Absolute path
- Path is long, starting from the root need to write down a level, e.g. / html / head / title
- Starting from the root to find down until you find all the nodes to meet the requirements of
relative path
- // is the relative path you will find all the elements, and then based on a specific element attributes positioning
- For example, // h2 / a
Select the current node
- It refers to a point of the current node is acquired /.
- It refers to two points selected on a node / .., i.e., the parent node
- // is from the full-text search context node // back, but .// refers to the lookup from a child node in front of the node
Use @ Select Properties
- Tag name [@ attribute name = "attribute value"]
- For example, // span [@ class = "js-label"]
- // a [@class] All tags with a class attribute return
contains contains relationship
- For example, // a [contains (@ name, 'trnews')]
Use text text text ()
- For example, // span [contains (text (), "java Test")]
- // span [text () = "java test"] (exact match)
Multi-criteria Location
- When a property is not sufficient to uniquely distinguish one element, you may take the form of a plurality of combinations of conditions
- and (with)
- 例如，//input[@name and @class="s_ipt"]
- or（或）
- 例如，//input[@id="kw" or @id="su"]
Level positioning
- Sub-label is not unique, but the only parent tag, can help the parent label positioning together
- 例如，//a[@title="Python"]/span[@class="js-label"]
Wildcard positioning node
- For example, // * match all nodes
- For example, // * [@ id = "su"]
- Matches all elements with the attribute node // * [@ *]
Axis positioning (only able to find a central point) (Reference document: https: //www.w3school.com.cn/xpath/xpath_axes.asp)
- Scenario: when each attribute, and combinations thereof are insufficient positioning an element, can be positioned using various elements may be positioned in the parent node or its sibling like.
- parent parent node name
- ancestor ancestor node contains a parent node
- All current node before the preceding element node
- preceding-sibling node before the current sibling (brother)
- following the current node end tag all nodes (son) after
- following-sibiling current node end tag siblings after and does not include other child nodes (brother)
- 例如，//dd[@data="1992"]/following-sibling::dd[contains[@class, "batscore"]]/span
Get the node according to the location index , get all the same type of child node a node with the following
- From the beginning, the last one is the last ()
- //div[@data-report-module="middle-course"]/ul/li[1]
- //div[@data-report-module="middle-course"]/ul/li[last()]
- //div[@data-report-module="middle-course"]/ul/li[last()-1]
- //div[@data-report-module="middle-course"]/ul/li[position()>4]
Five, CSS positioning (Reference document: https: //www.cnblogs.com/longronglang/p/9144661.html)
1, a common symbol
- # Represents the id selector
- Indicates class selector
- > Represents the child element hierarchy
- A space for sub-elements, but all the descendants of child elements, corresponding to a relative path in xpath
2, property positioning
Baidu html code input box, <input id = "kw" class = "s_ipt" type = "text" autocomplete = "off" maxlength = "100" name = "wd" />
- css may be positioned directly into the element id, class, these three general properties tags
- css represents id attribute, such as using a #: #kw
- css represented by the class attribute, such as:. .s_ipt
- css tag name directly, without any identifier, such as: input
3, other properties
In addition the label can 1.css, class, id positioned to these three general properties, other properties may be positioned by
2. The following is the format of positioning the other attributes
[name = wd] [autocomplete = 'off'] [maxlength = '255']
4, label
css page can be located by a combination of elements and attributes tag
input.s_ipt
input#kw
input[id='kw']
5, hierarchical relationships
//form的id属性
form#form>span>input
//form的class属性
form.fm>span>input
6, the index
css is also possible to locate the child element by index nth-child (1), directly translates to the first of several children
Summary: After selecting the tab, find the first of several children to
Select control third Opel
#select> the SELECT> the Option: Child-Nth (. 3)
the CheckBox first a Volvo
#checkbox> INPUT: Child-Nth (. 1)
7, the logic operation
css same logic operations can be achieved, while matching the two attributes, here not the same XPath, and without writing the keyword
[type = 'checkbox'] [ name = 'checkbox1']
css syntax is far more than, there are more and more powerful positioning strategy mentioned above, interested students can continue in-depth study