1.簡介

按巨集哥計劃，本文繼續介紹WebDriver關於元素定位大法，這篇介紹定位倒數二個方法：By xpath。xpath 的定位方法， 非常強大。 使用這種方法幾乎可以定位到頁面上的任意元素。

2.什麼是xpath？

xpath 是XML Path的簡稱， 由於HTML文件本身就是一個標準的XML頁面，所以我們可以使用Xpath 的用法來定位頁面元素。XPath 是XML 和Path的縮寫，主要用於xml文件中選擇文件中節點。基於XML樹狀文件結構，XPath語言可以用在整棵樹中尋找指定的節點。XPath 定位和CSS定位相比有更大的靈活性。XPath 在文件樹中某個節點既可以向前搜尋，也可以向後搜尋，CSS定位只能在文件樹中向前搜尋，但XPath的定位速度比CSS 慢一些。

3.xpath定位的缺點

xpath 這種定位方式， webdriver會將整個頁面的所有元素進行掃描以定位我們所需要的元素， 這是個非常費時的操作， 如果指令碼中大量使用xpath做元素定位的話， 指令碼的執行速度可能會稍慢。

4.常用定位方法（8種）

（1）id
（2）name
（3）class name
（4）tag name
（5）link text
（6）partial link text
（7）xpath（今天講解）
（8）css selector

5.自動測試實戰

以百度首頁為例，將xpath的各種定位方法一一講解和分享一下。

5.1大致步驟

1.訪問度娘首頁。

2.通過xpath定位到元素，點選一下。

5.2絕對路徑定位方式

顧名思義，將 Xpath 表示式從 html 的最外層節點，逐層填寫，最後定位到操作元素，此方法最為簡單，具體格式為：

xxx.find_element_by_xpath("絕對路徑")

具體例子：

xxx.find_element_by_xpath("/html/body/div[x]/form/input") x 代表第x個 div標籤，注意，索引從1開始而不是0

具體步驟：

在被測試百度網頁中，

（1）開啟Chrome瀏覽器，輸入百度網址訪問百度首頁，F12開啟開發者工具，然後Ctrl+F調出輸入框，在輸入框中輸入絕對路徑的xpath表示式（/html/body/div/div/div/div/div/form/span/input），回車。查詢輸入框並輸入“北京巨集哥”，如下圖所示：

（2）按照同樣的方法，查詢“百度一下”按鈕，如下圖所示：

（3）點選“百度一下”按鈕。

XPath表示式：

（1）/html/body/div/div/div/div/div/form/span/input

（2）/html/body/div/div/div/div/div/form/span[2]/input[@value='百度一下']

java定位語句：

（1）WebElement searchBox = driver.findElement(By.xpath( "/html/body/div/div/div/div/div/form/span/input" ));

（2）WebElement SearchButton = driver.findElement(By.xpath("/html/body/div/div/div/div/div/form/span[2]/input[@value='百度一下']"));

5.2.1絕對路徑的缺點

此方法缺點顯而易見，當頁面元素位置發生改變時，都需要修改，因此，並不推薦使用絕對路徑的寫法。

5.2.2程式碼設計

5.2.3參考程式碼

package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-巨集哥
 *
 * 2021年8月3日
 */
public class ByXpath {
    
    public  static  void  main(String [] args) throws InterruptedException {
        
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑
 
        WebDriver driver = new ChromeDriver ();
        //最大化視窗  
        driver.manage().window().maximize();  
        driver.get("http://wwww.baidu.com");
        
        //By xpath 定位
        WebElement wid = driver.findElement(By.xpath( "/html/body/div/div/div/div/div/form/span/input" ));
        
        wid.sendKeys("北京巨集哥");
        
        WebElement button = driver.findElement(By.xpath("/html/body/div/div/div/div/div/form/span[2]/input[@value='百度一下']"));
        
        button.click();
        
        //定位到文字，將文字高亮顯示
        //建立一個JavascriptExecutor物件
        JavascriptExecutor js =(JavascriptExecutor)driver;
 
        //新聞文字高亮顯示顏色
        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",wid,"background: orange; border: 2px solid red;");
 
        Thread.sleep (5000);
 
        driver.quit();
    }

}

5.2.4執行程式碼

1.執行程式碼，右鍵Run AS->java Application，控制檯輸出，如下圖所示：

2.執行程式碼後電腦端的瀏覽器的動作，如下小視訊所示：

5.3相對路徑定位方式

相對路徑，以‘//’開頭，具體格式為：

xxx.find_element_by_xpath("//標籤")

具體例子：

xxx.find_element_by_xpath("//input[x]") 定位第x個input標籤,[x]可以省略，預設為第一個

相對路徑的長度和開始位置並不受限制，也可以採取以下方法

xxx.find_element_by_xpath("//div[x]/form[x]/input[x]"), [x]依然是可以省略的

具體步驟：

在被測試百度網頁中，按照巨集哥在5.2中的方法 （1）查詢輸入框並輸入“北京巨集哥”，（2）查詢“百度一下”按鈕，（3）點選“百度一下”按鈕。

XPath表示式：

（1）//*[@id="kw"]

（2）//*[@id="su"]

java定位語句：

（1）WebElement searchBox = driver.findElement(By.xpath( "//*[@id='kw']" ));

（2）WebElement SearchButton = driver.findElement(By.xpath("//*[@id='su']"));

5.3.1程式碼設計

5.3.2參考程式碼

package lessons;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

/**
 * @author 北京-巨集哥
 * 
 * 《手把手教你》系列技巧篇（十四）-java+ selenium自動化測試-元素定位大法之By xpath上篇（詳細教程）
 * 
 * 2021年8月3日
 */
public class ByXpath {
    
    public  static  void  main(String [] args) throws InterruptedException {
        
        System.setProperty("webdriver.gecko.driver", ".\\Tools\\chromedriver.exe"); //指定驅動路徑
 
        WebDriver driver = new ChromeDriver ();
        //最大化視窗  
        driver.manage().window().maximize();  
        driver.get("http://wwww.baidu.com");
        
        //By xpath 定位
        WebElement SearchBox  = driver.findElement(By.xpath( "//*[@id='kw']" ));
        
        SearchBox.sendKeys("北京巨集哥");
        
        WebElement SearchButton  = driver.findElement(By.xpath("//*[@id='su']"));
        
        SearchButton.click();
        
        //定位到文字，將文字高亮顯示
        //建立一個JavascriptExecutor物件
        JavascriptExecutor js =(JavascriptExecutor)driver;
 
        //新聞文字高亮顯示顏色
        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;");
 
        Thread.sleep (5000);
 
        driver.quit();
    }

}

5.3.3執行程式碼

1.執行程式碼，右鍵Run AS->java Application，控制檯輸出，如下圖所示：

2.執行程式碼後電腦端的瀏覽器的動作，如下小視訊所示：

6.小結

6.1絕對路徑和相對路徑的區別

絕對路徑 以 "/" 開頭， 讓xpath 從文件的根節點開始解析

相對路徑 以"//" 開頭， 讓xpath 從文件的任何元素節點開始解析

7.拓展

7.1使用瀏覽器除錯工具，可以直接獲取xpath語句

這個主要是針對不會或者不熟悉xpath語法的小夥伴或者童鞋們巨集哥提供的一種方法，其實xpath的語法很簡單的，幾個小時就可以搞定的。

　　好了，今天就分享和講解到這裡，下一篇和巨集哥繼續看xpath的其他定位方法。