# 9O WebDriver – 定位元素：第 4b 部分（XPath 續） > 原文： [https://javabeginnerstutorial.com/selenium/9o-webdriver-locating-elements-4b/](https://javabeginnerstutorial.com/selenium/9o-webdriver-locating-elements-4b/) 嗨冠軍！ 歡迎來到我們關于定位元素的最后一篇文章。 好極了！！！ 這是我們上一篇文章“[9n。 WebDriver – 定位元素：第 4a 部分（由 XPath 提供）](https://javabeginnerstutorial.com/selenium/9n-webdriver-locating-elements-4a/)”。 您以前曾經聽過我說過這個，然后您會再次聽我說過……在繼續使用 XPath 策略之前，請先閱讀第 4a 部分。 在這篇文章中，我們將研究以下技術， 1. 使用`Text()` 2. 使用`starts-with()` 3. 使用 XPath 軸 這些技術以及我們在第 4a 部分中看到的技術可以結合起來，并用于形成有效的 XPath，該 XPath 可以定位網頁上的任何元素。 現在通過示例來介紹當今的技術。 ## 1.使用`text()` 通過提供與網頁上顯示的文本**完全相同的**文本，這是一種輕松定位元素的方法。 **注意：** *當心！ 即使錯誤地包含空格，您也可能遇到“`ElementNotFound`”異常。 在代碼中提供的文本必須與可見文本完全匹配，這一點非常重要，我的意思是從字面上看！* **示例**：讓我們找到“Facebook 注冊”頁面上的“忘記帳戶？”鏈接。 右鍵點擊“忘記帳戶？”鏈接，然后選擇檢查元素以獲取相應的 HTML 代碼，如下所示， ```java <a href="https://www.facebook.com/recover/initiate?lwv=111" data-testid="forgot_account_link">Forgot account?</a> ``` 讓我們通過提供出現在 Facebook 頁面上的文本來找到此鏈接。 *代碼：* ```java driver.findElement(By.xpath("//a[text()='Forgot account?']")); ``` 如果要查找包含部分文本的所有元素，可以將`contains()`和`text()`技術結合使用。 可以使用`findElements`方法在列表中獲取所有元素。 讓我們嘗試在同一示例中同時實現`contains()`和`text()`。 由于我們只有一個鏈接與該文本，因此將使用`findElement`方法。 ```java driver.findElement(By.xpath("//*[contains(text(),'Forgot')]")); ``` ## 2.使用`starts-with()` 通過指定屬性的部分值（前綴），可以使用`starts-with()`查找元素。 當頁面重新加載時屬性值動態更改時，此功能非常有用。 **示例**：讓我們在“Facebook 注冊”頁面上找到“新密碼”文本框。 右鍵點擊“新密碼”文本框，然后選擇檢查元素以獲取相應的 HTML 代碼， ```java <input class="inputtext _58mg _5dba _2ph-" data-type="text" name="reg_passwd__" aria-required="1" placeholder="" id="u_0_d" aria-label="New password" type="password"> ``` 讓我們通過提供`type`屬性的部分前綴值“通過”來找到此文本框。 請注意，“登錄”部分中的密碼字段還具有`type`作為`password`。 ```java <input class="inputtext" name="pass" id="pass" tabindex="2" type="password"> ``` 因此，第二個元素必須位于我們的案例中。 *代碼：* ```java driver.findElement(By.xpath("(//input[starts-with(@type,'pass')])[2]")); ``` ## 3.使用 XPath 軸 XPath 軸定義在當前節點瀏覽 DOM 的樹形結構時要考慮的相對于當前節點的節點集或方向。 下表（禮貌性表示： [w3schools](https://www.w3schools.com/xml/xpath_axes.asp) ）顯示了所有 13 個可用的 XPath 軸及其結果。 | **軸名稱** | **結果** | | --- | --- | | 祖先 | 選擇當前節點的所有祖先（父，祖父級等） | | 祖先或自己 | 選擇當前節點的所有祖先（父，祖父級等）和當前節點本身 | | 屬性 | 選擇當前節點的所有屬性 | | 子項 | 選擇當前節點的所有子節點 | | 后代 | 選擇當前節點的所有后代（子代，孫代等） | | 后代或自己 | 選擇當前節點的所有后代（子代，孫代等）和當前節點本身 | | 之后 | 選擇當前節點的結束標記之后的文檔中的所有內容 | | 之后的同級 | 選擇當前節點之后的所有同級 | | 命名空間 | 選擇當前節點的所有名稱空間節點 | | 父項 | 選擇當前節點的父節點 | | 之前 | 選擇出現在文檔中當前節點之前的所有節點，但祖先，屬性節點和名稱空間節點除外 | | 之前的同級 | 選擇當前節點之前的所有同級 | | 自己 | 選擇當前節點 | 讓我們來看一些重要的 ### 3a. 父軸 選擇當前節點的父級。 **示例**：讓我們找到位于 Facebook Sign Up 頁面左上方的 Facebook 徽標的錨標記。 在檢查元素后， ```java <a href="https://www.facebook.com/" title="Go to Facebook Home"> <i class="fb_logo img sp_euCDsy2vhU4 sx_af4dba"> Facebook </i> </a> ``` *代碼：* ```java driver.findElement(By.xpath("//i[@class='fb_logo']/parent::a")); ``` 將找到具有`href`和`title`屬性的父節點“`a`”。 ### 3b. 祖先軸 選擇當前節點的所有祖先（父代，祖父級等）。 **示例**：讓我們在“Facebook 注冊”頁面上找到文字“生日”。 Upon inspecting the element, Birthday *代碼：* ```java driver.findElement(By.xpath("//select[@id='month']/ancestor::div[@class='_5k_5']/preceding-sibling::div")); ``` 帶有 ID 的“`select`”標簽，選擇了“`month`”。 轉到類“`_5k_5`”的祖先`div`標簽。 然后到其前一個帶有“`div`”標簽的同級節點，其文本為“`Birthday`”。 選擇該特定示例以顯示可以組合多個軸以獲得所需的結果。 ### 3c. 子軸 選擇當前節點的所有子節點 **示例**：讓我們找到“Facebook 注冊”頁面上的“登錄”按鈕。 Upon inspecting the element, ```java <label class="uiButton uiButtonConfirm" for="u_0_q" id="loginbutton"></label> ``` *代碼：* ```java driver.findElement(By.xpath("//label[@id='loginbutton']/child::input")); ``` 標識為“`loginbutton`”的標簽的子節點-標識為“`u_0_q`”的輸入標簽。 ### 3d. 后代軸 選擇當前節點的所有后代（子代，孫代等）。 **示例**：讓我們在“Facebook 注冊”頁面上找到“名字”文本框。 Upon inspecting the element, First name ```java <input id=”u_0_1″ class=”inputtext _58mg _5dba _2ph-” data-type=”text” name=”firstname” aria-required=”1″ placeholder=”” aria-label=”First name” type=”text”> </div> ``` *代碼：* ```java driver.findElement(By.xpath("//div[contains(@class,'uiStickyPlaceholderInput')]/descendant::input")); ``` 類別為`uiStickyPlaceholderInput`的`div`標簽的后代節點-ID 為`u_o_1`的輸入標簽已找到。 ### 3e. 同級軸 選擇當前節點之后的所有同級 **示例**：讓我們在“Facebook 注冊”頁面頁腳部分中找到“登錄”鏈接。 Upon inspecting the element, ```java <td class="_51m- hLeft plm"> <a href="/r.php" title="Sign Up for Facebook">Sign Up</a> </td> <td class="_51m- hLeft plm"> <a href="/login/" title="Log into Facebook">Log In</a> </td> ``` *代碼：* ```java driver.findElement(By.xpath("//td[@class='_51m- hLeft plm']/following-sibling::td/child::a")); ``` 以下`td`標簽的同級類`_51m-hLeft plm`是另一個`td`標簽，其子對象是帶有標題“登錄 Facebook”的錨標簽。 將后繼同級和子級軸組合在一起，以在頁腳部分中找到“登錄”超鏈接。 ### 3f. 上一個同級軸 選擇當前節點之前的所有同級 **示例**：讓我們找到“Facebook 注冊”頁面上的“女性”單選按鈕。 Upon inspecting the element, ```java <span class="_5k_2 _5dba"> <input id="u_0_g" name="sex" value="1" type="radio"> <label class="_58mt" for="u_0_g">Female</label> </span> ``` *代碼：* ```java driver.findElement(By.xpath("//label[@class='_58mt']/preceding-sibling::input")); ``` “標簽”標簽的前面同級是“無線電”類型的`input`標簽。 這樣就找到了所需的單選按鈕。 這樣，就涵蓋了一些常用的 XPath 軸類型。 我們在 BrainBell 方面一直處于停滯狀態。 那為什么要延遲呢？ 開始了， **BrainBell** – **注意！** *注意您的大腦狀態。* * *癥狀*：沒有任何東西被注冊，開始瀏覽文章或忘記您剛剛閱讀的內容。 * *診斷*：您的大腦超負荷。 * *補救*：休息一下！ 但是記得很快回來?? *我將根據我的經驗個人建議 **Pomodoro 技術**。 它非常有效。 試一試！* ## 概覽 讓我們來看一個測試案例，該案例實現了迄今為止本文中涵蓋的所有技術， *場景* 1. 打開 Firefox 瀏覽器。 2. 導航到 www.facebook.com 3. 使用`text()`找到“忘記帳戶？”鏈接 4. 將鏈接文本打印到控制臺 5. 使用`starts-with()`找到“新密碼”文本框 6. 輸入值“`test1234!`” 7. 使用子軸找到“登錄”按鈕 8. 將值屬性打印到控制臺 9. 使用父軸找到 Facebook 徽標 10. 將其`title`屬性的值打印到控制臺 11. 在頁腳部分的“兄弟姐妹”軸中找到“登錄”鏈接 12. 將其`title`屬性的值打印到控制臺 13. 使用上一個同級軸找到“女性”單選按鈕 14. 點擊單選按鈕 15. 使用祖先軸找到文本“生日” 16. 將其文本打印到控制臺 17. 使用后代軸找到“名字”文本框 18. 輸入值“首先測試” 19. 驗證 Eclipse IDE 控制臺的輸出屏幕和 JUnit 窗格是否成功 此方案的 JUnit 代碼是， ```java package com.blog.junitTests; import java.util.concurrent.TimeUnit; import org.junit.After; import org.junit.Before; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class ElementLocatorTest4b { // Declaring variables private WebDriver driver; private String baseUrl; @Before public void setUp() throws Exception { // Selenium version 3 beta releases require system property set up System.setProperty("webdriver.gecko.driver", "E:\\Softwares\\Selenium\\geckodriver-v0.10.0-win64\\geckodriver.exe"); // Create a new instance for the class FirefoxDriver // that implements WebDriver interface driver = new FirefoxDriver(); // Implicit wait for 5 seconds driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS); // Assign the URL to be invoked to a String variable baseUrl = "https://www.facebook.com/"; } @Test public void testPageTitle() throws Exception { // Open baseUrl in Firefox browser window driver.get(baseUrl); // Locate 'Forgot Account' link using XPath: text() WebElement forgotAccLink = driver.findElement(By.xpath("//*[contains(text(),'Forgot')]")); // Prints the link text to the console System.out.println("Link text: " + forgotAccLink.getText()); // Locate 'New password' text box by XPath: using starts-with() WebElement passwordNew = driver.findElement(By.xpath("(//input[starts-with(@type,'pass')])[2]")); // Clear the default placeholder or any value present passwordNew.clear(); // Enter/type the value to the text box passwordNew.sendKeys("test1234!"); // Locate 'Log In' button using XPath: child axis WebElement logIn = driver.findElement(By.xpath("//label[@id='loginbutton']/child::input")); // Prints 'value' attribute to console System.out.println("Child axis: " + logIn.getAttribute("value")); // Locate 'Facebook' logo using XPath: parent axis WebElement fbLogo = driver.findElement(By.xpath("//i[contains(@class,'fb_logo')]/parent::a")); // Prints 'title' attribute's value to console System.out.println("Parent axis: " + fbLogo.getAttribute("title")); // Locate 'Log In' link in footer section using XPath: following-sibling axis WebElement loginFooter = driver.findElement(By.xpath("//td[@class='_51m- hLeft plm']/following-sibling::td/child::a")); //Prints 'title' attribute's value to console System.out.println("Following-sibling: " + loginFooter.getAttribute("title")); // Locate 'female' radio button using XPath: preceding-sibling axis WebElement femaleRadioBtn = driver.findElement(By.xpath("//label[@class='_58mt']/preceding-sibling::input")); // Click the radio button femaleRadioBtn.click(); // Locate 'Birthday' text using XPath: ancestor axis WebElement birthday = driver.findElement(By.xpath("//select[@id='month']/ancestor::div[@class='_5k_5']/preceding-sibling::div")); //Prints text to console System.out.println("Ancestor axis: " + birthday.getText()); // Locate 'first name' test box using XPath: descendant axis WebElement firstName = driver.findElement(By.xpath("//div[contains(@class,'uiStickyPlaceholderInput')]/descendant::input")); firstName.clear(); firstName.sendKeys("test first"); } @After public void tearDown() throws Exception { // Close the Firefox browser driver.close(); } } ``` *執行結果：* 這段代碼將作為本文討論的每種技術的一部分進行解釋。 在 JUnit 窗口中，綠色條顯示測試用例已成功執行。 控制臺窗口顯示沒有任何錯誤。 它還可以按預期顯示所有打印結果。  下圖顯示了成功執行測試腳本后獲得的 Firefox 輸出。  好吧！ 現在，您應該全都適應定位策略。 我們將在所有即將到來的示例中看到這些策略的應用。 因此，請繼續關注此空間。 在另一個帖子中再見！ 祝你有美好的一天！