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

1.簡介

CSS定位方式和xpath定位方式基本相同，只是CSS定位表示式有其自己的格式。CSS定位方式擁有比xpath定位速度快，且比CSS穩定的特性。下面詳細介紹CSS定位方式的使用方法。xpath定位是“屠龍刀”，那CSS定位就是"倚天劍了"，相對CSS來說，具有語法簡單，定位速度快等優點。

2.CSS定位優勢

CSS定位是平常使用過程中非常重要的一種方式。它與xpath定位有諸多類似的地方，但是無論從效能還是語法上來說CSS都是比較有優勢的。
1、一般情況下定位速度要比xpath快
2、語法比xpath要簡潔

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

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

4.自動測試實戰

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

4.1大致步驟

1.訪問度娘首頁。

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

4.2絕對路徑定位方式

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

xxx.By.cssSelector("絕對路徑")

具體例子：

xxx.By.cssSelector("html > body > div >input[value="查詢"]")

CSS定位表示式使用絕對路徑定位屬性value的值為“查詢”的頁面元素。從CSS定位表示式可以看出，步間通過“>"分割，區別於CSS路徑中的正”/“，並且也不再使用@符號選擇屬性。

具體步驟：

在被測試百度網頁中，

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

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

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

CSS表示式：

①用大於號（>）

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


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

②用空格

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

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

java定位語句：

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


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

4.2.1絕對路徑的缺點

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

4.2.2程式碼設計

4.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 北京-巨集哥

 *

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

 *

 * 2021年8月9日

 */

public class ByCss {

    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 css 定位

        WebElement SearchBox = driver.findElement(By.cssSelector( "html>body>div>div>div>div>div>form>span>input" ));

        SearchBox.sendKeys("北京巨集哥");

        WebElement HotButton  = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>input[value='百度一下']"));

        HotButton.click();

        //定位到文字，將文字高亮顯示

        //建立一個JavascriptExecutor物件

        JavascriptExecutor js =(JavascriptExecutor)driver;

        //新聞文字高亮顯示顏色

        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;");

        Thread.sleep (5000);

        //判斷開啟頁面是不是北京巨集哥，這裡用url作為驗證

          assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982";

          System.out.println("斷言通過!");

        driver.quit();

    }

}

4.2.4執行程式碼

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

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

4.3相對路徑定位方式

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

xxx.By.cssSelector("標籤[屬性='']")

具體例子：

xxx.By.cssSelector("input[value='查詢']")

具體步驟：

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

CSS表示式：

（1）*[id="kw"]


（2）*[id="su"]

java定位語句：

（1）WebElement SearchBox = driver.findElement(By.cssSelector( "*[id='kw']" )); 

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

4.3.1程式碼設計

4.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 css上卷（詳細教程）

 *

 * 2021年8月9日

 */

public class ByCss {

    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 css 定位

        WebElement SearchBox = driver.findElement(By.cssSelector( "*[id='kw']" ));

        SearchBox.sendKeys("北京巨集哥");

        WebElement HotButton  = driver.findElement(By.cssSelector("*[id='su']"));

        HotButton.click();

        //定位到文字，將文字高亮顯示

        //建立一個JavascriptExecutor物件

        JavascriptExecutor js =(JavascriptExecutor)driver;

        //新聞文字高亮顯示顏色

        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;");

        Thread.sleep (5000);

        //判斷開啟頁面是不是北京巨集哥，這裡用url作為驗證

          assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982";

          System.out.println("斷言通過!");

        driver.quit();

    }

}

4.3.3執行程式碼

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

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

4.4使用class名稱定位元素

class名稱定為元素，以‘標籤’開頭，具體格式為：

xxx.By.cssSelector("標籤.class名稱")

具體例子：

xxx.By.cssSelector("input.sprend")

具體步驟：

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

CSS表示式：

（1）input.s_ipt


（2）input.btn

java定位語句：

（1）WebElement SearchBox = driver.findElement(By.cssSelector( "input.s_ipt" ));


（2）WebElement SearchButton = driver.findElement(By.cssSelector("input.btn"));

4.4.1程式碼設計

4.4.1參考程式碼

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 css上卷（詳細教程）

 *

 * 2021年8月10日

 */

public class ByCss {

    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 css 定位

        WebElement SearchBox = driver.findElement(By.cssSelector( "input.s_ipt" ));

        SearchBox.sendKeys("北京巨集哥");

        WebElement HotButton  = driver.findElement(By.cssSelector("input.btn"));

        HotButton.click();

        //定位到文字，將文字高亮顯示

        //建立一個JavascriptExecutor物件

        JavascriptExecutor js =(JavascriptExecutor)driver;

        //新聞文字高亮顯示顏色

        js.executeScript ( "arguments[0].setAttribute('style', arguments[1]);",SearchBox,"background: orange; border: 2px solid red;");

        Thread.sleep (5000);

        //判斷開啟頁面是不是北京巨集哥，這裡用url作為驗證

          assert driver.getCurrentUrl() == "https://www.baidu.com/s?wd=%E5%8C%97%E4%BA%AC%E5%AE%8F%E5%93%A5&rsv_spt=1&rsv_iqid=0x8a46c2c2000000cd&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=12&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&inputT=4982&rsv_sug4=4982";

          System.out.println("斷言通過!");

        driver.quit();

    }

}

4.4.1執行程式碼

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

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

從上邊的控制檯可以清楚地看到報錯了，從視訊中可以看到瀏覽器卡住不動了。

雖然選擇一個可以按巨集哥說的那種方法定位到按鈕，但是在執行程式碼的時候還是會報錯的。如下圖所示：

5.小結

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

絕對路徑：讓CSS 從文件的根節點開始解析

相對路徑：讓CSS 從文件的任何元素節點開始解析

細心地小夥伴或者童鞋們會發現“百度一下”按鈕的class是一串值“btn self-btn bg s_btn”，巨集哥這裡選擇了第一個“btn”，無論是選擇一個還是選擇一串都會報錯（Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"input.btn self-btn bg s_btn"}），以後儘量避免用這種一串的定位。如下圖所示：

6.拓展

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

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

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

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