🔥《手把手教你》系列基礎篇之 4-python+ selenium 自動化測試-xpath 使用（詳細教程）

北京-宏哥發表於2024-11-20
Python

1. 簡介

　　俗話說：磨刀不誤砍柴工，因此在我們要開始寫自動化指令碼之前，我們先來學習和了解幾個基本概念，在完全掌握了這幾個概念之後，有助於我們快速上手，如何去編寫自動化測試指令碼。

元素，在這個教程系列，我們說的元素之網頁元素（web element）。在網頁上面的文字輸入框，按鈕，多選，單選，標籤，和文字都叫元素，總之，凡是能在頁面顯示的物件都可以作為頁面元素物件。

元素定位，有時候也叫 Locator，一個 HTML 頁面元素，可以用很多方法去描述這個元素的位置。打個比方，生活中地址，一個大廈，正常的地址是 xx 省 xx 市 xx 區 xx 街道 xxx 號，這個具體描述就是這個大廈的 Locator。同樣的道理，一個網頁元素，也有位置，也可以通

過一些手段或者表示式去描述這個元素在頁面對應的位置。

XPath，XPath 即為 XML 路徑語言，它是一種用來確定 XML（標準通用標記語言的子集）文件中某部分位置的語言。XPath 基於 XML 的樹狀結構，提供在資料結構樹中找尋節點的能力，XPath 很快的被開發者採用來當作小型查詢語言。

Selenium 一共有八種元素定位方法，這個在上一篇文章中已經提到過，其中在實際開發自動化指令碼過程中，XPath 的使用是最多的、比較好用的一種方法，所以本文就著重來介紹如何透過 XPath 來元素定位。學習了 XPath 元素定位後，其他 7 中方法，很容易理解，甚至

已經學會了其中好幾種方法。

1.1 XPath 工具安裝

為了提高抓取元素XPath的，我推薦在Firefox上安裝一個firepath的外掛，這個外掛，可以幫我們快速獲取網頁元素的XPath表示式。
  1. 開啟火狐瀏覽器，如果沒有安裝，下載預設安裝
  2. 點選右上角，選單 - 附件元件 - 擴充套件
  3. 在搜尋所有附件元件文字輸入框輸入：firebug
  4. 找到 Firebug，點選 安裝。重複步驟 3 和 4，搜尋和安裝 FirePath。
  5. 安裝好了之後，會在火狐瀏覽器右上角顯示一個蟲子的圖示。

1.2 XPath 工具簡單使用

我們用定位百度首頁的搜尋輸入框這個元素定位來演示。

  1. 開啟百度首頁
  2. 滑鼠定位到搜尋輸入框
  3. 右鍵滑鼠，選 Inspect in FirePath
  4. 開啟介面如下圖

①FirePath 自動推薦該元素的 XPath 表示式

②該元素節點的詳細資訊，XPath 表示式選取重點區域

③找到一個匹配元素

一般來說，自動推薦的XPath表示式定位不夠精確。我們大部分時候需要去步驟2中，找出能夠識別這個唯一元素的節點資訊。剛好上面透過id=kw只能找到一個匹配的元素，說明這個XPath可用，看起來也簡潔。實際專案中，可能XPath表示式寫得很長，或者附

近節點資訊好多相同，不太好能夠快速找到一個唯一的節點資訊去定位這個目標元素。接下來，我介紹幾種比較實用的 XPath 定位技巧，基本上能定位到所有的網頁元素。

1.3 XPath 定位技巧之 text() 方法

以百度首頁右上角 “新聞” 定位舉例

XPath 如下圖

1.4 XPath 定位技巧之 contains() 方法

有時候，我們不喜歡寫很長的XPath表示式，而且節點資訊裡面，有些資訊是動態的，每次都獲取都不一樣，這個時候contains()方法就很好用。

JD 首頁左側電腦選單舉例

XPath 寫法推薦，這裡用 contains() 方法來定位

這裡 href = //diannao.jd.com， 如果我覺得這個 href 太長，我只取關鍵字 diannao，利用 contains() 方法來定位就方便多了，推薦電腦這個元素的 XPath：//*/a[contains(@href,'diannao')]

1.5 相對 XPath 路徑寫法

有時候，我們遇到目標元素節點的資訊很少，不足夠用來精確定位到目標元素，這個時候，我們就需要考慮，利用目標元素上下附件節點，透過確定附件的節點從而確定目標元素，這種方式就叫相對路徑。

這裡用火狐瀏覽器百度首頁的一個單選按鈕來舉例；

火狐瀏覽器上 firepath 給出的推薦表示式是：

這裡推薦的 XPath 是根據目標元素節點中 id 資訊來定位的，這個透過 id 就能定位，當然好。有時候，如果這個 id 不能作為參考值，我們需要利用相對定位方法來定位這個新聞標題前面的單選按鈕；

1）先根據 value = google_web 或者 text()=谷歌來定位 “谷歌” 這個標籤。

2）根據相對定位來確定 “谷歌” 前面的這個 radio 按鈕。

3）XPath 的寫法是：.//*/label[@value='google_web']/

此前使用 webdriver 對瀏覽器進行了一些基本操作，可以說是基本接觸了這個工具了，接下來就應該做更多事情了。

開啟了網頁，接下來就需要對網頁中的內容進行操作了，例如定位網頁中的元素、讀取網頁元素中的內容、對內容進行操作。

2.小結

XPath 是一種在 XML 文件中定位元素的語言。因為 HTML 可以看做 XML 的一種實現，所以 selenium 使用者可是使用這種強大語言在 web 應用中定位元素。

2.1 絕對路徑定位：

XPath 有多種定位策略，最簡單和直觀的就是寫元素的絕對路徑。如果仍然把一個元素看做一個人的話，那麼現在有一個人，他沒有任何屬性特徵，那麼這個人一定會存在於某個地理位置，如：xx 省 xx 市 xx 區 xx 路 xx 號。那麼對於一個元素在一個頁面當中也會有

這樣的一個絕對地址。

參考 baidu.html 前端工具所展示的程式碼，我們可以用下面的方式來找到百度輸入框和搜尋按鈕。

find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span/input")

find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span[2]/input")

find_element_by_xpath() 方法用於 XPath 語言定位元素。XPath 的絕對路徑主要用標籤名的層級關係來

定位元素的絕對路徑。最外層為 html 語言，body 文字內，一級一級往下查詢，如果一個層級下有多個相同的標籤名，那麼就按上下順序確定是第幾個，div[2] 表示第二個 div 標籤。

2.2 利用元素屬性定位：

除了使用絕對路徑的以外，XPath 也可以使用使素的屬性值來定位。同樣以百度輸入框和搜尋按鈕為例：

find_element_by_xpath("//input[@id='kw']")

find_element_by_xpath("//input[@id='su']")

//表示當前頁面某個目錄下，input 表示定位元素的標籤名，[@id='kw'] 表示這個元素的 id 屬性值等於 kw。下面透過 name 和 class 屬性值來定位。

find_element_by_xpath("//input[@id='wd']")

find_element_by_xpath("//input[@class='s_ipt']")

find_element_by_xpath("//*[@class='bg s_btn']")

如果不想指定標籤名也可以用星號（*）代替。當然，使用 XPath 不僅僅只侷限在 id、name 和 class 這三個屬性值，元素的任意屬性值都可以使用，只要它能唯一的標識一個元素。

find_element_by_xpath("//input[@maxlength='100']")

find_element_by_xpath("//input[@autocomplete='off']")

find_element_by_xpath("//input[@type='submit']")

2.3 層級與屬性結合：

如果一個元素本身並沒有可以唯一標識這個元素的屬性值，我們可以找其上一級元素，如果它的上級

有可以唯一標識屬性的值，也可以拿來使用。參考 baidu.html 文字。

……

<form id="form" class="fm" action="/s" name="f">

<input type="hidden" value="utf-8" name="ie">

<input type="hidden" value="8" name="f">

<input type="hidden" value="1" name="rsv_bp">

<input type="hidden" value="1" name="rsv_idx">

<input type="hidden" value="" name="ch">

<input type="hidden" value="02.." name="tn">

<input type="hidden" value="" name="bar">

<span class="bg s_ipt_wr">

<input id="kw" class="s_ipt" autocomplete="off"

maxlength="100" value="" name="wd">

</span>

<span class="bg s_btn_wr">

<input id="su" class="bg s_btn" type="submit"

value="百度一下">

</span>

……

假如百度輸入框本身沒有可利用的屬性值，我們可以查詢它的上一級屬性。比如，“小明” 剛出生的時候沒有名字，沒上戶口（沒身份證號），那麼親朋好友來找 “小明” 可以先到小明的爸爸，因為他爸爸是有很多屬性特徵的，找到了小明的爸爸，抱在懷裡的一定就是小

明瞭。透過 XPath 描述如下：

find_element_by_xpath("//span[@class='bg s_ipt_wr']/input")

find_element_by_xpath("//span[@class='bg s_btn_wr']/input")

span[@class='bg s_ipt_wr'] 透過 class 屬性定位到是父元素，後面/input 也就表示父元素下面標籤名為 input 的子元素。如果父元素沒有可利用的屬性值，那麼可以繼續向上查詢 “爺爺” 元素。

find_element_by_xpath("//form[@id='form']/span/input")

find_element_by_xpath("//form[@id='form']/span[2]/input")

我們可以透過這種方法一級一級的向上打找，直到找到最外層的標籤，那麼就是一個絕對路徑的寫法了。

2.4 使用邏輯運算子

如果一個屬性不能唯一的區分一個元素，我們還可以使用邏輯運算子連線多個屬性來區別於其它屬性。

……

<input id="kw" class="su" name="ie">

<input id="kw" class="aa" name="ie">

<input id="bb" class="su" name="ie">

……

如上面的三行元素，假如我們現在要定位第一行元素，如果使用 id 將會與第二行元素重名，如果使用 class 將會與第三行元素的重名。那麼如果同時使用 id 和 class 就會唯一的標識這個元素。那麼這個時候就可以透過邏輯運算子號連線。

find_element_by_xpath("//input[@id='kw' and @class='su']/span/input")

當然，我們也可以用 and 連線更多的屬性來唯一的標識一個元素。

我們在本書的第一章中介紹的 Firebug 前端除錯工具和 FirePath 外掛可以方便的輔助 XPath 語法。

開啟 FireFox 瀏覽器的 FireBug 外掛，點選外掛左上角的滑鼠箭頭，再點選頁面上需要定位的元素，在元

素行上右鍵彈出快捷選單，選擇 “複製 XPath”，將會獲得當前元素的 XPath 語法，如圖：

FirePath 外掛的使用就更加方便和快捷了，選中元素後，直接在 XPath 的輸入框中生成當前元素的 XPath 語法，如圖：

相關文章