《手把手教你》系列技巧篇(十八)-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代码设计

《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

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,控制台输出,如下图所示:

《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

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代码设计

《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

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,控制台输出,如下图所示:

《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

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代码设计

《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

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,控制台输出,如下图所示:

《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

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();
} }

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

上一篇:《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)


下一篇:《手把手教你》系列技巧篇(十五)-java+ selenium自动化测试-元素定位大法之By xpath中卷(详细教程)