“This is my fourth day of the November Gwen Challenge. There are many positioning methods for page elements, such as ID, class, tag, etc. These simple positioning methods, due to the complexity of the page or other reasons, cannot be located to what we want. Most of these methods can be located by xpath or CSS. I have been using xpath recently to make a summary

basis

There is a lot of information about xpath location on the web, and I recommend checking it out on MDN, which I feel is quite comprehensive developer.mozilla.org/en-US/docs/… Xpath is a language for finding information in XML documents. It uses path expressions to select nodes or sets of nodes in XML documents. It can also be used to find elements in HTML files

Relational terms for xpath nodes

The following terms can be understood literally

Parent

The child (Children)

Sibling

Ancestor

Descendant (Descendant)

Basic xpath syntax

Select the node

XPath uses path expressions to select nodes in an XML document. Nodes are selected by following a path or step. The most useful path expressions are listed below:

expression describe
nodename Selects all children of this node.
/ From the root node.
// Nodes in the document are selected from the current node selected by the match, regardless of their location.
. Select the current node.
. Selects the parent of the current node.
@ Select properties.

example

Path expression The results of
div Selects all the children of the div element.
/div Select the root element div. Note: If a path starts with a forward slash (/), it always represents an absolute path to an element!
div/span Selects all span elements that belong to the child elements of div.
//span Selects all span child elements regardless of their position in the document.
div//span Selects all SPAN elements that belong to descendants of div elements, regardless of where they are located below div.
//@aria-label Select all the attributes named aria-label.

The predicate

The predicate is enclosed in square brackets, and the lookup element has some specific qualification attached

There are several common ways

/ / tag / @ attribute = “Value” //input[@class=’but1′]” Find the input tag for class=but1
/ / tag [@ attribute1 = Value1 and “@” attribute2 = “Value2”] //input[@class=’but1′ and @name=’key’] Boolean logic operation; And /or attributes combine with logic to solve the problem of multiple attributes having the same name
/ / tag [contains (@ attribute1, “Value1”)] //input[contains(@placeholder,’ input ‘)] Fuzzy matching: (1) some of the attribute values are always the same, and the other part is randomly generated. (2) The overall attribute is too long
/ / tag [starts – with (@ attribute1, “Value1”)] //a[starts-with(@class,’abc123′)] 
/ / tag/text () = “value”] / / p/text () = “hello”] // Contains (text(), “value”)]
//tag1/tag2[index] //form/input[2] Parent node localization child node hierarchy combined with attributes to solve the problem of no attributes
/ / tag1 [@ attribute = “Value”] / tag2 //input[@class=’but1′]”/span
/ / * [@ attribute = “value”] / tag2 //*[@class=’r’]/a Match by *
//tag1//parent::tag2 //span[@icon-name=”error-line”]/parent::button The child node looks up the parent node
//tag1//preceding-sibling::tag2 //span[@icon-name=”error-line”]/preceding-sibing::input Find the elder node by the younger node
//tag1//following-sibling::tag2 //input[@aria-label=”Email”]/following-sibling::div The elder node finds the younger node

Js executing xpath

Sometimes in the page console, you want to immediately verify that the element is located correctly, that you can do something with it, you can use JS, you can also use jquery, sorry I haven’t learned that yet

 document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result )
Copy the code

The first argument is an expression that conforms to the syntax rules of xpath

ContextNode: Nodes in the documentation of xpathExpression, including any and all of its children, should be evaluated. The document node is the most commonly used

  • NamespaceResolver: A function that will pass any namespace prefix contained in xpathExpression, which returns a string representing the namespace URI associated with that prefix. This makes it possible to switch between prefixes used in XPath expressions and possibly different prefixes used in documents. The conversion function could be:

    • Use [XPathEvaluator] object’s [createNSResolverMethod [create].
    • null. It can be used for HTML documents or when namespace prefixes are not used. Notice that ifxpathExpressionContains the namespace prefix, which results in aNAMESPACE_ERR 的 DOMExceptionSell them.
    • User-defined functions. See the [Using a User-defined namespace Parser] section in the appendix for more information.

  • ResultType: specifies the [constant] of the desired resultType to be returned as the evaluation result. The most commonly passed constant is xPathResult.any_type, which returns the result of an XPath expression as the most natural type. There is a section in the appendix that contains a complete list of available constants. They are explained in the [Specifying Return Types] section below.

  • Result: If an existing XPathResult object is specified, it will be reused to return the result. Specifying NULL creates a new XPathResult object.

For example, take baidu input box as an example. We find this input box and assign a value to this input box

Handy xpath plug-in

As is shown in

The following uses Chrome as an example

Clicking on any Element automatically generates several positioning expressions, most of which are uniquely identified. To verify that the generated expression is usable, you can install either of two plugins

Once xpath Finder is installed, here we enter the xpath expressions generated by the first plug-in, and we can see that we can find them on the page and identify the elements we find

Xpath Helper works the same way, so try it out

conclusion

Every time I encounter need positioning of elements simple can be run directly write code, if encounter complex, I will be combined with xpath plug-in generated xpath, verify whether elements can be found, and then in the console to verify whether it can be operation, than directly write code debugging repeatedly, save a lot of time, you have a better more efficient method to introduce to me, I’m still chicken