Share the positioning methods of parent-child, brother and adjacent nodes in selenium. In practical applications, many people will encounter the problem that the node they want to locate cannot be directly located and needs to be relatively located through nearby nodes. However, it is easy to locate the child node from the parent node. It is impossible to locate the parent node and the brother node of a node from the child node. Don't worry, Let me explain it step by step.
1. The parent node locates the child node
The simplest way is to locate the child node by the parent node. We have many methods to locate it. The following example:
<html> <body> <div id="A"> <!--Parent node positioning child node--> <div id="B"> <div>parent to child</div> </div> </div> </body> </html>
To locate the child node without id according to node B, the code example is as follows:
# -*- coding: utf-8 -*-
"""
@author: lucas
@Function:
@file: parentToChild.py
@time: 2021/8/27 3:03 afternoon
"""
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('file:///Users/leiyuxing/PycharmProjects/pythonProject5/htmlData/parentToChild.html')
# 1. Tandem search
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('//*[@id="B"]/div').text)
# 3.css selector parent-child relationship search( https://blog.csdn.net/qq_33472765/article/details/80740097)
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 axis child
print(driver.find_element_by_xpath("//div[@id='B']/child::div").text)
driver.quit()result:
parent to child parent to child parent to child parent to child parent to child parent to child
We are familiar with the methods from the first to the third, so we won't say more. The fourth method uses a css selector: nth child (n), which returns the nth node, which is a div tag; The fifth method uses another css selector: nth of type (n), which returns the nth div tag. Note the difference from the previous selector; The sixth method uses the xpath axis child, which is the default axis of xpath. It can be ignored and not written. Its essence is the same as method 2.
Of course, some selectors in css can select parent-child relationships, such as last child, Nth last child, etc.
2. Locate the parent node from 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"> <!--Child node locating parent node--> <div> <div>child to parent <div> <div id="C"></div> </div> </div> </div> </div> </body> </html>
We want node C to locate the div of its two-tier parent node. The example code is as follows:
# -*- coding: utf-8 -*-
"""
@author: lucas
@Function:
@file: childToParent.py
@time: 2021/8/27 3:45 afternoon
"""
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('file:///Users/leiyuxing/PycharmProjects/pythonProject5/htmlData/childToParent.html')
# 1.xpath: `.` Represents the current node; '..' Represents the parent node
print(driver.find_element_by_xpath("//div[@id='C']/../..").text)
# 2.xpath axis parent
print(driver.find_element_by_xpath("//div[@id='C']/parent::*/parent::div").text)
driver.quit()result:
child to parent child to parent
Here we have two ways, the first is Form, as we know Represents the current node Represents the parent node; The second method, like the above, is one of the xpath axes: parent, which takes the parent node of the current node. This is also a pain point of css selector, because the design of css does not allow a way to obtain the parent node (at least not at present)
3. Locate the brother node from the brother node
This is the third and fourth cases. We want to locate brother nodes here. Such as the following source code:
<html> <body> <div> <!--The following two nodes are used to locate sibling nodes--> <div>brother 1</div> <div id="D"></div> <div>brother 2</div> </div> </body> </html>
How to locate its brother node through D node? Look at the code example:
# -*- coding: utf-8 -*-
"""
@author: lucas
@Function:
@file: brother.py
@time: 2021/8/27 4:30 afternoon
"""
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Chrome()
driver.get('file:///Users/leiyuxing/PycharmProjects/pythonProject5/htmlData/brother.html')
# 1.xpath to obtain its brother node through the parent node
print(driver.find_element_by_xpath("//div[@id='D']/../div[1]").text)
# 2.xpath axis preceding sibling
print(driver.find_element_by_xpath("//div[@id='D']/preceding-sibling::div[1]").text)
driver.quit()result:
brother 1 brother 1
Here, the blogger also lists two methods: one is to obtain the brother node through the parent node of the node, and the other is more elegant. It can obtain all brother nodes at the same level of the current node through the xpath axis: preceding sibling. Pay attention to the label in parentheses. Generation 1 represents the brother node closest to the current node. The larger the number, the farther away from the current node, Of course, xpath axis: preceding is also OK, but it is complex to use. It obtains all non ancestor nodes before the node
4. Locate the brother node from the brother node
The source code is consistent with # 3. To locate its brother node through node D, see the code example:
# -*- coding: utf-8 -*-
"""
@author: lucas
@Function:
@file: littleBrother.py
@time: 2021/8/27 4:38 afternoon
"""
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('file:///Users/leiyuxing/PycharmProjects/pythonProject5/htmlData/brother.html')
# 1.xpath to obtain its brother node through the parent node
print(driver.find_element_by_xpath("//div[@id='D']/../div[3]").text)
# 2.xpath axis following sibling
print(driver.find_element_by_xpath("//div[@id='D']/following-sibling::div[1]").text)
# 3.xpath axis 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()Five methods are shared to locate its brother node. The above three methods use xpath. The first one is easy to understand. The second one uses the xpath axis: following sibling, which is similar to preceding sibling. Its function is to obtain all brother nodes at the same level of the current node. Similarly, 1 represents the brother node closest to the current node. The larger the number, the farther away from the current node; The third method uses the xpath axis: following, which obtains all nodes after the node, Except for ancestor nodes (opposite to the preceding direction, but because the downward order is easy to read and not easy to make mistakes, it can also be used to obtain younger brother nodes, but it is not recommended to use it); the fourth and fifth, we use css selector. The difference between + and ~ is that + represents the div node immediately after the current node, and ~ represents the div node after the current node. If find_element is used s. You can get a set of div nodes.