1. Xpath selector
1.1 Xpath Syntax Introduction
Earlier we learned CSS select elements.
You can find very flexible and powerful.
There is a flexible and powerful way of selecting elements, it is to use Xpath expressions.
XPath (XML Path Language) is a W3C specified by the International Organization for Standardization, the language used to select nodes in XML and HTML documents.
Currently major browsers (chrome, firefox, edge, safari) support XPath syntax, xpath there are two versions 1 and 2, the current browser supports the syntax of xpath 1.
Now that you have CSS, why should learning Xpath it? because
Some scenes selected web elements a lot of trouble with css, and xpath but more convenient.
In addition Xpath There are other areas will be used to, such as reptiles framework Scrapy, phone App framework Appium.
html code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3 style="color: brown">select框</h3> <h4 style="color: rgb(22, 118, 173)">单选</h4> <p>>the p-</Name: < The SELECT class = "single_choice" > < the Option value = "Xiaojiang teacher" > Small Chiang </ the Option > < the Option value = "Ray teacher" > Ray Teacher </ the Option > < the Option value = "Oscar teacher" the Selected = "Selected" > Oscar teacher </ Option > </ SELECT > < HR > < H4 style = "Color: RGB (22 is, 1 18, 173)" >Multiple choice </ H4 > <the p- > Courses: </ the p- > < the SELECT class = "multi_choice" Multiple > < the Option value = "Xiaojiang teacher" > Small Chiang </ the Option > < the Option value = "Ray teacher" > Ray Teacher </ the Option > < Option value = "Wang teacher" > Wang teacher </ Option > < Option value = "Oscar teacher" Selected = "Selected" >Oscar teacher </ the Option > </select> <hr> <div> <p style="color: brown; font-weight: bold;"> 城市选择 </p> <div id="china"> <p id="beijing" class='capital huge-city'> 北京 </p> <p id="shanghai" class='huge-city'></>the p-</ Shanghai div> <div id="us"> <span id="west" style="color:darkgreen"> <p id="newyork"> 纽约 </p> <p id="huston"> 休斯顿 </p> </span> <span id="east" style="color:darkred"> <p id="chigaco"> 芝加哥 </p> </span> </div> </div> </body> </html>
Open the Debug window press F12, click the Elements tab.
To verify whether Xpath syntax can successfully select elements, you can also verify the CSS syntax like that, press the key combination Ctrl + F, the search box will appear.
xpath syntax, the entire HTML document root using the '/' said that if we want to select the following html is the root node, you can enter in the search box.
/html
If you enter the following expression:
/html/body/div
This expression represents a choice of the following html body div element below.
Note / bit like the CSS>, a direct relationship between the child node.
1.1.1 Absolute Path Selection
Starting from the root to a node, write down each layer in turn, between each layer with / separated list of expressions, it is the absolute path of an element.
Above xpath expression / html / body / div, xpath expression is an absolute path, equivalent to the expression css html> body> div.
To use automated programs Xpath to select web elements, you should call the object's methods WebDriver find_element_by_xpath or find_elements_by_xpath, like this:
elements = driver.find_elements_by_xpath("/html/body/div")
1.1.2 relative path selection
Sometimes, we need to select an element in the page, no matter what position it is in.
For example, select the sample page of all the tags named div element, if you use css expressions, write directly to a div on the line.
That xpath how to achieve the same functions? xpath need to add // front of that Xiao Zhao down all of the elements from the descendants of the current node, regardless of its position at the top.
So xpath expression should read: // div.
'//' symbol can continue to add in the back, for example, to select all the p elements inside the div element of all, no matter what position div, no matter what position div p elements below, you can write like this // div // p
Corresponding automation procedures are as follows:
elements = driver.find_elements_by_xpath("//div//p")
If CSS selectors, corresponding to the code is as follows:
elements = driver.find_elements_by_css_selector("div p")
If you want to select all of the div element inside the direct child node p, xpath, as it should be written // div / p
If you use CSS selectors, compared div> p>.
1.1.3 Tsuhaifu
If you want to select all div nodes of all direct child nodes, you can use the expression // div / *.
* Is a wildcard, the element corresponding to any node name, equivalent to the CSS selectors div> *.
code show as below:
elements = driver.find_elements_by_xpath("//div/*") for element in elements: print(element.get_attribute('outerHTML'))
The selection element 1.2
Xpath element may be selected according to the attribute.
The properties of this element is to select the format of [@ attribute name = "attribute value ']
note:
Note that the property name in front of a @
Must use quoted attribute values, it may be a single quotes may be double quotes
1.2.1 The id attribute selection
Id is an element selected west, it can be // * [id = 'west'].
The class attribute selection 1.2.2
Class select selects all elements of the element single_choice, it can be // select [@ class = 'single_choice'].
If a class has multiple elements, such as:
<p id="beijing" class='capital huge-city'> 北京 </p>
If you want to vote for it, the corresponding xpath should be // p [@ class = "capital huge-city"].
Only one property can not write like this // p [@ class = "capital"] is not.
1.2.3 According to other properties
By the same token, we can also use other attribute selection.
For example, select all the page elements have multiple attributes, it can be // * [@ multiple].
1.2.4 contains the string attribute value
To select a style property value string comprising color page element, it can be // * [@ contains (@ style, 'color')].
To select a style property value to the beginning of the page element color strings, it can be // * [@ starts-with (@ style, 'color')]
To select a style property value of a page element to the end of the string, we can presumably // * [@ ends-with (@ style, 'color')], but, unfortunately, this is the xpath 2.0 syntax, currently browsers do not support.
1.3-order selection
Css foregoing expression can be studied in accordance with the order of elements in the parent node selection, very practical.
xpath element may be selected according to the order. The syntax is more concise than css, using the number in brackets represents the direct order.
1.3.1 Types of a few sub-elements
To select the p type second child element, that is,
//p[2]
Note that the selection of a p-type second sub-element, the second sub-element is not, and a p-type.
Also, to select the parent element in the div p-type second child element.
//div/p[2]
1.3.2 the first of several sub-elements
You can also select a second sub-elements, no matter what type, the use of wildcards.
For example, select the parent element is the second child element of the div, no matter what type.
//div/*[2]
1.3.3 a type penultimate several sub-elements
Of course, you can select the penultimate several sub-elements
E.g:
Select a p type penultimate sub-elements
//p[last()]
Select p type penultimate sub-elements
//p[last()-1]
Select the parent element is a div p type penultimate child element
//div/p[last()-2]
1.3.4 Range Selection
xpath range may also be selected order sub-elements.
E.g:
Select option Types 1-2 subelement
//option[position()<=2]
or
//option[position()<3]
Selected class attribute multi_choice the first three sub-elements
//*[@class='multi_choice']/*[position()<=3]
After selecting the class attribute for the three sub-elements multi_choice
//*[@class='multi_choice']/*[position()>=last()-2]
Why is not the last () - 3 it? because
last () itself represents the last element
last () - 1 itself represents the penultimate two elements
last () - 2 itself represents the penultimate three elements
1.4 group selection, parent, sibling
1.4.1 Group Selection
There css group selection, the results can be used simultaneously multiple expressions, multiple expressions are selected to selected elements.
css group selection, separated by commas expression.
xpath have group selection, a plurality of spaced vertical bars expressions.
For example, the option to choose all the elements and all the h4 element, you can use
//option | //h4
CSS selectors is equivalent to
option , h4
For example, to select all of the class and the class is single_choice to multi_choice elements, you can use
//*[@class='single_choice'] | //*[@class='multi_choice']
CSS selectors is equivalent to
.single_choice , .multi_choice
1.4.2 Select the parent node
xpath can select the parent node, which is css not.
An element with parent / expressed ..
For example, to select the id of the parent node china can be written // * [@ id = 'china'] / ...
When an element can not directly select feature, but its child nodes characteristic, this approach may be employed to select a sub-node, nodes in the specified parent.
Can continue to find the upper parent node, such as // * [@ id = 'china'] / .. / .. / ...
1.4.3 sibling selection
Front learned css selector to select a subsequent sibling nodes of a node, by a wavy line.
xpath subsequent sibling nodes may be selected, with this syntax :: forllowing-sibling.
For example, to select all subsequent sibling class // * [@ class = 'single_choice'] / forllowing-sibling :: * single_choice of the element.
Is equivalent to the CSS selectors .single_choice ~ *
If you want to select the div node subsequent nodes, it should be written // * [@ class = 'single_choice'] / forllowing-sibling :: div.
xpath can also select the preceding sibling nodes, with this syntax :: preceding-sibling.
For example, to select all subsequent sibling class // * [@ class = 'single_choice'] / preceding-sibling :: * single_choice of the element.
The CSS selector has not yet selected the previous sibling node.
To learn more choice Xpath syntax, here, open Xpath selector Reference Manual .
1.5 selenium Precautions
We look at an example
Our code:
First select the sample pages, id is china elements.
Then WebElement objects of this element using find_elements_by_xpath, select which p elements.
# First look for id is an element of china china = wd.find_element_by_id ( ' china ' ) # select elements inside the p elements Elements = china.find_elements_by_xpath ( ' // p ' ) # print the results for Element in Elements: Print ( ' ---------------- ' ) Print (element.get_attribute ( ' the outerHTML ' ))
Run found that printing is not just the p elements inside the china, but all the p elements.
To use xpath select elements within an element, you need to add a point in front xpath expression.
like this
elements = china.find_elements_by_xpath('.//p')