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

巨集哥發表於2021-08-18

1.簡介

按計劃今天巨集哥繼續講解css的定位元素的方法。但是今天最後一種巨集哥介紹給大家,瞭解就可以了,因為實際中很少用。

2.常用定位方法(8種)

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

3.自動測試實戰

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

3.1大致步驟

1.訪問度娘首頁。

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

3.2使用索引定位元素

在xpath中,我們使用過索引定位,因此在css中同樣可以使用索引定位。這個有的也叫定位子元素或者是偽類定位元素。

CSS的索引定位與xpath的索引定位有很大不同,我們還以百度首頁為例

我們要定位“百度一下”按鈕,先定位到“百度一下”元素標籤<input>的上級標籤<span>,而<span>標籤是<form>標籤下所有<span>標籤的第2個<span>,同時又是<form>標籤下的第9個子標籤

在xpath定位中這樣寫的:

driver.findElement(By.cssSelector("//*[@id='form']/span[2]/input"))

但是CSS定位必須這樣寫

driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input"))

具體步驟:

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

CSS表示式:

(1)form#form>span:nth-child(8)>input
(2)form#form>span:nth-child(9)>input

java定位語句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "form#form>span:nth-child(8)>input" ));
(2)WebElement SearchButton = driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input"));

3.2.1程式碼設計

3.2.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月13日
 */
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( "form#form>span:nth-child(8)>input" ));
        
        SearchBox.sendKeys("北京巨集哥");
        
        WebElement HotButton  = driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input"));
        
        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();
    }

}
3.2.3執行程式碼

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

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

3.3查詢兄弟元素

1)同層級下一個元素:+
2)選擇同層級多個相同標籤的元素:~
備註:
+號可以多次使用
~號一般返回的是多個元素,要用find_elements接收

具體步驟:

在被測試百度網頁中,按照巨集哥的老辦法進行驗證: (1)查詢輸入框並輸入“北京巨集哥”,(2)查詢“百度一下”按鈕,(3)點選“百度一下”按鈕。

CSS表示式:

(1)span.soutu-btn+input
(2)input#su

java定位語句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "span.soutu-btn+input" )); 
(2)WebElement SearchButton = driver.findElement(By.cssSelector("input#su"));
3.3.1程式碼設計

3.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月13日
 */
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( "span.soutu-btn+input" ));
        
        SearchBox.sendKeys("北京巨集哥");
        
        WebElement HotButton  = driver.findElement(By.cssSelector("form#form>span:nth-child(9)>input"));
        
        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();
    }

}
3.3.3執行程式碼

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

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

3.4多元素共同定位

CSS定位表示式支援多元素選擇器,也就是一次可以同時選擇多個相同的標籤,也可以同時選擇多個不同的標籤,不同標籤間用英文的逗號隔開

具體步驟:

在被測試百度網頁中,按照巨集哥在5.2中的方法 (1)查詢輸入框並輸入“北京巨集哥”,(2)查詢“百度一下”按鈕(因為span有好多input,所以巨集哥又用了一下id),(3)點選“百度一下”按鈕。

CSS表示式:

(1)span.soutu-btn, input
(2)span#s_btn_wr, input#su

java定位語句:

(1)WebElement SearchBox = driver.findElement(By.cssSelector( "span.soutu-btn, input" )); 
(2)WebElement SearchButton = driver.findElement(By.cssSelector("span#s_btn_wr, input#su"));
3.4.1程式碼設計

3.4.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月13日
 */
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( "span.soutu-btn, input" ));
        
        SearchBox.sendKeys("北京巨集哥");
        
        WebElement HotButton  = driver.findElement(By.cssSelector("span#s_btn_wr, input#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();
    }

}
3.4.3執行程式碼

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

丟擲異常主題為element not visible主要有一下三個方面的原因。

第一:元素之間存在邏輯關係,比如你要選擇地址時,中國選擇完畢之後,才能選擇北京。如果想直接一步到位,則會出現element not visible。這種錯誤並不是元素定位錯誤所引起的,而是邏輯關係上沒有走通。解決辦法:注意邏輯順序的選取,按照網站的要求啟用一個在啟用下一個。這裡面要注意一點的就是在是用Firefox的時候,我的邏輯關係是沒有錯誤的,但是Firefox還是會給我報錯element not visible。後來換成chrome瀏覽器,問題就可以解決。

第二:元素定位錯誤:如果網頁中存在你需要定位的多個元素,如果出現element not visible,有可能是你想要的定位和現實的定位出現了不同,解決辦法也就是定位更精確,即定位更有區分性。可以採用By.Id,By.xpath(expression)方式。

第三:元素定位到一個滑鼠事件後才能進行事件觸發的位置上:比如,需要滑鼠移動到某個區域,元素才可以顯示點選的按鈕,如果滑鼠離開,則相應的事件也沒辦法觸發。解決辦法:問題都已經描述清楚了,響應的解決辦法也就有了,那就是引入action類,模擬滑鼠移動到需要定位的元素下,讓dom樹從新生成,然後定位相應的元素。

這裡很明顯是第二個原因了。

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

4.小結

4.1css 和 xpath 的區別

1、css 更加簡潔
2、xpath 的功能更強大。對於簡單的元素定位可以使用css, 複雜的元素使用xpath.
3、xpath 可以使用 text 文字定位, css 不行。
4、效率。通常來說,xpath 的解析效率會低。css 要快一些。

4.2CSS與xpath定位比較

定位方式 xpath CSS
標籤 //input input
id //input[@id='kw'] input#kw
class //input[@class='s_ipt'] input.s_ipt
其它屬性 //input[@name='username']

input[name=username]

input[name^=user](以user開頭)

input[name$=name](以name結尾)

input[name*=erna](包含ernal)

定位子元素

//form[@id='form']/*

//form/input

form#form>*

form#form>input

 定位所有後代元素

//form//input

 form input
索引
//form/span[2]

 form>span[9]
 根據子元素回溯父元素  //*[./[@id='su']](定位到父級元素)  
根據兄弟元素定位   span.soutu-btn+input

相關文章