Selenium-webdriver+八种元素定位

进行Web页面自动化测试，对页面上的元素进行定位和操作是核心。而操作又是以定位为前提的，因此，对页面元素的定位是进行自动化测试的基础。

页面上的元素就像人一样，有各种属性，比如元素名字，元素id，元素属性（class属性，name属性）等等。webdriver就是利用元素的这些属性来进行定位的。（本文以百度首页为例）

怎么查看元素的name，id，class，tag，text，xpath，css选择器呢？可以借助firefox浏览器的firebug插件（需要手动安装）中firepath工具或者chrome的开发者工具（chrome自带）。

• Friebug

打开firefox 浏览器的firebug 插件，点击插件左上角的鼠标箭头，再点击页面上的元素，firebug插件的HTML 标签页将看到页面代码，鼠标移动到元素的标签上点击一下。

• Chrome开发者工具（F12）

打开Chrome浏览器，按下键盘的F12，即可以打开开发者工具。从开发者工具中可以得到和FirePath相同的结果：

这样可以成功的查看元素的属性。

图中显示输入框的属性为：<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">

selenium的webdriver提供了八种基本的元素定位方法，前面六种是通过元素的属性来直接定位的，后面的xpath和css定位更加灵活，需要重点掌握其中一个。

 

1.通过id定位：find_element_by_id()

  从上面的元素属性中，可以看到有个id属性：id="kw"，所以可以通过它的id属性单位到这个元素。定位到搜索框后，可以用send_keys()方法输入内容到搜索框。

  eg：driver.find_element_by_id("kw").send_keys("by_id")

 

2.通过name定位：find_element_by_name()

  同理：name属性：name="wd"，通过它的name属性单位到这个元素。

  说明：这里运行后会报错，说明这个搜索框的name属性不是唯一的，无法通过name属性直接定位到输入框

   eg：driver.find_element_by_name("wd").send_keys("by_name")

 

3.通过class定位：find_element_by_class_name()

  同理：class属性：class="s_ipt"，通过它的class属性单位到这个元素。

  eg：driver.find_element_by_class_name("s_ipt").send_keys("by_class_name")

 

4.通过tag定位：find_element_by_tag_name()

  从元素属性中，可以看到每个元素都有tag（标签）属性，就是最前面的input

  在一个页面中，相同的标签有很多，所以一般不用标签来定位。以下例子，仅供参考和理解，运行肯定报错

  eg：driver.find_element_by_tag_name("input").send_keys("by_tag_name")

 

通过上图可以获取超链接hao123的属性：<a href="https://www.hao123.com" name="tj_trhao123" class="mnav">hao123</a>

5.通过link定位：find_element_by_link_text()

 对于超链接的元素我们通过超链接上的文字信息来定位元素。并用方法click（）点击进入链接。

 eg：driver.find_element_by_link_text("hao123").click()

 

6.通过partial_link定位：find_element_by_partial_link_text()

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

  eg：driver.find_element_by_partial_link_text("ao123").click()

 

7.通过xpath定位：find_element_by_xpath()

  这个方法是非常强大的元素查找方式，使用这种方法几乎可以定位到页面上的任意元素。

 在正式开始使用XPath进行定位前，我们先了解下什么是XPath。XPath是XML Path的简称，由于HTML文档本身就是一个标准的XML页面，所以我们可以使用XPath的语法来定位页面元素。 

 我们以图中HTML代码为例，要引用对应的对象，XPath语法如下：

　　

　　绝对路径写法(只有一种)，写法如下：

　　引用页面上的form元素(即源码中的第3行)：/html/body/form[1]

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

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

                  3. 绝对路径以单/号表示，而下面要讲的相对路径则以//表示，这个区别非常重要。

                  ps：当xpath的路径以/开头时，表示让Xpath解析引擎从文档的根节点开始解析。当xpath路径以//开头时，则表示让xpath引擎从文档的任意符合的元素节点开始进行解析。而当/出现在xpath路径中时，则表示寻找父节点的直接子节点，当//出现在           xpath路径中时，表示寻找父节点下任意符合条件的子节点，不管嵌套了多少层级（这些下面都有例子，大家可以参照来试验）。弄清这个原则，就可以理解其实xpath的路径可以绝对路径和相对路径混合在一起来进行表示。

　　相对路径的引用写法：

　　查找页面根元素：//

　　查找页面上所有的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]

---

     Xpath功能很强大，所以也可以写得更加复杂一些。

　　前面讲的都是xpath中基于准确元素属性的定位，其实xpath作为定位神器也可以用于模糊匹配。比如下面图所示代码：

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

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

　　driver.find_element_by_xpath("//a[contains(@href,'news')]").click()

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

 

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

　   driver.find_element_by_xpath("//a[starts-with(@name,'tj_trn')]").click()

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

 

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

　　driver.find_element_by_xpath("//*[text()='新闻']").click()

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

　   ps：关于xpath这种定位方式，webdriver会将整个页面的所有元素进行扫描以定位我们所需要的元素，所以这是一个非常费时的操作，如果你的脚本中大量使用xpath做元素定位的话，将导致你的脚本执行速度大大降低，所以请慎用。

 

8.通过css定位：find_element_by_css_selector()

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

　　此外，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']

# 第一步导入需要的模块
from selenium import webdriver
import time

# 第二步打开浏览器
driver = webdriver.Chrome()

# 第三步打开百度
driver.get("http://www.baidu.com")

# 1. 操作浏览器对象-id
driver.find_element_by_id("kw").send_keys("by_id")
time.sleep(1)
# 清空文本框
driver.find_element_by_id("kw").clear()

# 2. 操作浏览器对象-name
driver.find_element_by_name("wd").send_keys("by_name")
time.sleep(1)
driver.find_element_by_id("kw").clear()

# 3. 操作浏览器对象-class_name
driver.find_element_by_class_name("s_ipt").send_keys("by_class_name")
time.sleep(1)
driver.find_element_by_id("kw").clear()
driver.refresh()
# 4. 操作浏览器对象-tag_name, tag同名的很多，运行肯定报错，所以注释掉不运行。
#driver.find_element_by_tag_name("input").send_keys("by_tag_name")

# 5. 操作浏览器对象-link_text
driver.find_element_by_link_text("hao123").click()
time.sleep(1)
# 回退到上一个页面
driver.back()
time.sleep(1)

# 6. 操作浏览器对象-partial_link_text
driver.find_element_by_partial_link_text("ao123").click()
time.sleep(1)
driver.back()
time.sleep(1)

# 7. 操作浏览器对象-xpath
driver.find_element_by_xpath(".//*[@id='kw']").send_keys("by_xpath")
time.sleep(1)
driver.find_element_by_id("kw").clear()

# 8. 操作浏览器对象-xpath
driver.find_element_by_css_selector("#kw").send_keys("by_css_selector")
time.sleep(1)


# 退出, close用于关闭当前窗口，quit用于结束进程，关闭所有窗口，当测试结束时，要用quit
driver.close()
driver.quit()