獲取頁面元素的xpath,驗證自己寫的xpath,不用工具不用插件,看完這篇保證你學會!


鑒於很多新手測試(UI自動化小白)對如何獲取和驗證XPath一無所知一頭霧水,
特地寫此篇文章分享下最簡單的獲取xpath和驗證xpath正確不正確的方法。

.
.

一、如何獲取XPath

1、准備工作

電腦一台(包括左右鍵正常的鼠標)
電腦上有谷歌瀏覽器(火狐瀏覽器也可以哦)
測試員(視力正常,十指健全)

2、操作步驟

2.1打開瀏覽器,進入你要獲取元素的網頁,找到你要獲取的元素,右鍵點擊之后選擇檢查

這里用騰訊網為例,例如你想獲取【習大大出席歡迎儀式】這個文本的XPath,
那么需要做的就是右鍵點擊它,然后選擇檢查;
可以看到,頁面下方出現了一個工具欄,它就是chrome瀏覽器的開發者工具,默認顯示的是Elements這個標簽頁
還可以看到,有一行已經被置灰的,沒錯,那個就是你想獲取的元素的html代碼

在這里插入圖片描述

2.2接下來,你需要做的就是在這行html代碼上繼續點擊右鍵,選擇Copy,選擇Copy XPath

在這里插入圖片描述

2.3 找個地方粘貼就完事啦

復制到的xpath為://*[@id=“tab-news-01”]/ul[1]/li[2]/a[1]
.
.
.

二、如何驗證XPath

有時候直接復制的xpath太長了,或者不合適(怎么個不合適,又是另一個話題,等我找時間另開一篇),想用自己寫的。
那么,問題又來了,怎么驗證自己寫的xpath能定位到元素么?
請聽我慢慢道來……

1、准備工作

電腦一台(包括左右鍵正常的鼠標,還有正常使用的鍵盤)
電腦上有谷歌瀏覽器
測試員(視力正常,十指健全)

2、操作步驟

2.1打開瀏覽器,進入你要獲取元素的網頁,按下F12

(或者ctrl+shift+I(i的大寫),如果不嫌麻煩,我還是喜歡F12),當然,隨便找個元素點右鍵檢查也是可以的。

可以看到,頁面下方出現了一個工具欄,沒錯,又是它,chrome瀏覽器的開發者工具,這次它默認顯示的是Network這個標簽頁
在這里插入圖片描述

2.2 切換到Elements標簽,然后按下ctrl+F

這時候,細心並且視力正常的你就會觀察到,Elements標簽的最下面出現了一條輸入框,通過提示你也可以知道輸入框可以通過字符串、CSS選擇器和Xpath進行搜索
在這里插入圖片描述

2.3 接下來就是把你自己寫的xpath粘貼進去,然后回車就可以啦

這里還是用騰訊網,用上面的教程復制的xpath進行驗證
在這里插入圖片描述
可以看到,頁面和Elements標簽中的代碼都高亮顯示出了找到的相應的元素
並且輸入框的最后面的【1 of 1】,后面的1表示找到了多少個,前面的1表示當前高亮的是第幾個。
咱們修改下xpath看看下圖,現在找到了4個a標簽的元素,高亮的是第二個。
在這里插入圖片描述

怎么樣,你學會了么?

不會的話可以在評論區說哪里看不明白,我繼續修改下教程。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM