《手把手教你》系列技巧篇（十八）-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();

    }

}

以上代码宏哥都运行了，可以正常运行和定位。好了今天时间也不早了就分享到这里吧！