WebDriver元素查找方法摘录与总结

WebDriver元素查找方法摘录与总结

整理By：果冻迪迪

selenium-webdriver提供了强大的元素定位方法，支持以下三种方法。

• 单个对象的定位方法

• 多个对象的定位方法

• 层级定位

定位单个元素

在定位单个元素时,selenium-webdriver提示了如下一些方法对元素进行定位。

1. By.className(className))
2. By.cssSelector(selector)
3. By.id(id)
4. By.linkText(linkText)
5. By.name(name)
6. By.partialLinkText(linkText)
7. By.tagName(name)
8. By.xpath(xpathExpression)

 

注意：selenium-webdriver通过findElement()\findElements()等find方法调用"By"对象来定位和查询元素。

By类只是提供查询的方式进行分类。findElement返回一个元素对象否则抛出异常，findElements返回符合条

件的元素List，如果不存在符合条件的就返回一个空的list。

使用className进行定位

当所定位的元素具有class属性的时候我们可以通过classname来定位该元素。

下面的例子定位了51.com首页上class为"username"的li。

1. import org.openqa.selenium.WebDriver;
2. import org.openqa.selenium.WebElement;
3. import org.openqa.selenium.By;
4. public
   class ByClassName {
5. public
   static
   void main(String[] args) {
   1.    WebDriver driver = new FirefoxDriver();
   2.    driver.get("http://www.51.com");
   3.    WebElement element = driver.findElement(By.className("username"));
   4.    System.out.println(element.getTagName());
   5.    }
   6. }
6. import org.openqa.selenium.WebDriver;
7. import org.openqa.selenium.WebElement;
8. import org.openqa.selenium.By;
9. public
   class ByClassName {
10. public
    static
    void main(String[] args) {
11. WebDriver driver = new FirefoxDriver();
12. driver.get("http://www.51.com");
13. WebElement element = driver.findElement(By.className("username"));
14. System.out.println(element.getTagName());
15. }
16. }

 

输出结果：

li

使用id属性定位

51.com首页的帐号输入框的html代码如下：

<input id="passport_51_user" type="text" value="" tabindex="1" title="用户名/彩虹号/邮箱"

name="passport_51_user">

在下面的例子中我们用id定位这个输入框，并输出其title,借此也可以验证代码是否工作正常。

1. import org.openqa.selenium.By;
2. import org.openqa.selenium.WebDriver;
3. import org.openqa.selenium.WebElement;
4. import org.openqa.selenium.firefox.FirefoxDriver;
5. public
   class ByUserId {
6. /**第 13 / 80 页
7. * @param args
8. */
9. public
   static
   void main(String[] args) {
10. // TODO Auto-generated method stub
11. WebDriver dr = new FirefoxDriver();
12. dr.get("http://www.51.com");
13. WebElement element = dr.findElement(By.id("passport_51_user"));
14. System.out.println(element.getAttribute("title"));
15. }
16. }

输出结果：

用户名/彩虹号/邮箱

使用name属性定位

51.com首页的帐号输入框的html代码如下：

<input id="passport_51_user" type="text" value="" tabindex="1" title="用户名/彩虹号/邮箱"

name="passport_51_user">

使用name定位

WebElement e = dr.findElement(By.name("passport_51_user"));

使用css属性定位

51.com首页的帐号输入框的html代码如下：

<input id="passport_51_user" type="text" value="" tabindex="1" title="用户名/彩虹号/邮箱"

name="passport_51_user">

使用css定位

WebElement e1 = dr.findElement(By.cssSelector("#passport_51_user"));

使用其他方式定位

在定位link元素的时候，可以使用link和link_text属性；

另外还可以使用tag_name属性定位任意元素；

定位多个元素

上面提到findElements()方法可以返回一个符合条件的元素List组。看下面例子。

1. import java.io.File;
2. import java.util.List;
3. import org.openqa.selenium.By;
4. import org.openqa.selenium.WebDriver;
5. import org.openqa.selenium.WebElement;
6. import org.openqa.selenium.firefox.FirefoxBinary;
7. import org.openqa.selenium.firefox.FirefoxDriver;
8. public
   class FindElementsStudy {
9. /**
10. * @author gongjf
11. */
12. public
    static
    void main(String[] args) {
13. WebDriver driver = new FirefoxDriver();
14. driver.get("http://www.51.com");
15. //定位到所有<input>标签的元素，然后输出他们的id
16. List<WebElement> element = driver.findElements(By.tagName("input"));
17. for (WebElement e : element){
18. System.out.println(e.getAttribute("id"));
19. }
20. driver.quit();
21. }
22. }
23. 输出结果：
24. passport_cookie_login
25. gourl
26. passport_login_from
27. passport_51_user
28. passport_51_password
29. passport_qq_login_2
30. btn_reg
31. passport_51_ishidden
32. passport_auto_login

上面的代码返回页面上所有input对象。很简单，没什么可说的。

层级定位

层级定位的思想是先定位父元素，然后再从父元素中精确定位出其我们需要选取的子元素。

层级定位一般的应用场景是无法直接定位到需要选取的元素，但是其父元素比较容易定位，通过定位父元素再

遍历其子元素选择需要的目标元素，或者需要定位某个元素下所有的子元素。

下面的代码演示了如何使用层级定位class为"login"的div，然后再取得它下面的所有label，并打印出他们的文

本

1. import java.io.File;
2. import java.util.List;
3. import org.openqa.selenium.By;
4. import org.openqa.selenium.WebDriver;
5. import org.openqa.selenium.WebElement;
6. import org.openqa.selenium.firefox.FirefoxBinary;
7. import org.openqa.selenium.firefox.FirefoxDriver;
8. public
   class LayerLocator {
9. /**
10. * @author gongjf
11. */
12. public
    static
    void main(String[] args) {
13. WebDriver driver = new FirefoxDriver();
14. driver.get("http://www.51.com");
15. //定位class为"login"的div，然后再取得它下面的所有label，并打印出他们的值
16. WebElement element = driver.findElement(By.className("login"));
17. List<WebElement> el = element.findElements(By.tagName("label"));
18. for(WebElement e : el)
19. System.out.println(e.getText());
20. }
21. }
22. 输出结果：
23. 帐号：
24. 密码：
25. 隐身
26. 下次自动登录

********************************************************************************************************************************************************************以下总结来自博客园（园主：qileilove）**************************************

webdriver提供了丰富的API，有多种定位策略：id,name,css选择器，xpath等，其中css选择器定位元素效率相比xpath要高些，使用id，name属性定位元素是最可靠，效率最高的一种办法。

　　1、工具选择：在我们开发测试脚本的过程中各个浏览器给我们也提供了方便定位元素的工具，我比较喜欢使用firefox的firebug工具，也是目前很多开发测试人员比较热衷的选择，原因是firefox是唯一能够集成selenium IDE的浏览器，并且firebug给用户提供了丰富的扩展组件，我们可以根据自己的需要来选择，一般情况下，使用firebug+firefinder就足够使用了，firefinder支持xpath以及css选择器定位元素的功能，很方便帮助我们调试测试脚本

　　2、元素定位的方法：findElement() 与 findElements()

　　findElement() 该方法返回基于指定查询条件的webElement对象，或抛出不符合条件的异常  eg：driver.findElement(By.id("userID"));

　　findElements() 该方法返回指定查询条件的WebElement的对象集合，或返回null

　　3、WebElement对象提供的各种定位元素策略

ID：driver.findElement(By.id(<elementID>))

Name：driver.findElement(By.name(<elementName>))

className：driver.findElement(By.className(<elementClassName>))

tagName：driver.findElement(By.tagName(<htmlTagName>))

linkText：driver.findElement(By.linkText(<linkText>))

partialLinkText：driver.findElement(By.partialLinkText(<partialLinkText>))

css：driver.findElement(By.cssSelector(<cssSelector>))

xpath：driver.findElement(By.xpath(<xpathQuery>))

　　4、webelement类提供了诸多方法，在我们开发脚本过程中如何选择最可靠，效率最高的方法，使用id，name

是首选，因为他们在html标签中是唯一的，所以是最可靠的

　　ID定位：driver.findElement(By.id("username"))

　　name定位：driver.findElement(By.name("username"))

　　class定位：driver.findElement(By.className("username"))

　　多学一招：WebElement类支持查询子类元素，如果页面中存在重复元素，但在不同div中，我们可以先定位到其父元素，然后定位其子元素，方法如下：

　　WebElement hello = driver.findElement(By.id("div1")).findElement(By.lindText("hello"));

　　5、使用WebElements定位多个相似的元素，比如页面中存在五个单选按钮,他们有相同的class属性，值为：myRadio，我们想对五个按钮循环操作，我们可以把它们全部取出来放到集合中，然后做循环操作，如下：

List<WebElement> radios = driver.findElements(By.className("myRadio"));

for(int i = 0;i<radios.size();i++){

radios.get(i).click();

}

　　其他定位方法与操作id，name类似，这里不再赘述，接下来我着重对css选择器与Xpath描述下

　　一、WebDriver 的By类中提供了cssSelector()方法，该方法使用有以下几种形式：

　　1、使用相对路径定位元素

　　如，我们要定为DOM中的input元素，我们可以这样操作，不考虑其在DOM中的位置，但这样做存在一定弊端，当DOM中存在多个input元素时，该方法总返回DOM中的第一个元素，这并不是我们所期待的

　　eg：WebElement username = driver.findElement(By.cssSelector("input"));

　　另外，为了使用这种方法更准确的定位元素，我们可以结合该元素的其他属性来实现精确定位的目的

　　a、结合id来定位，driver.findElement(By.cssSelector("input#username")); 在标签与id之间使用#连接，如果对css了解的朋友一看就知道为什么会这样写了，不了解也没关系，只要记住这种写法就OK了

　　另外该方法也可简写为driver.findElement(By.cssSelector("#username")); 有点儿类似于id选择器

b、使用元素的任何属性来定位元素

　　driver.findElement(By.cssSelector("标签名[属性名='属性值']"));

　　c、匹配部分属性值

^=        driver.findElement(By.cssSelector("标签名[属性名^='xxx']"));  匹配属性值以xxx开头的元素

$=        driver.findElement(By.cssSelector("标签名[属性名$='xxx']"));  匹配属性值以xxx结尾的元素

*=         driver.findElement(By.cssSelector("标签名[属性名^='xxx']"));  匹配属性值包含xxx的元素

　　2、使用相对+绝对路径方法，这里是我自己定义的方法，方便记忆，的确也是这样来实现的

　　driver.findElement(By.cssSelector("div#login>input"))   该方法中"div#login>input" 首先通过相对路径定位到id为login的div元素，然后查找其子元素input（绝对路径）

　　二、使用xpath定位元素，相比cssSelector，xpath是我比较常用的一种定位元素的方式，因为它很方便，缺点是，消耗系统性能

　　1、使用绝对路径定位元素

　　driver.findElement(By.xpath("/html/body/div/form/input"))

　　2、使用相对路径定位元素

　　driver.findElement(By.xpath("//input"))   返回查找到的第一个符合条件的元素

　　3、使用索引定位元素，索引的初始值为1，注意与数组等区分开

　　driver.findElement(By.xpath("//input[2]"))   返回查找到的第二个符合条件的元素

　　4、结合属性值来定位元素

　　driver.findElement(By.xpath("//input[@id='username']"));

　　driver.findElement(By.xpath("//img[@alt='flowr']"));

　　5、使用逻辑运算符，结合属性值定位元素,and与or

　　driver.findElement(By.xpath("//input[@id='username' and @name='userID']"));

　　6、使用属性名来定位元素

　　driver.findElement(By.xpath("//input[@button]"))

　　7、类似于cssSlector，使用部分属性值匹配元素

starts-with()    driver.findElement(By.xpath("//input[stars-with(@id,'user')]"))

ends-with        driver.findElement(By.xpath("//input[ends-with(@id,'name')]"))

contains()        driver.findElement(By.xpath("//input[contains(@id,"ernam")]"))

　　8、使用任意属性值匹配元素

　　driver.findElement(By.xpath("//input[@*='username']"))

　　9、使用xpath轴来定位元素

　　这里略了，详见w3school.com

　　三、使用innerText定位元素

　　1、使用cssSelector查找innerText定位元素

　　driver.findElement(By.cssSelector("span[textContent='新闻']"));

　　2、使用xpath的text函数

　　driver.findElement(By.xpath("//span[contains(text(),'hello')]"))   包含匹配

　　driver.findElement(By.xpath("//span[text()='新闻']"))     绝对匹配