1. Locate child nodes by parent nodes
<html>
<body>
<div id="A">
<!--parent node positioning child node-->
<div id="B">
<div>parent to child</div>
</div>
</div>
</body>
</html>If you want to locate the 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. Search in series
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 childThe 1st to 3rd methods are familiar to us, so I 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), the selector returns the nth div tag, pay attention to the difference from the previous selector; the sixth method uses the xpath axis child, which is the default axis of xpath, which can be ignored, and its essence is the same as method 2 the same.
Of course, there are still some selectors in css that can select parent-child relationships, such as last-child, nth-last-child, etc. If you are interested, you can Baidu by yourself, and bloggers will talk about css selectors if you have a chance.
2. Locate the parent node by the child node
It is a bit difficult to locate the parent node from the child 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-layer 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; '..'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 parentHere we have two methods, the first one is in the form of .., as we know, . represents the current node, .. represents the parent node; the second method is the same as above, it is one of the xpath axes: parent, Get 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 get the parent node (at least not currently)
3. The brother node is located by the brother node
This is the 3rd and 4th cases, what we want to locate here is the brother node. As the following source code
<html>
<body>
<div>
<!--The following two nodes are used for sibling node positioning-->
<div>brother 1</div>
<div id="D"></div>
<div>brother 2</div>
</div>
</body>
</html>How to locate its elder brother node through D node? Look at 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, get 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 1The blogger here also lists two methods, one is to obtain the sibling node through the parent node of the node, and the other is more elegant, through the xpath axis: preceding-sibling, which can obtain all sibling nodes of the current node , pay attention to the label in the brackets, 1 represents the closest brother node to the current node, the larger the number, the farther away from the current node, of course, the xpath axis: preceding is also available, but it is more complicated to use, what it gets is the all non-ancestor nodes before the node
4. Locate the younger brother node by the older brother node
The source code is consistent with 3, if you want to locate its younger brother node through 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, get its younger 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()result:
brother 2
brother 2
brother 2
brother 2
brother 2The above three use xpath, the first one is easy to understand, the second one uses the xpath axis: following-sibling, similar to preceding-sibling, its function is to obtain all sibling nodes of the current node at the same level, similarly, 1 represents The younger brother node closest to the current node, the larger the number, the farther it is from the current node; the third type uses the xpath axis: following, to get all the nodes after this node, except the ancestor node (the direction is opposite to the preceding, but because of the downward The order is easy to read and not easy to make mistakes, so it can also be used to obtain younger sibling nodes, but it is not recommended to use this way); the fourth and fifth types, we use css selector, the difference between + and ~ is: + means follow The div node after the current node, ~ means the div node after the current node, if you use find_elements, you can get a set of div nodes
发表评论 取消回复