One, xpath positioning advanced syntax
xpath uses path expressions to select nodes or node sets on xml documents or html documents. There are two expressions, absolute path and relative path, respectively.
Disadvantages: webdriver scans all elements of the entire page to locate the elements we need. If a large number of xpath is used in the script for element positioning, the execution speed of the script will be slower.
expression | description |
---|---|
. | Select current node |
.. | Select the parent node of the current node |
/ | Select from the root node, the current node is html by default |
// | Select nodes in the document from the current node of the matching selection, regardless of their location |
nodename | Select all child nodes of this node, similar to the label selector in css |
@ | Select attribute |
Absolute path positioning :
starting with "/", starting from the top html and looking down, the complete path is written like a folder.
Disadvantage: Once the page structure is changed, the path will become invalid and must be repositioned
Relative path positioning : start
with "//", you can use any level of element as the starting point
Index positioning:
//input[2] means to match the second input tag under any node
Property positioning:
expression | meaning |
---|---|
/*[@class] | Means to match any tags with class attributes in the next level |
//div[@id=‘abc’ and @class=‘abc’] | Means to match any div tag with id abc and class abc |
//div[starts-with(@id,‘kw’)] | Means to match any div tag whose id starts with kw under any node |
//div[contains(@id,‘kw’)] | Indicates matching any node, the div tag whose id contains kw |
Second, css positioning advanced syntax
Selector | Expression example | Explanation |
---|---|---|
id selector (id is represented by #) | #abc | Match the tag with id abc |
class selector (class is represented by .) | .abc | Match the label whose class is abc |
Label selector | p | Match p tag |
Group selector | a,span | Match a tag and span tag |
Attribute selector—specify value | [class=“li”] | Match tags with class li |
Attribute selector—do not specify a value | [title] | Match tags with title attribute |
Attribute selector—specify label | a[title] | Match the a tag with the title attribute |
Attribute selector-match word boundaries | a[title~=“hello”] | Match the a tag whose title contains hello |
Descendant selector (indicated by spaces), which can select any level element under the current level | #ab p | Match the next/multi-level p tag with id ab |
Child element selector (> means), can only select elements at the next level | #ab>p | Match the p tag in the next level with id ab |
Adjacent sibling selector (+ means), can only select the next element of the same level | # ab + .ab | Match the next element of the same level with id ab and the class of the element is ab to match |
Subsequent sibling selector (~ means), select all specified elements at the same level after the specified element | .ab ~ li | Match all li tags of the same level after the tag with class ab |
Pseudo-class
expression | description |
---|---|
nth-child(n) | Match the nth child element |
nth-last-child(n) | Match the nth child element from the bottom |
nth-of-type(n) | Match the nth tag of the specified type |
first-child | Match the first tag |
last-child | Match the last tag |
Points to note for positioning elements:
- Find the unique attribute of the element to be positioned
- If the element does not have a unique attribute, first find the parent element/child element/adjacent element that can be uniquely located, and then use ">", "","+", etc. for auxiliary positioning
- Do not use random unique attribute positioning
- The most important thing is to communicate more with R&D, try to add ID or name to key elements, and reduce unreasonable page elements. For example, repeating IDs is best not to happen.
Three, css and xpath comparison
1、css是配合html来工作,原理是匹配对象;而xpath是配合xml工作的,原理是遍历,故css性能更优秀
2、css语言比xpath更简洁明了
3、前段开发主要是使用css,不使用xpath,所以在技术上面,我们可以获得帮助的机会非常多