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"));