自动化测试：Selenium八大元素定位基本介绍

本章节主要内容

selenium6个简单元素定位方式

selenium2个综合元素定位方式

selenium定位方法的使用

8大元素定位方式
Selenium对网页的控制是基于各种前端元素的，在自动化过程中，对于元素的定位是基础，只有匹配到对应元素才能进行后续的自动化控制。

selenium6个简单元素定位方式
· 根据ID定位：
根据id进行元素定位。

元素定义：

元素定位：

ele1 = driver.find_element_by_id(“kw”); #查找id为kw的元素
左右拉动查看完整代码

· 根据name定位
根据name定位

根据name进行元素定位。

元素定义：

左右拉动查看完整代码

元素定位：

driver.find_element_by_name(“wd”) #查找name属性值为wd的元素
左右拉动查看完整代码

· 根据Link Text定位
通过超链接字符串定位元素

元素定义：

新闻
左右拉动查看完整代码

元素定位：

driver.find_element_by_link_text(“新闻”); #查找超链接文字为’新闻’的元素
左右拉动查看完整代码

· 根据Partial Link Text定
通过超链接字符串定位元素

元素定义：

新闻
左右拉动查看完整代码

元素定位：

driver.find_element_by_partial_link_text(“新”); #查找超链接文字包含’新’的元素
左右拉动查看完整代码

· 根据Tag Name定位
根据tagName进行元素定位，定位到的元素可能是多个。

元素定义：

<a href=“http:#news.baidu.com” class="mnav"新闻
左右拉动查看完整代码

元素定位：

driver.find_element_by_tag_name(“a”); #查找超链接元素
左右拉动查看完整代码

· 根据Class Name定位
通过元素属性class定位元素。

元素定义：

左右拉动查看完整代码

元素定位：

driver.find_element_by_class_name(“s_ipt”); #查找class值为’s_ipt’的元素
左右拉动查看完整代码

*若class的值中有空格，需要借助xpath或cssSelector处理。

selenium2个综合元素定位方式
· 根据Xpath表达式定位
• XPath 是一门在 XML 文档中查找信息的语言

• XPath 使用路径表达式来选取 XML 文档中的节点或者节点集

▲ 示例：

driver.find_element_by_xpath(".#input[@class=‘s_ipt’]");
左右拉动查看完整代码

· 浏览器中的开发者工具
F12—打开或关闭浏览器自带开发者工具

针对UI界面查找元素，可获取对应前端代码或者进一步xpath，cssSelector值

· 根据Xpath表达式定位

 绝对路径，从根节点开始，以/html开头：

xpathstr = “/html/body/div[1]/div[1]/div/div[1]/div/form/span[1]/input”;
driver.find_element_by_xpath(xpathstr)
左右拉动查看完整代码

▲ 特点：路径唯一，但是通常比较深，容易受页面改动影响

 相对路径，以#*开头，从任意位置开始：

xpathstr="#input[@id=‘kw’]"
driver.find_element_by_xpath(xpathstr);
左右拉动查看完整代码

▲ 特点：书写形式灵活多样，推荐使用

根据标签类型定位：

xpathStr="#input" #input类型的所有元素
左右拉动查看完整代码

根据元素顺序定位：

xpathStr="#input[2]" #所有层级中的第二个input元素
xpathStr="#div[last()-1]" #查找页面上各个层级中倒数第二个div元素
左右拉动查看完整代码

根据元素属性定位：

xpathStr="#input[@value]" #input类型的标签，并且有value属性的元素
xpathStr="#input[@value=‘查询’]" #input类型value值为’查询’的元素
左右拉动查看完整代码

使用运算符：

xpathStr="#input[@value=‘查询’ and @id=‘xx’]" #input类型value属性值为’
左右拉动查看完整代码

查询’并且id属性为xx的元素

xpathStr="#input[@maxlength<256]" #maxlength值小于256的input元素
左右拉动查看完整代码

层级与属性结合定位：

xpathStr="#form/input" #form元素下的input子元素
xpathStr="#div[@class]/a[3]" #div的第三个a标签元素，div具有class属性
左右拉动查看完整代码

使用通配符:

xpathStr="#tools/" # 选出所有的tools所有的子元素
xpathStr="#[@*=“s_tab”]" #任意类型，任意属性值为’s_tab’的元素
左右拉动查看完整代码

模糊匹配模式：

xpathStr="#a[contains(@href, ‘logout’)]" #使用contains函数进行部分匹配：
xpathStr="#a[contains(text(),‘退出’)]" #超链接文本内容包括’退出’字符：
左右拉动查看完整代码

· 根据CSS Selector选择器定位
CSS: Cascading Style Sheets层叠样式表，用来为HTML标签添加样式。

CSS Selector：css选择器可以帮助我们选中需要添加样式的标签。是css中进行元素查找的方式。

选择器类型：

• 标签选择器

• 类选择器

• ID选择器

• 属性选择器

• 子元素选择器

• 后代选择器

• 兄弟选择器

• 交集选择器

• 并集选择器

• 序列选择器

多个属性合并查找

cssStr=“input#username”);查找input类型且id为username的元素
cssStr=".passwd-clss.name1";#查找class属性为passwd-class name1的元素
左右拉动查看完整代码

根据序号查找：

cssStr=“form :first-child” #定位到form下所有级别的第一个子元素
cssStr=“form>:last-child” #定位到form的最后一个子元素
cssStr=“form :nth-child(2)” #定位到form的第二个子元素
cssStr=“form input:first-child”) #定位到form下所有级别的第一个并且为input的元素
左右拉动查看完整代码

模糊匹配

cssStr=“input[id ^= ‘ctrl’]” #匹配id以ctrl开头的input类型元素
cssStr=“input[id $= ‘ctrl’]” #匹配id以ctrl结尾的input类型元素
cssStr=“input[id *= ‘ctrl’]” #匹配id包含ctrl的input类型元素
cssStr=“input:not([type=‘radio’])” #/匹配input节点中type不为radio的所有节点
左右拉动查看完整代码

selenium定位方法的使用
· 定位方式选择
• 当页面元素有id属性时，尽量用id来定位;

• 当有链接需要定位时，可以考虑linkText或partialLinkText方式;

• 当要定位一组元素相同元素时，可以考虑用tagName或className;

• xpath很强悍，但采用遍历页面的方式性能不是很好，

• cssSelector定位速度比较快,效率高。

• 考虑稳定性。

• 一般ID>Name>CSS>XPath

· find_element_xx与find_elements_xx

两者都是元素定位方法，使用时区别如下：

find_element_by_xx：

如果没有匹配到元素则执行报错;
如果匹配到一个元素返回元素;
如果匹配到多个元素返回第一个元素;

find_elements_by_xx：

如果没有匹配到元素则返回空列表;
如果匹配到一个元素返回包含一个元素的列表;
如果匹配到多个元素返回所有匹配元素列表;

· driver.find_xx与webElement.find_xx
除了使用driver对象提供的方法进行元素定位，也可以通过Web Element对象提供的方法进行元素定位：

通过driver对象调用：

driver.find_element_by_id(id_)
左右拉动查看完整代码

通过webElement对象调用：

ele = driver.find_element_by_id(id_)
ele.find_element_by_id(,id_)
左右拉动查看完整代码

两者元素查找范围不同：

driver的方法是在当前DOM树中进行元素查找。
webElement的方法是在当前元素范围内进行查找。

下个工作日小编会更新下一章节的内容，希望大家多多关注我们，一起来学习喔！涨薪小技能√

敲字不易，如果此文章对你有帮助的话，点个赞收个藏来个关注，给作者一个鼓励。也方便你下次能够快速查找。