譯者 | 陳峻

審校 | 孫淑娟

在編寫Selenium類型的自動化腳本時，我們往往需要使用各種定位元素。不過在我們無法使用id、class、name等定位器實現定位的情況下，則可以使用XPath來定位網頁上的某個元素。雖然XPath并非是唯一能夠為Selenium提供元素發現功能的過程，但是它確實能夠通過提供靈活的定位器，來支持針對某種條件（如，動態搜索某個Web元素）的定位需求。

下面，我將和您討論如何使用XPath的各種表達式，來定位復雜的、或動態的項目。而此類項目的普遍特征是會隨著操作、或頁面的刷新，而動態發生變化。

什么是XPath?

作為Selenium中最常用的定位器之一，Xpath（也稱為XML path）通過為頁面提供HTML格式的代碼，來支持由您所定義的各項查找。也就是說，通過使用HTML的DOM結構，您可以針對HTML和XML文檔定位網頁中的每個元素。下圖展示了XPath的標準語法：

由上圖可知，其中：

1. //:表示當前的節點
2. Tagname：表示單個節點的標簽名稱
3. @：表示選擇屬性。
4. Attribute：表示節點的屬性
5. Value：表示已選擇的屬性值

為了能夠查找Web元素，Selenium提供了如下各種XPath定位器：

Selenium中的XPath類型

以下是Selenium提供的兩種XPath類型：

絕對XPath

絕對XPath是一種從根節點定位元素的快速且簡便的技術。其主要缺點在于，如果元素的路徑一旦發生變化，則會讓Xpath失敗并報錯。

Xpath的語法以單個正斜杠(/)開頭，表示您可以從根節點中選擇一個元素。下面展示了一個絕對XPath的表達式：

Absolute Xpath: /html/body/div/header/div/div/div[2]/div/div/div[2]/nav/div/div/ul/li[8]/a

?相對XPath

由于相對XPath能夠從HTML的DOM結構中間開始，因此避免了冗長的XPath。其開頭的雙斜杠(//)表示它可以在網站的任何位置，去搜索指定元素。

下面展示了一個相對XPath的表達式：

Relative XPath:  //*[@id=”primary-menu-single”]/li[8]/a

如何在Selenium中編寫XPath？

下面，我們來了解一下如何在Selenium中編寫XPath。

基本XPath

使用基本XPath的表達式，您可以從XML文檔中選擇節點、或節點列表，請參考下圖：

下面展示了其他一些簡單的XPath表達式：

Xpath = //input[@type=’email’]
Xpath = //textarea[@class= ‘wpcf7-form-control wpcf7-textarea’]
Xpath =  //input[@value=’Submit Now’]
Xpath = //a[@href=’https://qacraft.com/’]

Xpath使用contains()

當屬性值發生動態變化時，我們可以采用XPath中所提供的被稱為contains()的方法，來定位一個具有不完整文本的元素。

如下圖所示，name的完整值是“your-website”，但是我們只使用其部分值--“website”。其對應的XPath表達式為：

//input[contains(@name, ‘website’)]

Xpath使用OR和AND

在使用OR表達式時，Xpath會判斷OR前后的兩個條件，即：僅在前一個、或后一個條件為真，或者是兩者都為真時，才能識別到目標元素。例如，您可以使用如下XPath中的OR表達式，來確定是有一個、還是兩個條件為真。

下圖突出顯示了兩個基礎的組件：

Xpath: //*[@type='email' or @name='your-name']

而如下的AND語句要同時判斷兩個條件，并且只有兩個條件都必須為真時，才能識別特定的元素。

Xpath: //input[@type='text' and @name='your-name']

下圖突出顯示了具有“type”和“name”屬性的“Name”元素?？梢?，AND表達式會在兩個條件都為真時，去查找相關元素。

XPath使用starts-with函數

我們可以使用該函數，來識別自上次刷新了頁面、或在頁面上進行任何操作期間，發生了變化的元素。而如果屬性值根本就沒有發生改變，您仍然可以將此公式用于靜態屬性值。例如，某個特定元素的類的數值會發生如下有規律的變化：

Class = ‘wpcf7’
Class = ‘wpcf8’
Class = ‘wpcf9’

那么在下面的表達式中，有5個組件的“data-name”屬性值是以“your”開頭的：

Xpath: //span[starts-with(@data-name ,'your' )]

Xpath使用text()

通過使用元素的實際文本，我們可以在表達式中發現各種元素。此處可以被使用的元素文本包括：名稱、用戶名、電子郵件等標簽，或是帶有“保存”或“提交”等文本的按鈕、以及表單的標簽。下面展示了此類表達式的一個示例：

Xpath: //span[text()=’Contact us’]

Xpath使用索引

通過索引，Xpath可被用于定位某個列表中的特定元素。其指示性的語法表達式為：

XPath: (//*[@attribute='value'])[index]

由于表達式中有許多輸入標簽具有相同的屬性值，因此我們可以使用索引來定位元素。例如，如果您想使用一個屬性來生成5個不同的元素，而您實際上只需要用到其中的第2或第3個時，就可以使用索引來定位該元素。

Xpath: (//input[@type=’text’])[2]

如下圖所示，表達式根據“type”屬性找到了3個元素，而我們只想要其中的第2個元素，因此便可以使用索引2來發現它。

在Selenium中編寫XPath的Axes方法

在一些復雜的XPath中，我們可以使用如下語法表達式，去找到當前節點的下一個元素。

Syntax: //tagname[@attribute=’value’]//following::tagname

在下面的示例中，我們試著通過使用當前節點的名稱，來定位電子郵件地址。

Xpath: //input[@name='your-name']//following::input[1]

XPath使用following-sibling

我們可以通過使用following-sibling的如下語法，從當前節點之后的同一級節點中查找某個元素。

Syntax: //tagname[@attribute=’value’]//following-sibiling::tagname

Xpath使用preceding

我們可以通過使用preceding的如下語法，來定位當前節點之前的元素。

Syntax：//tagname[@attribute='value']//preceding::tagname

在下面的示例中，我們使用當前節點的電話號碼，來試著定位電子郵件地址。

Xpath: //input[@name=’your-phone’]//preceding::input[1]

如下圖所示，電話號碼是XPath中的當前節點，而電子郵件地址在該節點之前，因此我們可以通過preceding找到。

Xpath使用peceding-sibling

我們可以通過使用previous-sibling的如下語法表達式，查找當前節點之前的同級別元素。

Syntax：//tagname[@attribute='value']//previous-sibling::tagname

如下圖所示，我們使用當前節點，來試著定位“Website Testing”標簽。

XPath使用child

我們可以通過使用child的如下語法，來定位特定節點的每個子元素。

Syntax: //tagname[@attribute='value']//child::tagname

在如下示例中，input是父節點span的子節點，我們需要使用child表達式，來獲取name元素。

Xpath: //span[@data-name='your-name']//child::input

XPath使用Parent

我們可以通過使用parent的如下語法，找到當前節點的父節點。

Syntax：//tagname[@attribute='value']/parent::tagname

在下面的示例中，我們通過使用parent的表達式，可以通過子節點來確定父節點的div。此處的span是子節點。

Xpath: //span[@data-name='your-name']//parent::div

如何捕獲加載器圖像（Loader Images）

有時候，當我們在自動化Selenium網站時，會讓屏幕上短暫顯示一些元素。對此，我們可以試著為正在加載中的圖像識別XPath，畢竟它們需要一段時間才會顯示在屏幕上。下面，我列出了為加載器查找XPath的步驟：

第 1 步： 在首次加載頁面時，請按下F12以檢查元素。接著，請選擇資源選項卡以查看下圖。

第 2 步： 當我們在屏幕上看到正在加載的元素時，只需按下F8、或點擊下圖中被圈出的暫停鍵，以顯示其位置。

第 3 步： 返回元素頁面，并開始在此編寫定位器。

第 4 步： 在XPath完成之后，返回并從資源中選擇恢復選項。

通過上述方法，我們便在查找元素的XPath時，暫停執行，并將元素保留在屏幕上了。

小結

在上述關于Selenium定位器的介紹中，我們了解了不同類型的XPath。利用它們，我們可以使用contains()、Start-with()和text()去創建簡單的XPath，以及使用preceding和following創建更為復雜的XPath。同時，我們也介紹了如何定位動態元素。希望上述內容能夠為您學習和使用XPath提供幫助。

譯者介紹

陳峻 （Julian Chen），51CTO社區編輯，具有十多年的IT項目實施經驗，善于對內外部資源與風險實施管控，專注傳播網絡與信息安全知識與經驗。

原文標題：??Xpath in Selenium: A Complete Guide??，作者：Twisa Mistry