Selenium - XPath

---

---

我們可以使用 xpath 定位器來識別網頁上的元素。它基本上是 XML 路徑，用於透過 DOM 中的 HTML 節點來定位元素。應用程式在瀏覽器中開啟後，使用者會與頁面上的元素進行互動以設計自動化測試用例。主要目標是藉助元素的屬性來定位元素。可以使用 id、xpath 等定位器來實現此元素檢測過程。

在 Java 中，findElement(By.xpath("<xpath 值>")) 方法用於檢測具有 xpath 值的元素。使用此方法，將返回第一個與 xpath 值匹配的元素。如果不存在與 xpath 值相同的元素，則會丟擲 NoSuchElementException。

語法

Webdriver driver = new ChromeDriver();
driver.findElement(By.xpath("xpath value"));

建立 XPath 表示式的規則

要使用 xpath 定位元素，表示式為 //tagname[@attribute='value']。// 表示當前節點，tagname 指的是當前節點的標籤名，@ 用於屬性選擇，attribute 指的是屬性名稱，value 指的是屬性值。

xpath 有兩種變體：**相對**和**絕對**。絕對 xpath 以 / 符號開頭，從根節點開始到我們要定位的元素。但是，如果任何元素路徑（從根到當前節點之間）的路徑發生更改，則現有的絕對 xpath 將無法用於元素。

讓我們從根節點開始識別下面突出顯示的元素。

Xpath used: /html/body/main/div/div/div[2]/div/ul/li[1]/input

請注意，我們可以透過在 $x("<xpath 值>") 中插入 xpath 值來在控制檯中驗證 xpath。如果存在匹配的元素，我們將獲得長度值大於 0，否則，它表示不存在與我們使用的 xpath 值匹配的元素。例如，在上面的示例中，我們使用了表示式 $x("/html/body/main/div/div/div[2]/div/ul/li[1]/input")，其結果為 length: 1。此外，將滑鼠懸停在結果上，我們將看到頁面上突出顯示的元素。

相對 xpath 以 // 符號開頭，並不從根節點開始。對於上面示例中討論的相同元素，相對 xpath 值為 "//*[@id='c_bs_1']"。

此外，請注意我們剛剛使用相對和絕對 xpath 識別的元素的 HTML 程式碼。

<input type="checkbox" id="c_bs_1">

還有一些可用的函式可以幫助構建相對 xpath 表示式，例如 text()。它用於藉助頁面上可見的文字識別元素。

讓我們藉助頁面上可見的文字識別突出顯示的文字 **Check Box**。

Xpath used: //h1[text()='Check Box'].

還有一些可用的函式可以幫助構建相對 xpath 表示式，例如 starts-with()。它用於識別其屬性值以特定文字開頭的元素。此函式通常用於屬性值在每次頁面載入時都會發生更改的情況。讓我們識別 **Main Level 1** 和 **Main Level 2** 標籤旁邊的兩個複選框。

Xpath used: //input[starts-with(@id, 'c_bs')]. 

在上面的示例中，我們看到使用的 xpath 生成了兩個與 xpath 值匹配的元素，input#c_bs_1 和 input#c_bs_2。

還有一些可用的函式可以幫助構建相對 xpath 表示式，例如 contains()。它識別其屬性值包含實際屬性值子文字的元素。此函式通常用於屬性值在每次頁面載入時都會發生更改的情況。

讓我們使用 contains() 識別 **Main Level 2** 標籤旁邊的突出顯示的複選框。

Xpath used://input[contains(@id, 'bs_2')].

我們可以使用 AND 和 OR 條件建立 xpath，以使屬性值正確。

讓我們使用 OR 條件識別 **Main Level 2** 標籤旁邊的突出顯示的複選框。

Xpath used: //input[@type='submit' or @id='c_bs_2'].

在上面的示例中，我們看到使用的 xpath 包含 OR 條件，其中 @type='submit' 條件不匹配，但 @id='c_bs_2' 條件匹配。

讓我們使用 AND 條件識別 **Main Level 2** 標籤旁邊的突出顯示的複選框。

Xpath used: //input[@type='checkbox' and @id='c_bs_2'].

在上面的示例中，我們看到使用的 xpath 包含 AND 條件，其中兩個屬性條件都匹配。

此外，請注意我們剛剛識別 xpath 的 **Main Level 2** 旁邊的複選框的 HTML 程式碼。

<input type="checkbox" id="c_bs_2">

我們可以使用以下軸建立 xpath。它表示出現在當前節點之後的所有節點。

Xpath used: //span[@class='plus']//following::input[1]

我們可以使用 following-sibling 軸建立 xpath。它表示上下文節點的後續同級節點。同級節點與當前節點位於同一級別，並共享其父節點。

Xpath used: //span[@class='plus']//following-sibling::input[1].

我們可以使用 parent 軸建立 xpath。它表示當前節點的父節點。

讓我們使用 parent 軸識別 **Sub Level 1** 標籤旁邊的突出顯示的複選框。

Xpath used: //*[@id='c_bf_1']//parent::li

此外，請注意我們剛剛識別 xpath 的 **Sub Level 1** 旁邊的複選框的 HTML 程式碼。

<input type="checkbox" id="c_bf_1">

我們可以使用 child 軸建立 xpath。它表示當前節點的子節點。

//*[@id='bf_1']//child::input[1].

• 我們可以使用 preceding 軸建立 xpath。它表示出現在當前節點之前的所有節點。
• 我們可以使用 self 軸建立 xpath。它表示來自當前節點的所有節點。
• 我們可以使用 descendant 軸建立 xpath。它表示來自當前節點的所有後代。

結論

本教程對 Selenium XPath 的全面介紹到此結束。我們首先介紹了什麼是 xpath，以及如何建立 xpath 表示式以及 Selenium 的規則。這使您能夠深入瞭解 Selenium XPath。明智的做法是繼續練習您所學的內容，並探索與 Selenium 相關的其他內容，以加深您的理解並拓寬您的視野。