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

1.簡介

按計划今天宏哥繼續講解倚天劍-css的定位元素的方法：ID屬性值定位、其他屬性值定位和使用屬性值的一部分定位（這個類似xpath的模糊定位）。

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使用ID屬性值定位元素

使用ID屬性值定位元素，以‘標簽’開頭，先指定一個 HTML 標簽，然后加上一個“#”符號，跟上 id 的屬性值。具體格式為：

xxx.By.cssSelector("標簽#ID屬性值")

具體例子：

xxx.By.cssSelector("input#btn") 

具體步驟：

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

CSS表達式：

（1）input#kw

（2）input#su

java定位語句：

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

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

3.2.1代碼設計

3.2.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月12日
 */
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#kw" ));
        
        SearchBox.sendKeys("北京宏哥");
        
        WebElement HotButton  = driver.findElement(By.cssSelector("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.2.1運行代碼

1.運行代碼，右鍵Run AS->java Application，控制台輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：

3.3使用頁面其他屬性值定位元素

使用頁面其他屬性值定位元素，以‘標簽’開頭，具體格式為：

xxx.By.cssSelector("標簽[屬性=屬性值]")

具體例子：

xxx.By.cssSelector("input[password=password]") 

除了 class 和 id 屬性，CSS 選擇器也可以使用其他的元素屬性來定位。例如使用<input>中的 Name 屬性。

WebElement userName =driver.findElement(By.cssSelector("input[name=username]"));

alt 屬性來定位<img>元素。

WebElement previousButton =driver.findElement(By.cssSelector("img[alt='Previous']"));

你可能會遇到一個屬性不足以來定位到一個元素的情況，你需要聯合使用其他的屬性來達到精確匹配。下面的例子中，使用多個屬性來定位<input>元素。

WebElement previousButton =driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));

具體步驟：

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

CSS表達式：

（1）input[name=wd]

（2）input[value=百度一下]

java定位語句：

（1）WebElement SearchBox = driver.findElement(By.cssSelector( "input[name=wd]" )); 

（2）WebElement SearchButton = driver.findElement(By.cssSelector("input[value=百度一下]"));

3.3.1代碼設計

3.3.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[name=wd]" ));
        
        SearchBox.sendKeys("北京宏哥");
        
        WebElement HotButton  = driver.findElement(By.cssSelector("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();
    }

}

3.3.1運行代碼

1.運行代碼，右鍵Run AS->java Application，控制台輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：

3.4使用屬性值的一部分內容定位元素

 　　此方法宏哥感覺和前邊介紹的模糊定位差不多，具體語法和例子以及描述，如下表所示：

語法	例子	描述
^=	input[id^= ' ctrl']	以 XXX 開始,例如，如果一個元素的ID是ctrl_12,就可以定位到此元素，匹配到 id 的頭部 ctrl
$=	input[id$='_username']	以 XXX 結尾，例如，如果一個元素的 ID 是a_1_userName,返將會匹配到 id 的尾部_userName。
*=	input[id*='username']	包含。例如，如果一個元素的 ID 是 panel_login_userName_textfield，返將會匹配到此 id 值的_userName，從而定位到元素

具體步驟：

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

CSS表達式：

（1）input[id ^= 'k'] 

（2）input[id *='su']

java定位語句：

（1）WebElement SearchBox = driver.findElement(By.cssSelector( "input[id ^= 'k'] " )); 

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

3.3.1代碼設計

3.3.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[id^='k']" ));
        
        SearchBox.sendKeys("北京宏哥");
        
        WebElement HotButton  = driver.findElement(By.cssSelector("input[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();
    }

}

3.3.1運行代碼

1.運行代碼，右鍵Run AS->java Application，控制台輸出，如下圖所示：

2.運行代碼后電腦端的瀏覽器的動作，如下小視頻所示：

4.小結

這篇文章中的第一和第二種方法其實就是用：標簽和屬性組合進行定位的，那么單單用屬性可以定位嗎？宏哥試一下。

4.1屬性定位

可以通過元素的id,class,tag標簽這三個屬性直接定位
（1）# 表示id屬性，如：#kw
（2）. 表示class屬性，如：.s_ipt
（3）直接用標簽名稱，如：input

4.1.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月12日
 */
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 class定位
        WebElement SearchBox = driver.findElement(By.cssSelector( ".s_ipt" ));
        
        SearchBox.sendKeys("北京宏哥");
        
        //By css id定位
        WebElement HotButton  = driver.findElement(By.cssSelector("#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.2其它屬性定位

通過其它屬性定位時，直接寫屬性名和屬性值

 4.2.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月12日
 */
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 class定位
        WebElement SearchBox = driver.findElement(By.cssSelector( "[name='wd']" ));
        
        SearchBox.sendKeys("北京宏哥");
        
        //By css id定位
        WebElement HotButton  = driver.findElement(By.cssSelector("[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();
    }

}

以上代碼宏哥都運行了，可以正常運行和定位。好了今天時間也不早了就分享到這里吧！