Python selenium ---父子，兄弟，相鄰節點定位方式詳解

時間 2019-11-18

標籤 python selenium 父子兄弟相鄰節點定位方式詳解欄目 Python 简体版

原文原文鏈接

https://blog.csdn.net/m0_37338590/article/details/80801302css

selenium中根據父子、兄弟、相鄰節點定位的方法，不少人在實際應用中會遇到想定位的節點沒法直接定位，須要經過附近節點來相對定位的問題，但從父節點定位子節點容易，從子節點定位父節點、定位一個節點的哥哥節點就束手無策了，接下作出詳盡的解析。html

1. 由父節點定位子節點web

最簡單的確定就是由父節點定位子節點了，咱們有不少方法能夠定位，下面上個例子：ui

對如下代碼：.net

<html>
<body>
<div id="A">

<div id="B">
<div>parent to child</div>
</div>
</div>
</body>
</html>
想要根據 B節點定位無id的子節點，代碼示例以下：設計

# -*- 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 childhtm

第1到第3都是咱們熟悉的方法，便再也不多言。第4種方法用到了css選擇器：nth-child(n)，該選擇器返回第n個節點，該節點爲div標籤；第5種方法用到了另外一個css選擇器： nth-of-type(n)，該選擇器返回第n個div標籤，注意與上一個選擇器的區別；第6種方法用到了xpath軸 child，這個是xpath默認的軸，能夠忽略不寫，其實質是跟方法2同樣的。blog

固然，css中還有一些選擇器是能夠選擇父子關係的如last-child、nth-last-child等，感興趣能夠自行百度，有機會博主會講講css selector。utf-8

2. 由子節點定位父節點element

由子節點想要定位到父節點就有點難度了，對如下代碼：

<html>
<body>
<div id="A">

<div>
<div>child to parent
<div>
<div id="C"></div>
</div>
</div>
</div>
</div>
</body>
</html>

?
咱們想要由 C節點定位其兩層父節點的div，示例代碼以下：

# -*- coding: utf-8 -*-
from selenium import webdriver
driver = webdriver.Firefox()
driver.get('D:\\py\\AutoTestFramework\\src\\others\\test.html')
# 1.xpath: `.`表明當前節點; '..'表明父節點
print driver.find_element_by_xpath("//div[@id='C']/../..").text
# 2.xpath軸 parent
print driver.find_element_by_xpath("//div[@id='C']/parent::*/parent::div").text
driver.quit()

結果：

child to parent
child to parent

這裏咱們有兩種辦法，第1種是 .. 的形式，就像咱們知道的，. 表示當前節點，.. 表示父節點；第2種辦法跟上面同樣，是xpath軸中的一個：parent，取當前節點的父節點。這裏也是css selector的一個痛點，由於css的設計不容許有可以獲取父節點的辦法（至少目前沒有）

3. 由弟弟節點定位哥哥節點

這是第三、第4種狀況，咱們這裏要定位的是兄弟節點了。如如下源碼：

<html>
<body>
<div id="A">

<div>brother 1</div>
<div id="D"></div>
<div>brother 2</div>
</div>
</body>
</html>

?
怎麼經過 D節點定位其哥哥節點呢？看代碼示例：

# -*- 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[1]").text
# 2.xpath軸 preceding-sibling
print driver.find_element_by_xpath("//div[@id='D']/preceding-sibling::div[1]").text
driver.quit()

結果

brother 1
brother 1

這裏博主也列舉了兩種方法，一種是經過該節點的父節點來得到哥哥節點，另一種比較優雅，是經過 xpath軸：preceding-sibling，其可以獲取當前節點的全部同級哥哥節點，注意括號裏的標號，1 表明着離當前節點最近的一個哥哥節點，數字越大表示離當前節點越遠，固然，xpath軸：preceding也能夠，可是使用起來比較複雜，它獲取到的是該節點以前的全部非祖先節點（這裏不太好解釋，改天專門寫篇博文講解下全部的軸）

4. 由哥哥節點定位弟弟節點

源碼與 3 一致，要想經過 D節點定位其弟弟節點，看代碼示例：

# -*- 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()

?
結果：

brother 2
brother 2
brother 2
brother 2
brother 2

五種方法定位其弟弟節點，上面三種是用xpath，第一種很好理解，第二種用到了xpath軸：following-sibling，跟preceding-sibling相似，它的做用是獲取當前節點的全部同級弟弟節點，一樣，1 表明離當前節點最近的一個弟弟節點，數字越大表示離當前節點越遠；第三種用到了xpath軸：following，獲取到該節點以後全部節點，除了祖先節點（跟preceding方向相反，但由於往下順序容易讀，不容易出錯，因此也是能夠用來獲取弟弟節點的，但也不建議這麼使用）；第4、第五種，咱們用到了css selector，+ 和 ~ 的區別是： + 表示緊跟在當前節點以後的div節點，~ 表示當前節點以後的div節點，若是用find_elements，則可獲取到一組div節點。 ———————————————— 版權聲明：本文爲CSDN博主「Jonny工做室」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連接及本聲明。原文連接：https://blog.csdn.net/m0_37338590/article/details/80801302