WebDriver定位元素的方法

本文主要是讲解在web页面中如何定位元素，这是进行自动化操作的前提。

前言

我们主要是要做web自动化，通常一个web页面上有输入框、按钮、文字链接、图片等元素，自动化测试要做的就是模拟鼠标和键盘来操作这些元素，如单击、输入、鼠标悬停等。操作这些元素的前提是要定位它们，就是找到它们的位置，所以下面可以利用WebDriver采用几种不同的方式去进行元素定位。

元素定位方法以及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_element_by_xpath()
CSS_selector定位 find_element_by_css_selector()

各定位方法具体介绍

id定位

(HTML规定，id在HTML文档中必须是唯一的）
首先打开百度的页面

接着按F12,在elements页签可以看到html代码

现在以百度输入框这个页面元素为例子，要想定位到2这个输入框的位置，要先点1，然后进入到定位模式，这个时候点2，就会在3那里发现输入框2的定位信息，我们可以看到id = “kw”,所以相应的定位方法是find_element_by_id(“kw”)，即我们可以通过这个方法找到这个输入框，那么接下来就可以在框里输入一些文字等信息了

同样的方法，我们也可以定位到“百度一下”这个元素，先点1，再点“百度一下”，它的定位信息也会出来，我们可以看到id = “su”,所以相应的定位方法是find_element_by_id(“su”)，即我们可以通过这个方法找到这个框，那么接下来就可以进行通过点击这个“百度一下”去进行搜索了

name定位

HTML规定，name用来指定元素的名称，因此它的作用更像是人的姓名
还是以百度的输入框为例，从上面的图中可以看到，name = “wd”,所以相应的方法是：find_element_by_name(“wd”)

class定位

HTML规定，class用来指定元素的类名
还是以百度的输入框为例，从上面的图中可以看到，class = “s_ipt”,所以相应的方法是：find_element_by_class_name(“s_ipt”)

tag定位

HTML通过tag来定义不同页面的元素，比如，标签一般用来定义输入框，标签用来定义超链接等，但是，因为一个标签往往用来定义一类功能，所以通过标签识别单个元素的概率很低，基本上不会用这个方式去进行元素定位
还是以百度的输入框为例，从上面的图中可以看到，tag = “input”,所以相应的方法是：find_element_by_tag_name(“input”)

link定位

它是专门用来定位文本链接的，就是页面上有文本链接（元素标签对之间的文字信息），可以用link来进行定位

从上面的图中可以看到，link= “国家卫健委再次回应春节返乡问题”,所以相应的方法是：find_element_by_link_text(“国家卫健委再次回应春节返乡问题”)，定位后，就可以进行操作了

partial link 定位

partial link定位是对link定位的一种补充，有些文字链接比较长，这个时候我们可以取文字链接的部分文字进行定位，只要这部分文字可以唯一地标识这个链接即可
还是以上面的图为例：partial_link= “国家卫健委再次” (这里可以随意截取文字，只要能唯一匹配到整个语句就好），所以相应的方法是： find_element_by_partial_link_text(“国家卫健委再次回”)，定位后，就可以进行操作了

XPath定位

XPth定位有几种方式：绝对路径定位，元素属性定位，层级与属性定位，使用运算符，使用contains 方法，使用text()方法
1.绝对路径定位
主要是用标签名的层级关系来定位元素的绝对路径，最外层为html，在body文本内，一级一级往下查找，如果一个层级下有多个相同的标签名，那么就按上下顺序确定是第几个，例如，div[2]就表示当前层级下第二个div标签
如下图，以百度一下的输入框的定位为例，绝对路径是：’/html/body/div/div/div[5]/div/div/form/span/input’
绝对路径比较复杂，而且页面元素的位置可能会变，所以平时最好不要用绝对路径来进行定位

2.元素属性定位
从上图我们可以看到输入框那一行的代码是：<input name = "wd" class = "s_ipt" id = "kw" maxlength = "255" value = " " autocomplete = "off"> ，这里面有一些元素属性，我们可以利用这些元素属性来对输入框这个元素进行定位,有两种写法：（一种是写input，另一种是写*）
一种是:

find_element_by_xpth("//input[@id='kw']"),      find_element_by_xpth("//input[@name='wd']"),  find_element_by_xpth("//input[@class='s_ipt']"),      find_element_by_xpth("//input[@maxlength='255']"),    find_element_by_xpth("//input[@autocomplete='off']")

另外一种是：
find_element_by_xpth("//*[@id='kw']"),      find_element_by_xpth("//*[@name='wd']"),  find_element_by_xpth("//*[@class='s_ipt']"),      find_element_by_xpth("//*[@maxlength='255']"),    find_element_by_xpth("//*[@autocomplete='off']")

3.层级与属性结合定位
如果一个元素本身没有可以唯一标识这个元素的属性值，那么我们可以查找其上一级元素，如果它的上一级元素有可以唯一标识属性的值，就可以拿来使用，如下图，还是以百度输入框为例，如果这个元素没有可以利用的属性来进行定位，那我们可以找它的上一级或者上上级，直到找到可以利用的元素属性，然后写一下相对路径即可
比如可以写：find_element_by_xpath("//span[@class=‘bg s_ipt_wr’]/input")(这一个好像有一点问题）或者 find_element_by_xpath("//form[@class=‘fm’]/span/input")（这个没有问题）
4.使用运算符
如果一个属性不能唯一区分一个元素，那么可以使用逻辑运算符连接多个属性来查找元素
例如：，这个地方如果觉得一个属性不能唯一区分一个元素，那就可以用多个属性去确定
对应的方法是：find_element_by_xpath("//input[@id=‘kw’ and @class=‘s_ipt’]")

5.使用contains方法
contains 方法用于匹配一个属性中包含的字符串，比如百度输入框的span标签的class属性为：“bg s_ipt_wr”，那定位的时候用contains方法可以只取class属性值的部分
对应的方法是：find_element_by_xpath("//span[contains(@class,‘s_ipt_wr’)]/input")

6.使用text方法
text()方法用于匹配显示文本信息
如下图，对于文本信息
对应的方法是：find_element_by_xpath("//span[text()=‘医院拒诊中高风险地区患者被约谈’]")
当然，contains方法和text()方法是可以结合一起使用的
对应的方法是：find_element_by_xpath("//span[contains(text(),‘医院拒诊中’)]") (亲测有效）

CSS_selector定位

CSS是一种语言，用来描述HTML和XML文档的表现，CSS使用选择器为页面元素绑定属性，它的定位速度比XPath快，但是难度比较大
语法如下：

选择器                           例子                                           描述
.class                         .s_ipt                     class选择器，选择class = "s_ipt"的所有元素
#id                              kw                       id选择器，选择id = "kw"的所有元素*                               *                        选择所有元素
element                          p                        选择所有<p>元素
element>element               div>input                   选择父元素为<div>的所有<input>元素
element+element               div+input                   选择同一级中紧接在<div>元素之后的所有<input>元素
[attribute=value]            [target=_blank]              选择target="_blank"的所有元素

1.通过class定位
还是以百度一下的输入框为例
方法是：find_element_by_css_selector(".s_ipt")
find_element_by_css_selector()方法用于在CSS中定位元素，点号(.)表示通过class来定位元素

2.通过id定位
还是以百度一下的输入框为例
方法是：find_element_by_css_selector("#kw")
find_element_by_css_selector("#su")
#表示通过id来定位元素

3.通过标签名定位（不好用）
还是以百度一下的输入框为例
方法是：find_element_by_css_selector(“input”)
在CSS中，用标签名定位元素时，不需要任何符号标识，直接使用标签名即可，这个虽然简单，但是很难定位到元素，因为，很多标签名是一样的，单靠这个无法定位

4.通过标签层级关系定位（这个确实找到了）
还是以百度一下的输入框为例
方法是：find_element_by_css_selector(“span > input”)
这种写法表示有父元素，父元素的标签名是span，查找span中所有标签名为input的子元素

5.通过属性定位
还是以百度一下的输入框为例
方法是：find_element_by_css_selector("[autocomplete=‘off’]")
find_element_by_css_selector("[name=‘wd’]")
find_element_by_css_selector("[id=‘kw’]")
在CSS中可以用元素的任意属性进行定位，只要这些属性可以唯一标识这个元素，然后对于属性值，可以加单引号，也可以不加，上面我都加了

6.组合定位(可行）
还是以百度一下的输入框为例
方法是：find_element_by_css_selector(“form.fm > span > input.s_ipt”)
find_element_by_css_selector(“form#form > span > input#kw”)
其实这个是比标签层级定位更加详细一点，form.fm也可以不写.fm,form#form可以不写#form

7.其他的定位方法
find_element_by_css_selector("[class *= s_ipt_wr]") 查找class属性包含"s_ipt_wr"字符串的所有元素

find_element_by_css_selector("[class ^= bg]") 查找class属性以"bg"字符串开头的所有元素

find_element_by_css_selector("[class$= wrap]") 查找class属性以"wrap"字符串结尾的所有元素

find_element_by_css_selector(“form > input:nth-child(2)”) 查找form标签下第二个input标签的元素

以上在web页面中如何定位元素的各种方式和方法基本就介绍完了，感觉是比较详细了，而且我都基本亲自操作验证了一遍，如果后面有缺漏或者有新的方法，那我会再进行补充和修改。

参考书目:《Selenium 3 自动化测试实战基于Python语言》