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

巨集哥發表於2021-08-18
JavaCSS

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

相關文章