selenium 笔记 --- 元素定位【java】

2017-11-08 本文已影响0人这不挺好

一、selenium 定位元素

在使用selenium webdriver进行元素定位时，通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素。其中By类的常用定位方式共八种，现分别介绍如下：

1、By.name()

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

# 示例：
driver.findElement(By.name("btnK"));

2、By.id()

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

# 示例：
driver.findElement(By.id("gbqfba"));

3、By.tagName()

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

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

# 示例：
 List<WebElement> buttons = driver.findElements(By.tagName("button"));    //返回的是一个集合

4、By.className()

# 源码：
<button name="sampleBtnName" id="sampleBtnId" class="buttonStyle">I'm Button</button>

# 示例：
driver.findElement(By.className("buttonStyle"));

5、By.linkText()

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

# 源码：
<a href="/intl/en/about.html">About Google</a>

# 示例：
driver.findElement(By.linkText("About Google"));

6、By.partialLinkText()

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

# 源码：
<a href="/intl/en/about.html">About Google</a>

# 示例：
driver.findElement(By.partialLinkText("About"));

7、By.xpath()

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

# 源码：
<html>
    <body>
        <form id="loginForm">
            <input name="username" type="text"/>
            <input name="password" type="password"/>
            <input name="continue" type="submit" value="Login"/>    
            <input name="continue" type="button" value="Clear"/>
        </form>
    </body>
</html>

#  示例：找到第三个 input属性
driver.findElement(By.xpath("//input[3]"));

下面是相对路径的引用写法：

查找页面根元素：//

查找页面上所有的input元素：//input

查找页面上第一个form元素内的直接子input元素(即只包括form元素的下一级input元素，使用绝对路径表示，单/号)：//form[1]/input

查找页面上第一个form元素内的所有子input元素(只要在form元素内的input都算，不管还嵌套了多少个其他标签，使用相对路径表示，双//号)：//form[1]//input

查找页面上第一个form元素：//form[1]

查找页面上id为loginForm的form元素：//form[@id='loginForm']

查找页面上具有name属性为username的input元素：//input[@name='username']

查找页面上id为loginForm的form元素下的第一个input元素：//form[@id='loginForm']/input[1]

查找页面具有name属性为contiune并且type属性为button的input元素：//input[@name='continue'][@type='button']

查找页面上id为loginForm的form元素下第4个input元素：//form[@id='loginForm']/input[4]

8、By.cssSelector()

下面是一些常见的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”]。

# 源码：
<html>
    <body>
        <form id="loginForm">
            <input name="username" type="text"/>
            <input name="password" type="password"/>
            <input name="continue" type="submit" value="Login"/>    
            <input name="continue" type="button" value="Clear"/>
        </form>
    </body>
</html>

#  示例：找到第三个 input属性
driver.findElement(By.cssSelector(" input[type=submit] "));