1.简介
CSS定位方式和xpath定位方式基本相同,只是CSS定位表达式有其自己的格式。CSS定位方式拥有比xpath定位速度快,且比CSS稳定的特性。下面详细介绍CSS定位方式的使用方法。xpath定位是“屠龙刀”,那CSS定位就是"倚天剑了",相对CSS来说,具有语法简单,定位速度快等优点。
2.CSS定位优势
CSS定位是平常使用过程中非常重要的一种方式。它与xpath定位有诸多类似的地方,但是无论从性能还是语法上来说CSS都是比较有优势的。
1、一般情况下定位速度要比xpath快
2、语法比xpath要简洁
3.常用定位方法(8种)
(1)id
(2)name
(3)class name
(4)tag name
(5)link text
(6)partial link text
(7)xpath
(8)css selector(今天讲解)
4.自动测试实战
以百度首页为例,将CSS的各种定位方法一一讲解和分享一下。
4.1大致步骤
1.访问度娘首页。
2.通过CSS定位到元素,点击一下。
4.2绝对路径定位方式
顾名思义,将 CSS 表达式从 html 的最外层节点,逐层填写,最后定位到操作元素,此方法最为简单,具体格式为:
xxx.By.cssSelector("绝对路径")
具体例子:
xxx.By.cssSelector("html > body > div >input[value="查询"]")
CSS定位表达式使用绝对路径定位属性value的值为“查询”的页面元素。从CSS定位表达式可以看出,步间通过“>"分割,区别于CSS路径中的正”/“,并且也不再使用@符号选择属性。
具体步骤:
在被测试百度网页中,
(1)打开Chrome浏览器,输入百度网址访问百度首页,F12打开开发者工具,然后Ctrl+F调出输入框,在输入框中输入绝对路径的css表达式(html>body>div>div>div>div>div>form>span>input),回车。查找输入框并输入“北京宏哥”,如下图所示:
(2)按照同样的方法,查找“百度一下”按钮,如下图所示:
(3)点击“百度一下”按钮。
CSS表达式:
①用大于号(>)
(1)html>body>div>div>div>div>div>form>span>input
(2)html>body>div>div>div>div>div>form>span>input[value='百度一下']
②用空格
(1)html body div div div div div form span input
(2)html body div div div div div form span input[value='百度一下']
java定位语句:
(1)WebElement searchBox = driver.findElement(By.cssSelector( "html>body>div>div>div>div>div>form>span>input" ));
(2)WebElement SearchButton = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>input[value='百度一下']"));
4.2.1绝对路径的缺点
此方法缺点显而易见,当页面元素位置发生改变时,都需要修改,因此,并不推荐使用绝对路径的写法。
4.2.2代码设计
4.2.3参考代码
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月9日
*/
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( "html>body>div>div>div>div>div>form>span>input" ));
SearchBox.sendKeys("北京宏哥");
WebElement HotButton = driver.findElement(By.cssSelector("html>body>div>div>div>div>div>form>span>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();
}
}
4.2.4运行代码
1.运行代码,右键Run AS->java Application,控制台输出,如下图所示:
2.运行代码后电脑端的浏览器的动作,如下小视频所示:
4.3相对路径定位方式
相对路径,以‘标签’开头,具体格式为:
xxx.By.cssSelector("标签[属性='']")
具体例子:
xxx.By.cssSelector("input[value='查询']")
具体步骤:
在被测试百度网页中,按照宏哥在5.2中的方法 (1)查找输入框并输入“北京宏哥”,(2)查找“百度一下”按钮,(3)点击“百度一下”按钮。
CSS表达式:
(1)*[id="kw"]
(2)*[id="su"]
java定位语句:
(1)WebElement SearchBox = driver.findElement(By.cssSelector( "*[id='kw']" ));
(2)WebElement SearchButton = driver.findElement(By.cssSelector("*[id='su']"));
4.3.1代码设计
4.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月9日
*/
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( "*[id='kw']" ));
SearchBox.sendKeys("北京宏哥");
WebElement HotButton = driver.findElement(By.cssSelector("*[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();
}
}
4.3.3运行代码
1.运行代码,右键Run AS->java Application,控制台输出,如下图所示:
2.运行代码后电脑端的浏览器的动作,如下小视频所示:
4.4使用class名称定位元素
class名称定为元素,以‘标签’开头,具体格式为:
xxx.By.cssSelector("标签.class名称")
具体例子:
xxx.By.cssSelector("input.sprend")
具体步骤:
在被测试百度网页中,按照宏哥在5.2中的方法 (1)查找输入框并输入“北京宏哥”,(2)查找“百度一下”按钮,(3)点击“百度一下”按钮。
CSS表达式:
(1)input.s_ipt
(2)input.btn
java定位语句:
(1)WebElement SearchBox = driver.findElement(By.cssSelector( "input.s_ipt" ));
(2)WebElement SearchButton = driver.findElement(By.cssSelector("input.btn"));
4.4.1代码设计
4.4.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.s_ipt" ));
SearchBox.sendKeys("北京宏哥");
WebElement HotButton = driver.findElement(By.cssSelector("input.btn"));
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.4.1运行代码
1.运行代码,右键Run AS->java Application,控制台输出,如下图所示:
2.运行代码后电脑端的浏览器的动作,如下小视频所示:
从上边的控制台可以清楚地看到报错了,从视频中可以看到浏览器卡住不动了。
虽然选择一个可以按宏哥说的那种方法定位到按钮,但是在运行代码的时候还是会报错的。如下图所示:
5.小结
5.1绝对路径和相对路径的区别
绝对路径: 让CSS 从文档的根节点开始解析
相对路径:让CSS 从文档的任何元素节点开始解析
细心地小伙伴或者童鞋们会发现“百度一下”按钮的class是一串值“btn self-btn bg s_btn”,宏哥这里选择了第一个“btn”,无论是选择一个还是选择一串都会报错(Exception in thread "main" org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"css selector","selector":"input.btn self-btn bg s_btn"}),以后尽量避免用这种一串的定位。如下图所示:
6.拓展
6.1使用浏览器调试工具,可以直接获取CSS语句
这个主要是针对不会或者不熟悉CSS语法的小伙伴或者童鞋们宏哥提供的一种方法,其实CSS的语法很简单的,几个小时就可以搞定的。
好了,今天就分享和讲解到这里,下一篇和宏哥继续看CSS的其他定位方法。
每天学习一点,今后必成大神-
往期推荐(由于跳转参数丢失了,所有建议选中要访问的右键,在新标签页中打开链接即可访问):
Appium自动化系列,耗时80天打造的从搭建环境到实际应用精品教程测试
Python接口自动化测试教程,熬夜87天整理出这一份上万字的超全学习指南
Python+Selenium自动化系列,通宵700天从无到有搭建一个自动化测试框架
Java+Selenium自动化系列,仿照Python趁热打铁呕心沥血317天搭建价值好几K的自动化测试框架
Jmeter工具从基础->进阶->高级,费时2年多整理出这一份全网超详细的入门到精通教程