https://blog.csdn.net/m0_37338590/article/details/80801302
The method of selenium in the parent-child, brother, neighbor node location, a lot of people in the actual application will encounter'd like to target node can not be located directly, the problem needs to nearby nodes by relative positioning, but easy to locate the child node of the parent node, parent from the child node location, locate a node node brother for nothing, and took to make a detailed resolution.
1. The node of the parent node locator
The simplest sure it is positioned by the parent node of the child, there are many ways we can locate, on the example below:
For the following code:
<HTML>
<body>
<div ID = "A">
<-! locator parent node ->
<div ID = "B">
<div> parent to Child </ div>
</ div>
</ div>
</ body>
</ HTML>
want the node B is positioned no child node id, the following sample code:
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.串联寻找
print driver.find_element_by_id('B').find_element_by_tag_name('div').text
# 2.xpath父子关系寻找
print driver.find_element_by_xpath("//div[@id='B']/div").text
# 3.css selector父子关系寻找
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轴 child
print driver.find_element_by_xpath("//div[@id='B']/child::div").text
driver.quit()
结果：
parent to child
parent to child
parent to child
parent to child
parent to child
parent to child
1 through 3 are all familiar methods, we will no longer say. The fourth method uses css selectors: nth-child (n), which returns the n-th selector node that is the div tag; a fifth method uses another css selectors: nth-of-type ( n), the selector returns the n-th div tags, note the difference with a selector; sixth method uses xpath shaft child, this is the xpath default axis, it can be omitted, and its essence is with the method 2 the same.
Of course, css there are some options you can select the parent-child relationship, such as last-child, nth-last-child, etc., may be interested in their own Baidu, bloggers will have the opportunity to talk about css selector.
2. By positioning the child nodes parent node
By the child node to the parent node you want to locate a bit more difficult, for the following code:
<html>
<body>
<div id="A">
<!--子节点定位父节点-->
<div>
<div>child to parent
<div>
<div id="C"></div>
</div>
</div>
</div>
</div>
</body>
</html>
?
We want to position its two parent node of the C div, sample code as follows:
# - * - Coding: UTF-. 8 - * -
from the webdriver Selenium Import
Driver = webdriver.Firefox ()
driver.get ( 'D: \\ \\ Py AutoTestFramework the src \\ \\ \\ the test.html Others')
# 1.xpath: `.` representative of the current node; '..' for the 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 ()
result:
child to parent
child to parent
Here we have two options. The first one is .. form, as we know, that the current node, .. represents the parent node; 2 kinds of ways, like above, is a xpath axes:. Parent, taking the parent node of the current node. This is also a sore point css selector, because css design does not allow any parent can get way (at least not yet)
3. brother node location by the brother node
This is the third, fourth, we want to locate here is a sibling. Such as the following source:
<HTML>
<body>
<div ID = "A">
<-! following two nodes for the sibling node location ->
<div> Brother. 1 </ div>
<div ID = "D"> </ div >
<div> Brother 2 </ div>
</ div>
</ body>
</ HTML>
?
How do locate his brother node by node D? Look at the code sample:
# - * - Coding: UTF-. 8 - * -
from the webdriver Selenium Import
Driver = webdriver.Firefox ()
driver.get ( 'D: Py \\ \\ \\ Code AutoTestFramework the src \\ \\ \\ the test.html Others ')
# 1.xpath, his brother node acquired by 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'] / div PRECEDING-sibling :: [. 1]"). text
driver.quit ()
result
brother 1
brother 1
Here bloggers also include two methods, one is obtained by brother node parent of that node, another more elegant, by xpath axis: preceding-sibling, capable of acquiring all the siblings of the current node brother , Note that reference numerals in parentheses, represents the nearest node from the current node a brother, higher numbers mean away from the current node, of course, XPath axis: preceding may be, but is more complicated to use, it is obtained that the before all non-node ancestor nodes (this is not a good explanation, another day dedicated to write a blog post to explain all the axes)
4. brother node location by the brother node
3 with the same source, in order to position its brother node D through node, see Code Example:
# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\Code\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath，通过父节点获取其弟弟节点
print driver.find_element_by_xpath("//div[@id='D']/../div[3]").text
# 2.xpath轴 following-sibling
print driver.find_element_by_xpath("//div[@id='D']/following-sibling::div[1]").text
# 3.xpath轴 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
Five ways to locate his brother nodes with xpath above three types, the first is well understood, the second uses xpath axes: following-sibling, with a similar preceding-sibling, its role is to get the current node with all brother node level, too, represents the current node from the nearest node of a younger brother, larger the number the farther away from the current node; a third uses xpath axes: after all nodes following, get to that node, in addition to the ancestor node (with Instead preceding direction, but as easy to read down the order, less prone to error, it also can be used to get his brother nodes, but do not recommend such use); fourth, fifth, we use css selector, + and - the difference is: + means following the current node div node, ~ represents div node after the current node, if find_elements, can be obtained a set of div node.
----------------
Disclaimer: This article is CSDN blogger "Jonny studio" in the original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source and link this statement.
Original link: https: //blog.csdn.net/m0_37338590/article/details/80801302