Python selenium father son brother neighbor node location method
- 2020-05-10 18:27:03
- OfStack
Today to share with you the selenium according to the father and son, brothers, in the adjacent nodes positioning method, many people will encounter in the actual application to locate the node cannot directly positioning, need through the nodes near relative positioning problem, but the parent node positioning children easy, from a child node localization brother from the parent node, positioning a node 1 raise the mo show, don't worry, and see the blogger 1 step by step.
1. Locate the child nodes by the parent node
The easiest way to do this is to use the parent node to locate the child node. There are many ways to do this.
For the following code:
<html>
<body>
<div id="A">
<!-- The parent node locates the child node -->
<div id="B">
<div>parent to child</div>
</div>
</div>
</body>
</html>To locate a child node without id according to the B node, the code example is as follows:
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html')
# 1. In series for
print driver.find_element_by_id('B').find_element_by_tag_name('div').text
# 2.xpath Parent-child relationship search
print driver.find_element_by_xpath("//div[@id='B']/div").text
# 3.css selector Parent-child relationship search
print driver.find_element_by_css_selector('div#B>div').text
# 4.css selector nth-child
print driver.find_element_by_css_selector('div#B div:nth-child(1)').text
# 5.css selector nth-of-type
print driver.find_element_by_css_selector('div#B div:nth-of-type(1)').text
# 6.xpath shaft child
print driver.find_element_by_xpath("//div[@id='B']/child::div").text
driver.quit()Results:
parent to child
parent to child
parent to child
parent to child
parent to child
parent to child
The first through the third are familiar methods, so we won't talk much about them. The fourth method USES the css selector: nth-child (n), which returns the n node, which is the div label; The fifth method USES another css selector: nth-of-type (n). This selector returns the n div tag. Notice the difference from the previous selector. The sixth method USES the xpath axis, child. This is the default axis of xpath, which can be ignored and not written. Its essence is the same as the method 21.
Of course, there are also some selectors in css that can select the parent-child relationship, such as last-child, nth-last-child, etc. If you are interested, you can search by yourself. If there is a chance, bloggers will talk about css selector.
2. Locate the parent node by the child node
It is a little difficult for the child node to locate the parent node. For the following code:
<html>
<body>
<div id="A">
<!-- The child node locates the parent node -->
<div>
<div>child to parent
<div>
<div id="C"></div>
</div>
</div>
</div>
</div>
</body>
</html>We want to locate the div of its two-tier parent node by the C node. The sample code is as follows:
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath: `.` Represents the current node ; '..' Parent node
print driver.find_element_by_xpath("//div[@id='C']/../..").text
# 2.xpath shaft parent
print driver.find_element_by_xpath("//div[@id='C']/parent::*/parent::div").text
driver.quit()Results:
child to parent
child to parent
Here we have two ways, the first is.. As we know,. Represents the current node,.. Represents the parent node; The second method, like the one above, is one of the xpath axis: parent, taking the parent node of the current node. This is also a pain point for css selector, because css's design does not allow access to the parent node (at least not yet)
3. The elder brother node is positioned by the younger brother node
So this is the third and fourth case, and we're going to be locating sibling nodes here. As follows:
<html>
<body>
<div id="A">
<!-- The next two nodes are used for sibling localization -->
<div>brother 1</div>
<div id="D"></div>
<div>brother 2</div>
</div>
</body>
</html>How do you locate its brother node via the D node? See the code example:
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath, Gets its brother node through the parent node
print driver.find_element_by_xpath("//div[@id='D']/../div[1]").text
# 2.xpath shaft preceding-sibling
print driver.find_element_by_xpath("//div[@id='D']/preceding-sibling::div[1]").text
driver.quit()The results of
brother 1
brother 1
Here bloggers also lists the two methods, one kind is through the node's parent node for elder brother, the other one is elegant, is through xpath axis: preceding - sibling, it can get all the brother nodes at the same level of the current node, pay attention to the label in brackets, 1 represents the current node nearest one brother nodes, the greater the number said the farther from the current node, of course, xpath axis: preceding also works, but it's a little more complicated to use. It gets all the non-ancestor nodes before the node (it's not easy to explain here, but I'll write a blog about all the axes).
4. Position the younger brother node by the elder brother node
To locate its brother node through D node, see the code example:
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath , through the parent node to get its brother node
print driver.find_element_by_xpath("//div[@id='D']/../div[3]").text
# 2.xpath shaft following-sibling
print driver.find_element_by_xpath("//div[@id='D']/following-sibling::div[1]").text
# 3.xpath shaft following
print driver.find_element_by_xpath("//div[@id='D']/following::*").text
# 4.css selector +
print driver.find_element_by_css_selector('div#D + div').text
# 5.css selector ~
print driver.find_element_by_css_selector('div#D ~ div').text
driver.quit()Results:
brother 2
brother 2
brother 2
brother 2
brother 2
Bloggers Shared 5 ways to locate his brother nodes, the above three is to use xpath, 1 kind is easy to understand, the second with the help of xpath axis: following - sibling, with preceding - sibling similar, its role is to get all of the current node brother nodes, and at the same level again, on behalf of the current node nearest 1 brother nodes, the greater the number, said the farther from the current node. The third one USES the xpath axis: following, all nodes after acquiring the node, except the ancestor node (in the opposite direction from preceding, but because the following order is easy to read and not easy to make mistakes, it can also be used to acquire the younger nodes, but it is not recommended to use it in this way); The difference between + and ~ is that + represents the div node immediately after the current node, and ~ represents the div node immediately after the current node. If find_elements is used, a group of div nodes can be obtained.