Selenium Webdriver元素定位的八种常用方式

文章转载自：http://www.cnblogs.com/qingchunjun/p/4208159.html

一 . selenium总结

1. webelement类提供了很多方法，如果页面中存在重复元素，但在不同div中，我们可以先定位到其父元素，然后定位其子元素，方法如下：

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

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

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

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

           radios.get(i).click();

       }
二 . Selenium Webdriver元素定位的八种常用方式

1. By.name()

假设我们要测试的页面源码如下：

<button id="gbqfba" aria-label="Google Search" name="btnK" class="gbqfba"><span id="gbqfsa">Google Search</span></button>

用by.name，则为driver.findElement(By.name("btnk"));
2.By.id()

用by.name，则为driver.findElement(By.id("gbqfsa"));

3.By.tagName()

该方法可以通过元素的标签名称来查找元素。该方法跟之前两个方法的区别是，这个方法搜索到的元素通常不止一个，所以一般建议结合使用findElements方法来使用.比如我们现在要查找页面上有多少个button，就可以用button这个tagName来进行查找

public class SearchPageByTagName{

public static void main(String[] args){

WebDriver driver = new FirefoxDriver();
driver.get("http://www.forexample.com");
List<WebElement> buttons = driver.findElements(By.tagName("button"));

System.out.println(buttons.size());  //打印出button的个数

}

}

另外，在使用tagName方法进行定位时，还有一个地方需要注意的是，通常有些HTML元素的tagName是相同的,单选框、复选框、文本框和密码框的元素标签都是input，此时单靠tagName无法准确地得到我们想要的元素，需要结合type属性才能过滤出我们要的元素。示例代码如下：

public class SearchElementsByTagName{
public static void main(String[] args){

WebDriver driver = new FirefoxDriver();

driver.get("http://www.forexample.com");
List<WebElement> allInputs = driver.findElements(By.tagName("input"));

//只打印所有文本框的值
for(WebElement e: allInputs){

if (e.getAttribute(“type”).equals(“text”)){

System.out.println(e.getText().toString());  //打印出每个文本框里的值

}
}
}

4.By.className()

  假设我们要测试的页面源码如下：

<button name="sampleBtnName" id="sampleBtnId" class="buttonStyle">you are Button</button>

<button name="sampleBtnName" id="sampleBtnId" class="buttonStyle aty">I'm Button</button>

<button id="gbqfba" aria-label="Google Search" name="btnK" class="buttonStyle atx"><span id="gbqfsa">Google Search</span></button>

      
       则为driver.findElement(By.className("buttonStyle"));
      后两个指定了两个不同的css伪类名作为它的样式属性值，此时就必须结合后面要介绍的cssSelector方法来定位了，。

 
     By.cssSelector("button[class='buttonStyle
aty'");

 5.By.linkText()

 这个方法比较直接，即通过超文本链接上的文字信息来定位元素，这种方式一般专门用于定位页面上的超文本链接。通常一个超文本链接会长成这个样子：

1 <a href="/intl/en/about.html">About Google</a>

  则为driver.findElement(By.linkText("buttonStyle"));
6.By.partialLinkText()

这个方法是上一个方法的扩展。当你不能准确知道超链接上的文本信息或者只想通过一些关键字进行匹配时，可以使用这个方法来通过部分链接文字进行匹配。

By.partialLinkText("About")

注意：使用这种方法进行定位时，可能会引起的问题是，当你的页面中不止一个超链接包含About时，findElement方法只会返回第一个查找到的元素，而不会返回所有符合条件的元素。如果你要想获得所有符合条件的元素，还是只能使用findElements方法。
7.By.xpath()

这rfbg非常强大的元素查找方式，使用这种方法几乎可以定位到页面上的任意元素。在正式开始使用XPath进行定位前，我们先了解下什么是XPath。XPath是XML
Path的简称，由于HTML文档本身就是一个标准的XML页面，所以我们可以使用XPath的语法来定位页面元素。

注意：1.
元素的xpath绝对路径可通过firebug直接查询。

 
       2. 一般不推荐使用绝对路径的写法，因为一旦页面结构发生变化，该路径也随之失效，必须重新写。

         3. 绝对路径以单/号表示，而下面要讲的相对路径则以//表示，这个区别非常重要。另外需要多说一句的是，当xpath的路径以/开头时，表示让Xpath解析引擎从文档的根节点开始解析。当xpath路径以//开头时，则表示让xpath引擎从文档的任意符合的元素节点开始进行解析。而当/出现在xpath路径中时，则表示寻找父节点的直接子节点，当//出现在xpath路径中时，表示寻找父节点下任意符合条件的子节点，不管嵌套了多少层级（这些下面都有例子，大家可以参照来试验）。弄清这个原则，就可以理解其实xpath的路径可以绝对路径和相对路径混合在一起来进行表示，想怎么玩就怎么玩。

driver.findElement(By.xpath("//*[@id='J_login_form']/dl/dt/input[@id='J_password']"));

也可以写成：

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

其中//*[@id=’ J_login_form’]这一段是指在根元素下查找任意id为J_login_form的元素，此时相当于引用到了form元素。后面的路径必须按照源码的层级依次往下写。按照图（3）所示代码中，我们要找的input元素包含在一个dt标签内，而dt又包含在dl标签内，所以中间必须写上dl和dt两层，才到input这层。当然我们也可以用*号省略具体的标签名称，但元素的层级关系必须体现出来，比如我们不能写成//*[@id='J_login_form']/input[@id='J_password']，这样肯定会报错的。

这段代码中的“退出”这个超链接，没有标准id元素，只有一个rel和href，不是很好定位。不妨我们就用xpath的几种模糊匹配模式来定位它吧，主要有三种方式，举例如下。

<a rel="nofollow" href="http://localhost/phpwind/index.php?m=u&c=login&a=logout">

  <em class="icon_quit"/>退出</a>

a. 用contains关键字，定位代码如下：

1 driver.findElement(By.xpath(“//a[contains(@href, ‘logout’)]”));

这句话的意思是寻找页面中href属性值包含有logout这个单词的所有a元素，由于这个退出按钮的href属性里肯定会包含logout，所以这种方式是可行的，也会经常用到。其中@后面可以跟该元素任意的属性名。

b. 用start-with，定位代码如下：

1 driver.findElement(By.xpath(“//a[starts-with(@rel, ‘nofo’)]));

这句的意思是寻找rel属性以nofo开头的a元素。其中@后面的rel可以替换成元素的任意其他属性。

c. 用Text关键字，定位代码如下：

1 driver.findElement(By.xpath(“//*[text()=’退出’]));

这个方法可谓相当霸气啊。直接查找页面当中所有的退出二字，根本就不用知道它是个a元素了。这种方法也经常用于纯文字的查找。

另外，如果知道超链接元素的文本内容，也可以用

1 driver.findElement(By.xpath(“//a[contains(text(), ’退出’)]));

这种方式一般用于知道超链接上显示的部分或全部文本信息时，可以使用。
最后，关于xpath这种定位方式，webdriver会将整个页面的所有元素进行扫描以定位我们所需要的元素，所以这是一个非常费时的操作，如果你的脚本中大量使用xpath做元素定位的话，将导致你的脚本执行速度大大降低，所以请慎用。
8.By.cssSelector()

driver.findElement(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”]。

示例：

driver.findElement(By.cssSelector("#J_login_form>dl>dt>input[id=’ J_password’]"));

cssSelector还有一个用处是定位使用了复合样式表的元素，之前在第4种方式className里面提到过。现在我们就来看看如何通过cssSelector来引用到第4种方式中提到的那个button。button代码如下：

<button id="J_sidebar_login" class="btn btn_big btn_submit" type="submit">登录</button>

cssSelector引用元素代码如下：

driver.findElement(By.cssSelector("button.btn.btn_big.btn_submit"))

。这样就可以顺利引用到使用了复合样式的元素了。

此外，cssSelector还有一些高级用法，如果熟练后可以更加方便地帮助我们定位元素，如我们可以利用^用于匹配一个前缀，$用于匹配一个后缀，*用于匹配任意字符。例如：

匹配一个有id属性，并且id属性是以”id_prefix_”开头的超链接元素：a[id^='id_prefix_']

匹配一个有id属性，并且id属性是以”_id_sufix”结尾的超链接元素：a[id$='_id_sufix']

匹配一个有id属性，并且id属性中包含”id_pattern”字符的超链接元素：a[id*='id_pattern']

最后再总结一下，各种方式在选择的时候应该怎么选择：

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

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

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

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