分享

Selenium Webdriver定位页面元素的几种方式

 Go_Ahead 2015-09-15
       对于有点开发经验的人来说学习这个定位其实相对容易很多,只要你写过前端js方面的代码,基本上selenium webdriver的元素定位方式一看就懂,当然也有几个需要特别注意(如By.xpath/),需要深入的去了解一些,毕竟在实际使用中还是挺频繁的,下面依照常用->不常用的顺序介绍selenium webdriver定位元素的几种方式:
下图是通过firebug调试定位到的百度搜索框:
 

1.By.id

2.By.name
同样,将控件所对应的name属性找到即可
 
3.By.xpath
这个方法非常重要,会经常使用到,使用这种方式几乎可以定位到任意页面上的元素。如图所示,将用xpath(页面中元素的路径)来定位我们需要用到的元素
 
 该图所对应的页面上的标签: 
通过路径来定位控件,分为:绝对路径、相对路径(这个概念对应做过开发的人来说非常熟悉,不错与我们开发中的绝对路径相对路径非常相似),那么通过selenium webdriver的xpath方式定位元素需要注意:
a.绝对路径以 "/" 表示,相对路径以 "//" 表示
-- 当xpath路径以 "/" 开头时,表示从页面的根节点开始解析;当"/"出现在xpath路径中时,表示     寻找父节点的直接子节点
-- 当xpath路径以 "//" 开头时,表示从页面上任意符合的元素节点开始解析;当"//"出现在xpath路径中时,表示寻找父节点下任意符合条件的子节点。
弄清楚它们各表示什么意思以后,就可以在实际应用中绝对路径相对路径混合使用。
下面是相对路径引用写法:
查找页面根元素://
查找页面上所有的input元素://input
查找页面上第一个form元素://form[1]
查找页面上第一个form元素内的直接input(即第一个input控件)元素://form[1]/input
查找页面上第一个form元素内所有的input元素(只要在form元素内的input都算,不管嵌套了多少个其它标签,此时可使用相对路径"//")://form[1]//input
查找页面上id为loginForm的form元素://form[@id='loginForm']
查找页面上id为loginForm的form元素下第一个input元素://form[@id='loginForm']/input
查找页面上id为loginForm的form元素下第4个input元素://form[@id='loginForm']/input[4]
查找页面上name属性为username的input元素://input[@name='username']
查找页面上name属性为contiune且type属性为button的input元素://input[@name='contiune'][@type='button']

4.By.tagName
通过元素的标签名称来查找元素.该方法与By.id、By.name不同,通常By.tagName查询出来的元素不止一个,可能会有多个,所以,使用该方法时会结合findElements来用,如下:
List<WebElement> inputElements = driver.findElements(By.tagName("input"));
for (WebElement input : inputElements) {
if(input.getAttribute("type").equals("text")){
System.out.println(input.getText());
}
}
在页面中,使用input标签的有:文本框/单选框/复选框/下拉框/密码框...,只有type属性不同

5.By.className
利用元素的css样式来查找元素.如下页面代码,通过className来查找对应的<p>标签
 WebElement element = driver.findElement(By.className("bmi_info"));
在我学习的过程中,结合tagName,className来获取BMI的值,如下:
先获得className为"bmi_info"的<p>元素,该元素内仅有一个span,这时就可以通过tagName获得该span,代码如下:
WebElement bmiElement = driver.findElement(By.className("bmi_info")).findElement(By.tagName("span"));
String actualBMI = bmiElement.getText();

6.By.cssSelector

cssSelector这种元素定位方式跟xpath比较类似,但执行速度较快,而且各种浏览器对它的支持都相当到位,所以功能也是蛮强大的。

下面是一些常见的cssSelector的定位方式:

定位id为flrs的div元素,可以写成:#flrs     注:相当于xpath语法的//div[@id=’flrs’]

定位id为flrs下的a元素,可以写成 #flrs > a  注:相当于xpath语法的//div[@id=’flrs’]/a

定位id为flrs下的href属性值为/forexample/about.html的元素,可以写成: #flrs > a[href=”/forexample/about.html”]

如果需要指定多个属性值时,可以逐一加在后面,如#flrs > input[name=”username”][type=”text”]。


7. By.linkText()
通过超文本链接上的文字信息来定位元素,这种方式一般专门用于定位页面上的超文本链接
WebElement linkElement = driver.findElement(By.linkText("新闻"));

8.By.partialLinkText()
该方法时By.linkText的扩展,当你不能准确知道超链接上的文本信息或者只想通过一些关键字进行匹配时,可以使用这个方法来通过部分链接文字进行匹配
WebElement linkElement = driver.findElement(By.partialLinkText("新"));













1. 当页面元素有id属性时,最好尽量用id来定位。但由于现实项目中很多程序员其实写的代码并不规范,会缺少很多标准属性,这时就只有选择其他定位方法。

2. xpath很强悍,但定位性能不是很好,所以还是尽量少用。如果确实少数元素不好定位,可以选择xpath或cssSelector。

3. 当要定位一组元素相同元素时,可以考虑用tagName或name。

4. 当有链接需要定位时,可以考虑linkText或partialLinkText方式。





 

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多