Web自動化測試：xpath & CSS Selector定位

測試開發小記發表於2020-12-25

Xpath 和 CSS Selector簡介

CSS Selector

CSS Selector和Xpath都可以用來表示XML文件中的位置。CSS (Cascading Style Sheets)是一種樣式表語言，是所有瀏覽器內建的，用於描述以HTML或XML編寫的文件的外觀和樣式。CSS Selector用於選擇樣式化的元素，所以理論上前端人員可以定位 DOM 節點並設定樣式，那麼對於測試人員這些元素也可以定位到。

XPath

XPath是XML路徑語言，是一種查詢語言，使用路徑表示式瀏覽XML文件中的元素和屬性。XPath標準語法如下：

Xpath=//tagname[@attribute='value']

// : 選擇當前節點
Tagname: 節點標籤名
@: 選擇屬性
Attribute: 節點屬性名
Value: 屬性值

XPath有絕對定位和相對定位兩種，絕對定位使用絕對路徑，缺點是路徑太長，只要一個節點變動就無法定位。以單斜槓（/）開始，表示從根節點開始選擇元素。下面是頁面https://www.baidu.com/上“百度一下”按鈕的絕對路徑：

/html/body/div[1]/div[1]/div[5]/div[1]/div/form/span[2]/input

相對路徑以雙斜槓（//）開始，可以從HTML文件的任何位置開始，“百度一下”按鈕的相對路徑可以表示如下

//input[@id="su"]

Xpath VS. CSS Selector

CSS Selector和Xpath幾乎可以定位到所有Web元素（HTML和XML文件元素，Android應用的層級結構使用xml編寫），它們的主要差異包括：

XPath通過遍歷的方式從XML文件中選擇節點，CSS Selector是一種匹配模式定位，因此CSS Selector比 XPath 執行效率更高。
Xpath可以通過文字來定位，而CSS Selector不能；
Xpath可以通過子節點來定位父節點，CSS Selector是前向的，不能利用子節點定位父節點。
CSS Selector語法相比Xpath更加簡潔

Xpath 和 CSS Selector元素定位

接下來對比一下這兩種方法的語法差異，節點的定義我們規定如下：

兒子元素定位

xpath使用‘/’，CSS Selector使用‘>’

	Xpath	CSS Selector
語法	//element/element	element>element
示例	//div/a	div > a
描述	選擇父元素為 <div> 元素的所有 <a> 元素。

還可以使用XPath Axes（軸）child 來定位子元素

XPATH:

//div/child::*   # 選擇父元素為 <div> 元素的所有兒子元素
//div/child::a  # 選擇父元素為 <div> 元素的所有<a>元素

CSS Selector:

div > a:nth-child(2) # 選擇父元素為 <div> 元素的第二個<a>元素
div > a:nth-last-child(2) # 選擇父元素為 <div> 元素的倒數第二個<a>元素
div > a:last-child # 選擇父元素為 <div> 元素的最後一個<a>元素
div > a:first-child # 選擇父元素為 <div> 元素的第一個<a>元素

子孫元素定位

xpath使用‘//’，CSS Selector使用空格

	Xpath	CSS Selector
語法	//element//element	element element
示例	//div//a	div a
描述	選擇 <div> 元素內部的所有 <a> 元素。

還可以使用XPath Axes（軸）descendant 來定位子孫元素

XPATH:

//div/descendant::*   # 選擇祖先元素為 <div> 元素的所有子孫元素
//div/descendant::a  # 選擇祖先元素為 <div> 元素的所有<a>元素

CSS Selector使用空格定位子孫元素後進行選擇:

div a:nth-child(2) # 選擇祖先元素為 <div> 元素的第二個<a>元素
div a:nth-last-child(2) # 選擇祖先元素為 <div> 元素的倒數第二個<a>元素
div a:last-child # 選擇祖先元素為 <div> 元素的最後一個<a>元素
div a:first-child # 選擇祖先元素為 <div> 元素的第一個<a>元素

鄰居節點定位

在同一個父節點下，定位下一個相鄰節點

	Xpath	CSS Selector
語法	//element/following-sibling::element	element + element
示例	//div/following-sibling::a	div + a
描述	選擇緊接在 <div> 元素之後的所有 <p> 元素。

Xpath可以定位當前節點前面的鄰居節點，CSS Selector不能

//*element/preceding-sibling::element

父元素、祖先元素定位

CSS Selector是前向的，不能利用子節點定位父節點

方法	描述
..	一個點”.“表示選取當前節點，兩個點”..“表示選取當前節點的父節點。
ancestor	當前節點祖先元素（父、祖父...）
parent	當前節點的父節點

Id定位

	Xpath	CSS Selector
語法	//*[@id='example']	#example
示例	//*[@id='uesrname']	#uesrname
描述	選擇id='uesrname'的元素。

Class定位

	Xpath	CSS Selector
語法	//*[@class='example']	.example
示例	//*[@class='uesrname']	.uesrname
描述	選擇class='uesrname'的元素。

屬性值定位

沒有Id和Class的情況下，可以使用其它屬性值定位，比如name、type等。

	Xpath	CSS Selector
語法	//*[@attribute='value']	[attribute=value]
示例	//*[@name='uesrname']	[name='username']
描述	選擇屬性值name='uesrname'的元素。

xpath可以使用 ‘and’ 或者 ‘or’ 連線兩個屬性：

XPATH：

//input[@name='login'and @type='submit']

CSS Selector：

input[name='login'][type='submit']

CSS Selector可以進行子字串匹配進行定位:

^= 匹配字首

[id^='id_prefix_'] # id字首為‘id_prefix_’的元素

$= 匹配字尾

[id$='_id_sufix'] # id字尾為‘_id_sufix’的元素

*= 包含某個字串

[id*='id_pattern'] # id包含‘id_pattern’的元素

Xpath Contains()方法

Contains()方法也許通過部分文字來定位查詢元素，CSS Selector不支援這種用法。

Xpath = //*[contains(@type,'partial_text')]
Xpath = //*[contains(@name,'partial_text')]
Xpath = //*[contains(@class,'partial_text')]
Xpath = //*[contains(@id,'partial_text')]
Xpath = //*[contains(text(),'partial_text')]
Xpath = //*[contains(@href,'partial_text')]

Xpath Starts-with()方法

查詢屬性值以特定文字開始的元素

Xpath = //*[starts-with(@type,'start_text')]
Xpath = //*[starts-with(@name,'start_text')]
Xpath = //*[starts-with(@class,'start_text')]
Xpath = //*[starts-with(@id,'start_text')]
Xpath = //*[starts-with(text(),'start_text')]
Xpath = //*[starts-with(@href,'start_text')]

Xpath Text()方法

Text()方法基於web元素文字來進行定位

Xpath = //*[text()='text_value']

例項

子孫元素定位

百度一下”text“，點選”資訊“

Xpath：

//*[@id="s_tab"]/descendant::a[1]
//*[@id="s_tab"]/child::*[1]/a[1]

CSS selector：

#s_tab a:nth-child(2)
#s_tab a:nth-last-child(9)

python測試程式碼：

def test_css(self):
    self.driver.get("https://www.baidu.com/")
    self.driver.find_element_by_id("kw").send_keys("test")        
    self.driver.find_element_by_id("su").click()        
    # element = self.driver.find_element_by_css_selector("#s_tab a:nth-child(2)")
    # element = self.driver.find_element_by_css_selector('#s_tab a:nth-last-child(9)')
    element = self.driver.find_element_by_xpath('//*[@id="s_tab"]/descendant::a[1]')        
    element.click()
    sleep(2)

鄰居節點定位

點選”資訊“下一個鄰居節點”視訊“

xpath

//*[@id="s_tab"]/descendant::a[1]/following-sibling::a[1]
//*[@id="s_tab"]/child::*[1]/a[1]/following-sibling::a[1]

CSS selector：

#s_tab a:nth-child(2) + a
#s_tab a:nth-last-child(9) + a

python測試程式碼：

def test_css2(self):   
    self.driver.get("https://www.baidu.com/")
    self.driver.find_element_by_id("kw").send_keys("test")
    self.driver.find_element_by_id("su").click()   
    # element = self.driver.find_element_by_css_selector('#s_tab a:nth-child(2) + a')   
    element = self.driver.find_element_by_xpath('//*@id="s_tab"]/descendant::a[1]/following-sibling::a[1]')   
    element.click()   
    sleep(2)

Xpath Contains()、Starts-with()、Text()定位

測試頁面：http://sahitest.com/demo/linkTest.htm

點選”linkByContent“

xpath語法：

//*[contains(@href,"Content")]
//*[starts-with(@href,"linkByC")]
//*[contains(text(),"Content")]
//*[text()="linkByContent"]

python測試程式碼：

def test_css2(self):
    self.driver.get("http://sahitest.com/demo/linkTest.htm")
    # element = self.driver.find_element_by_xpath('//*[contains(@href,"Content")]')
    # element = self.driver.find_element_by_xpath('//*[starts-with(@href,"linkByC")]')
    # element = self.driver.find_element_by_xpath('//*[contains(text(),"Content")]')
    element = self.driver.find_element_by_xpath('//*[text()="linkByContent"]')
    element.click()

總結

Xpath幾乎可以定位到所以Web元素，CSS Selector效率更高，且程式碼簡潔，但有些元素可能無法定位，特別是需要通過子元素來定位的父元素，或者需要通過文字定位的元素。

在實際使用中，按照自己的實際情況來選擇即可，CSS Selector理論上執行效率更高，但他們的效能差異不是很大，在幾毫秒或者幾十毫秒級別。這兩種定位方法除了本文介紹的以外，還有更多其它高階語法，可以參考官方文件。

--THE END--

文章標題：Web自動化測試：xpath & CSS Selector定位
本文作者：hiyo
本文連結：https://hiyong.gitee.io/posts/selenium-xpath-and-CSS-Selector-locator/
歡迎關注公眾號:「測試開發小記」及時接收最新技術文章！

Selenium3自動化測試【18】XPath定位元素（2）
2021-06-03
Selenium3自動化測試【20】CSS定位元素
2021-07-27
CSS
iOS appium UI 自動化測試配置可控 xpath
2020-07-22
iOSAPPUI
加速Web自動化測試
2016-12-07
Web
Web自動化-Selenium自動化測試-4-編寫測試用例
2020-12-03
Web
14 Web 自動化測試 -- PageObject 思想
2018-07-03
WebObject
利用 Selenium 自動化 web 測試
2014-06-03
Web
自己動手寫Web自動化測試框架（6）：自動化測試框架的規劃
2013-07-31
Web框架
測中策---我的Web自動化測試思路
2008-04-21
Web
自動化測試系列 —— UI自動化測試
2024-04-01
UI
自己動手寫Web自動化測試框架
2013-07-30
Web框架
關於Web端-UI自動化測試
2020-08-03
WebUI
大佬對 WEB 自動化測試的看法
2020-04-16
Web
UI自動化測試-web元素選擇
2020-12-06
UIWeb
Selenium3自動化測試【17】元素定位之Link定位
2021-05-05
Playwright自動化測試工具之元素定位實戰
2021-03-30
【自動化測試入門】自動化測試思維
2020-08-23
面向開發的測試技術（三）：Web自動化測試
2017-05-15
Web
CukeTest+Puppeteer的Web自動化測試（二）
2020-05-24
Web
CukeTest+Puppeteer的Web自動化測試（一）
2020-05-22
Web
[原創]淺談Web UI自動化測試
2016-01-21
WebUI
web自動化測試框架-06 如何快速編寫自動化指令碼
2018-06-07
Web框架指令碼
Web UI 自動化單個xpath抓取外掛詳解
2018-03-10
WebUI
自己動手寫Web自動化測試框架（1）：概述
2013-07-31
Web框架
大佬答疑解惑丨進行Web自動化測試，為什麼總是定位不到元素？
2021-01-11
Web
Web自動化-Selenium自動化測試-1-主要學習計劃
2020-12-03
Web
軟體測試:自動化測試
2019-08-02
Web前端自動化測試Cypress實踐總結
2021-06-04
Web前端
Web自動化之Headless Chrome測試框架整合
2017-07-11
WebChrome框架
自動化裝置測試與自動化測試的區別
2020-11-12
《手把手教你》系列技巧篇（十五）-java+ selenium自動化測試-元素定位大法之By xpath中卷（詳細教程）
2021-08-11
Java
自動化測試理解
2020-04-04
自動化測試思路
2019-05-11
airTest自動化測試
2018-11-01
AI
介面自動化測試
2021-01-10
API自動化測試
2023-11-07
API
自動化測試框架
2020-10-19
框架
自動化元件測試
2012-06-18
元件

Web自動化測試：xpath & CSS Selector定位

Xpath 和 CSS Selector簡介

CSS Selector

XPath

Xpath VS. CSS Selector

Xpath 和 CSS Selector元素定位

兒子元素定位

子孫元素定位

鄰居節點定位

父元素、祖先元素定位

Id定位

Class定位

屬性值定位

Xpath Contains()方法

Xpath Starts-with()方法

Xpath Text()方法

例項

子孫元素定位

鄰居節點定位

Xpath Contains()、Starts-with()、Text()定位

總結

相關文章