自动化测试第三弹：WebDriver API之常见元素定位方法

Posted 2021-05-11 软件测试藏经阁

WebDriver针对各个浏览器而开发，取代了嵌入到被测Web应用中的javascript，与浏览器紧密集成，因此支持创建更高级的测试，避免了JavaScript安全模型导致的限制。除了来自浏览器厂商的支持之外，WebDriver还利用操作系统级的调用，模拟用户输入，因此, 它的稳定性非常高。

做自动化测试脚本的时候，我们通常会有如下的步骤：

• 通过某些方式定位到我们要执行的对象、目标（Target）

• 对这个对象进行什么操作（command）

• 通过操作对定位到的元素赋值（value)

• 添加断言操作

首先要解决的是元素定位问题，这个内容分开来讲就是何为页面元素？如何定位？

一、什么是页面元素？

在浏览上能显示所有的要素，如图片、文本框、按钮、下拉列表、视频等..

二、如何定位页面元素？

selenium webdriver中提供了8种页面元素定位方式，如下：

1、id属性定位->find_element_by_id("id属性值")

• 最常用的一种元素定位方式，一般情况下ID属性不会重复，但不排除特殊情况。

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#通过ID来定位文本框和百度一下
driver.find_element_by_id("kw").send_keys("selenium")
time.sleep(2)
driver.find_element_by_id("su").click()
time.sleep(2)

#退出浏览器对象
driver.quit()

2、name属性定位->find_element_by_name("name属性值")

• name属性可能会出现重复，建议开发要保证ID或者那么有一个不能重复。

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#通过name属性定位元素
driver.find_element_by_name("wd").send_keys("selenium")
time.sleep(2)
driver.find_element_by_id("su").click()
time.sleep(2)
#退出浏览器对象
driver.quit()

3、class 属性定位->find_element_by_class_name("class属性值")

• 对某些具有相同类的元素一网打尽的好方法

4、tag name:->find_element_by_tag_name("标签名")

• 重复率高，定位效率低，基本不用

5、link text:->find_element_by_link_text("链接的显示文本")

• 超链接的显示文本信息，较为常用，参数是全部文本信息。

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#使用link text属性定位（元素显示的文本信息，要求是全部信息）
driver.find_element_by_link_text("新闻").click()

#等待3s
time.sleep(3)

#退出浏览器对象
driver.quit()

6、partial link text：->find_element_by_partial_link_text("部分链接的显示文本")

• 超链接的显示文本信息，较为常用，参数是部分文本信息即可

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#使用link text属性定位（元素显示的文本信息，要求是全部信息）
driver.find_element_by_link_text("新闻").click()
time.sleep(5)
#使用partial link text属性定位（元素显示的文本信息,可以是部分信息）
driver.find_element_by_partial_link_text("全国首家在线“报销”互联网慢病诊室开通").click()
#等待3s
time.sleep(3)

#退出浏览器对象
driver.quit()

7、xpath:->find_element_by_xpath("xpath")

Xpath不是selenium专用，只是作为一种定位手段，为selenium所用。Xpath是一门在xml文档中查找信息的语言。Xpath可用来在xml文档中对元素和属性进行遍历。由于html的层次结构与xml的层次结构天然一致，所以使用Xpath也能够进行html元素的定位。

7.1、 绝对路径

以/开头，从HTML标签开始，依次遍历HTML结构数的节点，直到找到要定位的页面元素，如百度首页的百度文本框的绝对路径，一般万不得已不使用。为：/html/body/div/div/div[3]/div/div/form/span/input

• 父子节点是使用/连接，从上往下依次遍历

• 兄弟节点是[]表示兄弟的排行，比如同一级别上有2个以上的input标签，input[2]就是排在第二位的，排行老大可以写为：input或者是input[1]

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time
#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#使用绝对路径定位
# driver.find_element_by_xpath("/html/body/div/div/div[3]/div/div/form/span/input").send_keys("selenium")
# time.sleep(2)
# driver.find_element_by_xpath("/html/body/div/div/div[3]/div/div/form/span[2]/input").click()
# time.sleep(2)
driver.quit()

7.2、通过属性定位（相对路径）

一般以//开头，使用属性id、name、class结合xpath进行定位，如百度文本框的定位：

• //input[@id='kw']

• //input[@name='wd']

• //input[@class='bg s_btn']

在一个属性不能定位到元素的时候，可以逻辑运算符的使用：

• 元素a ：id = 1，name = a

• 元素b : id = 1 , name = b

• 元素c ：id = 2 ，name = a

• and:表示多个条件要同时成立才行

• or：多个条件，有一个成立就可以

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#利用元素属性定位
# driver.find_element_by_xpath("//input[@id='kw']").send_keys("selenium")
# time.sleep(2)
# driver.find_element_by_xpath("//input[@id='su']").click()
# time.sleep(2)

#使用逻辑运算符
driver.find_element_by_xpath("//input[@id='kw' or @name = 'wd']").send_keys("selenium")
time.sleep(2)
driver.find_element_by_xpath("//input[@id='su']").click()
time.sleep(2)

driver.quit()

7.3、通过父子关系和属性定位：

假设某个标签就一个标签名，其他属性一概没有（或者有一个class name，而且是重复的）
使用绝对路径没问题，就是复杂点
使用属性定位，就不靠谱了，定位不到

• //form[@id='form']/span/input

• //form[@id='form']/span[2]/input

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

# 利用父子关系以及属性定位：
# driver.find_element_by_xpath("//form[@id='form']/span/input").send_keys("selenium")
# time.sleep(2)
# driver.find_element_by_xpath("//form[@id='form']/span[2]/input").click()
# time.sleep(2)
driver.quit()

7.4、直接Chrome浏览器复制

• //input[@id="kw"]

• //*[@id="u1"]/a[2]

8、css:->find_element_by_css_selector("css")-（掌握）

• .表示类选择器，.s_ipt

• #表示ID选择器，#kw、#su

• >表示父子关系，form#form > span > input

• 直接通过浏览器复制：#su

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

#driver:就是一个普通的变量，dr也行
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")

#css的类选择器定位百度文本框,使用css的id选择器定位百度一下按钮
# driver.find_element_by_css_selector(".s_ipt").send_keys("selenium")
# driver.find_element_by_css_selector("#su").click()

driver.find_element_by_css_selector("form#form > span > input#kw").send_keys("selenium")
driver.find_element_by_css_selector("#su").click()
time.sleep(3)
driver.quit()

9、补充

除了上面的8种定位单个元素的方法，webdriver还能够同时获取多个页面元素的方法，只是将多个元素对象存储在一个列表中，此处我们以name属性定位为例演示。

ID：-->find_elements_by_name(name属性值)

我们以checkbox复选框为例进行演示，先复制下面的HTML文件保存到本E:\checkbox.html文件中。

<form action="" method="get">
您喜欢的水果？<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
</form>

<form action="" method="get">
您最喜欢水果？<br /><br />
<label><input name="Fruit" type="radio" value="" />苹果 </label>
<label><input name="Fruit" type="radio" value="" />桃子 </label>
<label><input name="Fruit" type="radio" value="" />香蕉 </label>
<label><input name="Fruit" type="radio" value="" />梨 </label>
<label><input name="Fruit" type="radio" value="" />其它 </label>
</form>

以chrome浏览器打开该文件，我们遍历选中其中的4种水果

实现的自动化测试代码为：

#导包、创建浏览器对象、获取一下url地址
from selenium import webdriver
import time

driver = webdriver.Chrome()
driver.get("file:///E:/checkbox.html")

#循环遍历定位的所有checkbox元素，保存在列表中
for i in driver.find_elements_by_name("Fruit"):
    i.click()
    time.sleep(3)

#退出driver对象
driver.quit()

三、注意事项

1、建议与开发协商，保证id属性的唯一性，优先使用id进行定位

2、动态id属性时，建议使用xpath的相对路径定位

3、灵活使用元素等待，避免因页面加载而导致的定位失败

4、css是配合html来工作，它实现的原理是匹配对象的原理，而xpath是配合xml工作的，它实现的原理是遍历的原理，所以两者在设计上，css性能更优秀、语言更简洁，明了

5、总之一句话，不管哪种方式，以能唯一定位到元素为准

欢迎关注作者，如果觉得写的还不错，就给个赞同、喜欢、收藏（后续持续更新）。