Selenium3 自动化测试实战 基于Python语言之WebDriver API定位

本章内容是基于《Selenium3 自动化测试实战 基于Python语言》此书的知识总结，结尾附知识点的思维导图。

WebDriver提供了8种元素定位方法，在Python中，对应的方如下：
id定位：

find_element_by_id()

name定位：

find_element_by_name()

tag定位：

find_element_by_tag_name()

class定位：

find_element_by_class_name()

link_text：

find_element_by_link_text()

partial link定位：

find_element_by_partial_link_text()

XPath定位：

find_elemant_by_xpath()

CSS_selector定位：

find_element_by_css_selector()

简单的了解完WebDriver提供了8种元素定位方法后，我们以百度输入框和百度搜索按钮为例，学习使用不同的方法来定位它们，百度输入框和百度搜索按钮的代码如下：

<input id="kw" class="s_ipt" autocomplete="off" maxlength="100" value="" name="wd">
<input id="su" class="bg s_btn" type="submit" value="百度一下" >

如果把页面上的元素看作人，那么在现实世界中如何找到某人呢？

id定位：
HTML规定，id在HTML文档中必须是唯一的，这类事与我国公民的身份证号，具有唯一性。WebDriver提供的id定位方法是通过元素的id来查找元素的。通过id定位百度输入框和百度搜索按钮的用法如下：

find_element_by_id("kw")
find_element_by_id("su")

find_element_by_id()方法是通过id定位元素的。

name定位：
HTML规定，name用来指定元素的名称，因此它的作用更像是人的姓名。通过name定位百度输入框的用法如下：

find_element_by_name("wd")

find_elemane_by_name()方法是通过name来定位元素的。

class定位：
HTML规定，class用来指定元素的类名，其用法与id、name类似。通class定位百度输入框的用法如下：

find_element_by_class_name("s_ipt")

find_element_by_class_name()方法是通过class来定位元素的。

tag定位：
HTML通过tag来定义不同页面的元素。例如，input一般用来定义输入框，a标签用来定义超链接等。不过，因为一个标签往往用来定义一类功能，所以通过标签识别单个元素的概率很低。例如，我们打开任意一个页面，查看前端代码时都会发现大量的div、input、a等标签。
通过标签名（tag name）定位百度输入框的用法如下：

find_element_by_tag_name("input")

find_element_by_tag_name()方法是通过元素的标签名来定位元素的。

link定位：
link定位与前面介绍的几种定位方法有所不同，它专门用来定位文本连接。百度输入框上面的几个文字链接的代码如下。

<a class="mnav" name="tj_trnews" href="http://news.baidu.com">新闻</a>
<a class="mnav" name="tj_trhao123" href="http://www.hao123.com">hao123</a>
<a class="mnav" name="tj_trmap" href="http://map.baidu.com">地图</a>
<a class="mnav" name="tj_trvideo" href="http://v.baidu.com">视频</a>
<a class="mnav" name="tj_trtieba" href="http://tieba.baidu.com">贴吧</a>

查看上面的代码可以发现，通过name定位是个不错的选择。不过这里为了演示link定位的作用，现给出通过link定位链接的用啊如下：

find_element_by_link_text("新闻")
find_element_by_link_text("hao123")
find_element_by_link_text("地图")
find_element_by_link_text("视频")
find_element_by_link_text("贴吧")

find_element_by_link-text()方法是通过元素标签对之间的文字信息来定位元素的。

partial link定位：
partial link 定位是对link定位的一种补充，有些文字链接比较长，这个时候我们可以取文字链接的部分文字 进行定位，只要这些文字可以唯一地标识这个链接即可 。

<a class="mnav" name="tj_lang" href="#">一个很长的文本链接</a>

通过partial link 定位链接的用法如下：

find_element_by_partial_link_text("一个很长的")
find_element_by_partial_link_text("文本链接")

find_element_by_partial_link_text()方法是通过元素标签之间的部分文字定位元素的。

XPath定位：
在XML文档中，XPath是一种定位元素的语言。因为HTML可以看作XML的一种实现，所以WebDriver提供了这种在Web应用中定位元素的方法：
绝对路径定位：
XPath有多种定位策略，最简单直观的就是写出元素的绝对路径。如果把元素看作人，假设这个人没有任何属性特征（手机号、姓名、身份证号），但这个人一定存在于某个地理位置，如xx省xx市xx区xx路xx号。对于页面的元素而言，也会有这样一个绝对地址。
参考开发者工具所展示的代码层级结构，我们可以通过下面的方式找到百度输入框和百度搜索按钮：

find_element_by_xpath("/html/body/div/div[2]/div/div/div/foem/span/input")
find_element_by_xpath("/html/body/div/div[2]/div/div/div/from/span[2]/input")

find_element_by_xpath()方法是用XPath来定位元素的。这里主要用标签名的层级关系来定位元素的绝对路径，最外层为html，在body文本内，一级一级往下查找。如果一个层级下有多个相同的标签名，那么就按上下顺序确定是第几个。例如，div[2]表示当前层级下第二个div标签。

利用元素属性定位：
除使用绝对路径，XPath还可以使用元素的属性值来定位：

find_element_by_xpath("//input[@id="kw"]")
find_element_by_xpath("//input[@id="su"]")

//input表示当前页面某个input标签，[@id=“kw”]表示这个元素的id值是kw。下面通过name和class来定位。

find_element_by_xpath("//*[@name="wd"]")
find_element_by-xpath("//*[@class="s_ipt"]")

如果不想指定标签名，那么可以用星号（*）代替。当然，使用XPath不局限于id、name和class这三个属性值，元素的任意属性都可以使用，只要它能唯一标识一个元素。

find_element_by_xpath("//input[@maxlength="100"]")
find_element_by_xpath("//input[@autocomplete="off"]")
find_element_by_xpath("//input[@type="submit"]")

层级与属性结合：
如果一个元素本身没有可以唯一标识这个元素的属性值，那么我们可以查找其上一级元素。如果它的上一级有可以唯一标识属性的值，就可以拿来使用。参考baidu.html文本：

...
<form id="form" class="fm" action="/s" name="f">
    <span class="s_ipt_wr">
        <input id="kw" class="s_ipt" autocomplete="off" maxlength="100" name="wd">
    </span>
    <span class="s_btn_wr">
        <input id="su" class="bg s_btn" type="submit" value="百度一下">
    </span>
...

假如百度输入框没有可利用的属性值，那么可以查找它的上一级属性。例如，小明刚出生的时候没有名字，也没有身份证号，那么亲朋好友来找小明时可以先找到小明的爸爸 ，因为他爸爸是有很多属性特征的。找到小明的爸爸后，就可以找到小明了，通过XPath描述如下：

find_element_by_xpath("//span[@class="bg s_ipt_wr"]/input")

span[@class=“s_ipt_wr”]通过class定位到父元素，后面的/input标识父元素下面的子元素。如果父元素没有可利用的属性值，那么可以继续向上面查找父元素的父元素。

find_element_by_xpath("//form[@id="form"]/span/input")
find_element_by_xpath("//form[@id="form"]/span[2]/input")

我们可以通过这种方法一级一级向上查找，直到找到最外层的标签，那就是一个绝对路径的写法了。

使用逻辑运算符：
如果一个属性不能唯一区分一个元素，那么我们可以使用逻辑运算符连接多个属性来查找元素。

find_element_by_xpath("//input[@id="kw" and @class="s_ipt"]")

and表示必须满足两个条件来定位元素

使用contains方法：
contains方法用于匹配一个属性中包含的字符串。例如，span标签的class属性为“bgs_ipt_wr”

find_element_by_xpath("//span[contains(@class,"s_ipt_wr")]/input")

contains方法只取了class属性中的“s_ipt_wr”部分

使用text()方法：
text()方法用于匹配显示文本信息。例如，前面通过link text定位的文字链接：

find_element_by_xpath("//a[text(),"新闻"]")

当然，contains和text()也可以配合使用。

find_element_by_xpath("//a[contains(text(),"一个很长的")]")

它实现了partial link定位的效果。

CSS定位：
CSS是一种语言，用来描述HTML和XML文档的表现。CSS使用浏览器为页面元素绑定属性。
CSS选择器可以较为灵活地选择控件的任意属性，一般情况下，CSS定位速度比XPath定位速度快，但对于初学者来说，学习起来稍微有点难度，下面介绍CSS选择器的语法与使用。
CSS选择器的常见语法如下：

下面同样以百度输入框和百度搜索按钮为例，介绍CSS定位的用法：

...
    <span class="s_ipt_wr">
        <input id="kw" class="s_ipt" autocomplete="off" maxlength="100" name="wd">
    </span>
    <span class="s_btn_wr">
        <input id="su" class="bg s_btn" type="submit" value="百度一下">
    </span>
...

通过class定位：

find_element_by_css_selector(".s_ipt")
find_element_by_css_selector(".s_btn")

find_element_by_css_selector()方法用于在CSS中定位元素，点号(.)表示通过class来定位元素
通过id定位：

find_element_by_css_selector("#kw")
find_element_by_css_selector("#su")

井号（#）表示通过id来定位元素
通过标签名定位：

find_element_by_css_selector("input")

在CSS中，用标签名定位元素时不需要任何符号标识，直接实验标签名即可。
通过标签层级关系定位：

find_element_by_css_selector("span > input")

这写法表示有父元素，父元素的标签名为span。查找span中所有标签名为input的子元素。
通过属性定位：

find_element_by_css_selector("[autocomplete=off]")
find_element_by_css_selector("[name="kw"]")
find_element_by_css_selector("[type="submit"]")
find_element_by_css_selector('[type="submit"]')

在CSS中可以使用元素的任何以属性定位，只要这些属性可以唯一标识这个元素，对属性值来说，可以加引号，也可以不加，注意和整个字符串的引号进行区分。
组合定位：
我们可以把上面的定位策略组合起来使用，这就大大加强了定位元素的唯一性。

find_element_by_css_selector("form.fm > span > input.s_ipt")
find_element_by_css_selector("form#form > span > input#kw")

我们要定位的这个元素标签名为input，这个元素的class属性为s_ipt；并且它有一个父元素，标签名为span。它的父元素还是父元素，标签名为form,class属性为fm。我们要找的就是必须满足这些条件的一个元素。
更多定位用法：
查找class属性包含"s_ipt_wr"字符串的元素

find_element_by_css_selector("[class*=s_ipt_wr]")

查找class属性以"bg"字符串开头的元素

find_element_by_css_selector("[class^=bg]")

查找class属性以"wrap"字符串结尾的元素

find_element_by_css_selector("[class$=wrap]")

查找form标签下面第2个input标签的元素

find_element_by_css_selector("form > input:nth-child(2)")

用By定位元素：
针对前面介绍的8种定位方法，WebDriver还提供了另外一套写法，即统一调用find_element()方法，通过By来声明定位，并且传入对应定位方法的定位参数，具体如下。

find_element(By.ID,"kw")
find_element(By.NAME,"wd")
find_element(By.CLASS_NAME,"s_ipt")
find_element(By.TAG_NAME,"input")
find_element(By.LINK_TEXT,"新闻")
find_element(By.PARTIAL_LINK_TEXT,"新")
find_element(By.XPATH,"//*[@class='bg s_btn']")
find_element(By.CSS_SELECTOR,"span.bg s_btn_wr>input#su")

find_element()方法只用于定位元素，它需要两个参数。第一个参数是定位的类型，由By提供；第二个参数是定位的值，在使用By之前需要先导入。

from selenium.webdriver.common.by import By

WebDriver API定位到此就结束啦！