selenium页面元素定位方法（3）——CSS

最新推荐文章于 2023-03-01 15:04:32 发布

通往光的路

最新推荐文章于 2023-03-01 15:04:32 发布

阅读量672

点赞数 1

分类专栏： selenium 自动化测试 selenium学习笔记文章标签： CSS定位 selenium 自动化

本文链接：https://blog.csdn.net/vikeyyyy/article/details/80053487

版权

selenium学习笔记同时被 3 个专栏收录

42 篇文章 8 订阅

订阅专栏

自动化测试

40 篇文章 2 订阅

订阅专栏

selenium

38 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何使用CSS定位方法在Selenium中定位网页元素，包括绝对路径、相对路径、class、ID、属性值等多种方式，并通过实例展示了Java定位语句。CSS定位在速度和稳定性上优于XPath，是自动化测试的重要技巧。

摘要由CSDN通过智能技术生成

CSS定位和XPath是差不多的，都能够解决大部分定位问题。两种掌握其中过一种即可解决大部分问题。

CSS介绍

CSS是一种用来表现HTML或XML等文件样式的前端语言，主要用于描述页面元素的展示和样式定义。

CSS语法

CSS定位和XPath的定位方式基本相同，只不过CSS表达式有自己的表达式格式。CSS定位的好处就是比XPath的速度要更快，而且比XPath定位方式更加稳定点。

被测试的HTML代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input .spread {
	FONT-SIZE: 20pt;
}

input.tight {
	FONT-SIZE: 10pt;
}
</style>
</head>
<body>
	<div id="div1">
		<input id="div1input"></input>
		<a href="http://www.sogou.com">搜狗搜索</a> 
		<img alt="div1-img1" 	src="https://http://www.sogou.com/images/logo/new/sogou.png"
			href="http://www.sogou.com">搜狗图片</img>
		<input type="button" value="查询" class="spread"></input>
	</div>
	<br/>
	<div name="div2">
		<input id="div2input" name="div2input"></input> 
		<a href="http://www.baidu.com">百度搜索</a> 
		<img alt="div2-img2" 	src="https://www.baidu.com/img/bdlogo.png"
			href="http://www.baidu.com">百度新闻</img>
	</div>
</body>
</html>

由于CSS定位基本是跟XPath定位一样，下面就不详细解释各种方法的特定，只列出使用语法。

使用绝对路径定位

被测试网页中，查找第一个div标签中的按钮。

CSS定位表达式：html>body>div>input[type='button']

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("html>body>div>input[type='button']"));

使用相对路径定位

被测试网页中，查找第一个div标签中的按钮。

CSS定位表达式：input[type='button']

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("input[type='button']"));

使用class名称定位

被测试网页中，查找第一个div标签中的按钮。

CSS定位表达式：input.spread

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("input.spread"));

使用ID属性值定位

被测试网页中，查找第一个div标签中ID为“div1input”的input元素

CSS定位表达式：input#div1input

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("input#div1input"));

使用页面其他属性值定位

被测试网页中，查找div标签中第一张图片

CSS定位表达式：img[alt='div1-img1'][href='http://www.sogou.com']

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("img[alt='div1-img1'][href='http://www.sogou.com']"));

使用页面元素属性值的一部分关键字定位

被测试网页中，查找sogou搜索的链接

CSS定位表达式：a[href^='http://www.so']；表示匹配链接地址开头含有关键字的链接

a[href$='fou.com']；表示匹配链接地址结尾含有关键字的链接

a[href*='so']；表示匹配链接地址包含有关键字的链接

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("a[href*='so']"));
WebElement searchBox = driver.findElement(By.cssSelector("a[href$='fou.com']"));
WebElement searchBox = driver.findElement(By.cssSelector("a[href^='http://www.so']"));

使用页面元素进行子页面元素的查询

被测试网页中，查找第一个div下的第一个页面元素

CSS定位表达式：div#div1 > input#div1input

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("div#div1 > input#div1input"));

使用伪类定位元素

被测试网页中，查找第一个div下的指定子页面元素

CSS定位表达式：div#div1:first-child ；查找id为div1的div页面元素下第一个元素。

div#div1:nth-child(2) ；查找id为div1的div页面元素下的第二个元素。

div#div1:last-child ；查找id为div1的div页面元素下的最后一个元素。

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("div#div1:first-child"));
WebElement searchBox = driver.findElement(By.cssSelector("div#div1:nth-child(2)"));
WebElement searchBox = driver.findElement(By.cssSelector("div#div1:last-child"));

查找同级兄弟页面元素

被测试网页中，查找第一个div下第一个input页面元素的统计兄弟页面元素。

CSS定位表达式：div#div1 > input +a ；表示ID属性值为div1的div页面元素下，查找input页面元素后面的同级链接元素

div#div1 > input+a+img；表示ID属性值为div1的div页面元素下，查找input页面元素和链接元素后面的同级图片元素

div#div1 > input + * +img ；表示ID属性值为div1的div页面元素下，查找input页面元素和某种类型页面元素后面的同级图片元素，*表示任意类型的页面元素。

Java定位语句：

WebElement searchBox = driver.findElement(By.cssSelector("div#div1 > input +a"));
WebElement searchBox = driver.findElement(By.cssSelector("div#div1 > input+a+img"));
WebElement searchBox = driver.findElement(By.cssSelector("div#div1 > input + * +img"));

通往光的路

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
selenium页面元素定位方法（3）——CSS

CSS定位和XPath是差不多的，都能够解决大部分定位问题。两种掌握其中过一种即可解决大部分问题。CSS介绍 CSS是一种用来表现HTML或XML等文件样式的前端语言，主要用于描述页面元素的展示和样式定义。CSS语法 CSS定位和XPath的定位方式基本相同，只不过CSS表达式有自己的表达式格式。CSS定位的好处就是比XPath的速度要更快，而且比XPa...
复制链接

扫一扫

专栏目录