3-xpath advanced syntax, css advanced syntax

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,所以在技术上面,我们可以获得帮助的机会非常多

Guess you like

Origin blog.csdn.net/weixin_45128456/article/details/113866703