《手把手教你》系列技巧篇（十四）-java+ selenium自動化測試-元素定位大法之By xpath上卷（詳細教程）

2021 年 8 月 6 日
筆記
java+selenium自動化測試

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("//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("//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的其他定位方法。

Tags: java+selenium自動化測試