Detailed explanation of child, sibling, and adjacent node positioning methods of Python selenium

Today, I would like to share with you some methods of locating nodes based on parent-child, sibling, and adjacent nodes in Selenium. Many people may encounter problems in practical applications where they cannot directly locate the desired node and need to locate it relatively through nearby nodes. However, it is easy to locate a child node by the parent node, but it is a bit difficult to locate the parent node by the child node or to locate the older brother node of a node. Don't worry, let's see the step-by-step explanation by the blogger.

1. locate child node by parent node

The simplest way is to locate the child node by the parent node. We have many methods to locate, let's take a look at an example:

Regarding the following code:

<html>
<body>
<div id="A">
<!--Parent node locates child node-->
<div id="B">
<div>parent to child</div>
</div>
</div>
</body>
</html>

If you want to locate a child node without an ID under the B node, here is an example code:

# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.concatenation 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("//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 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

the1to the3These are familiar methods, so no more words are needed. The4This method uses the CSS selector: nth-child(n), this selector returns the nth node, which is a div tag; the5This method uses another CSS selector: nth-of-type(n), this selector returns the nth div tag, note the difference from the previous selector; the6This method uses the XPath axis child, which is the default axis of XPath and can be omitted, its essence is the same as the method2the same.

Of course, there are some selectors in CSS that can select parent-child relationships, such as last-child, nth-last-child, etc., those who are interested can search Baidu themselves, and the blogger will talk about CSS selector if there is an opportunity.

2. By child node locating parent node

It is a bit difficult to locate the parent node from the child node, see 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 to locate the div of the two-level parent nodes of the C node, the example 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; '..' 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 methods, the1It is in the form of .., just like we know, . represents the current node, and .. represents the parent node; the2This method is the same as the one above, which is a parent axis in XPath: it retrieves the parent node of the current node. This is also a pain point of CSS selector, because the design of CSS does not allow for methods to retrieve parent nodes (at least not at the moment).

3. locate the elder brother node by the younger brother node

This is the No.3, No.4In this case, we need to locate the sibling node. As shown in the following source code:

<html>
<body>
<div id="A">
<!--The following two nodes are used for sibling node location-->
<div>brother 1</div>
<div id="D"></div>
<div>brother 2</div>
</div>
</body>
</html>

How to locate the elder brother node of D node? See the code example below:

# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath, get the elder brother node by 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 get the elder brother node by the parent node of the current node, and the other is more elegant, using the xpath axis: preceding-sibling, which can get all the elder brother nodes at the same level as the current node, note the numbering in the brackets,1 represents the nearest elder brother node to the current node, the larger the number, the farther it is from the current node. Of course, the xpath axis: preceding can also be used, but it is more complex to use, and it gets all non-ancestor nodes before the current node (it is not very good to explain here, I will write a blog post to explain all axes some other day)

4. locate the sibling node by the elder brother node

source code and 3 To locate the sibling node of D node, see the code example below:

# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath, get the sibling node by 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()

Result:

brother 2
brother 2
brother 2
brother 2
brother 2

The blogger shared five methods to locate the younger brother nodes, among which the first three use xpath, the first one is very easy to understand, the second one uses the xpath axis: following-sibling, and preceding-Similar to sibling, its function is to get all the同级 younger brother nodes of the current node, similarly,1 Represents the closest younger brother node to the current node, the larger the number, the farther away from the current node; the third method uses the xpath axis: following to get all nodes after the current node, except the ancestor nodes (the opposite of preceding, but it is easier to read downwards and less likely to make mistakes, so it can also be used to get younger brother nodes, but it is not recommended to use it in this way); the fourth and fifth methods use css selector,+ The difference between and ~ is: + Represents the div node immediately following the current node, ~ represents the div node following the current node. If you use find_elements, you can get a group of div nodes.

The above is the full explanation of the Python selenium parent, sibling, and adjacent node positioning methods introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to you in time. I also want to thank everyone for their support of the Yell Tutorial website!

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)

Basic Tutorial