本文详细介绍了UI自动化测试中常见的八大元素定位方式，包括ID、Name、Class、Tag、Link、Partial Link、XPath和CSS定位。强调XPath和CSS定位的灵活性和重要性，并举例说明了各种定位方法的使用场景和语法。同时，提到了元素定位在前端配合下的优势。
常见的UI自动化八大元素定位
HTML结构
标签
<html></html>
<body></body>
<div></div>
<form></form>
这里的html；body；div；form就是标签名
属性
<div id="head" class="s_down">
<from class="well">
<input id="kw" name="wd" class="s_ipt">
这里的id class name等就是属性
标签对之间可以有文本数据
<a>新闻</a>
<a>地图</a>
这里标签对之间的新闻，地图就是文本数据
标签的层级关系
<html>
<body>
</body>
</html>
这里的body就是html的子标签，相对的html就是body的父标签
元素定位是什么
如果把网页上的元素看作人，那么我们可以通过这个人的姓名，手机号，身份证等找到他；WEB页面上的元素也有本身的属性，例如上面说到的id,name,class等。
其次还可以通过人的位置，比如X国X省X市…门牌地址找到他，在WEB页面上就是标签的层级关系
最后还可以借助相关人的属性找到他，比如找小明的爸爸的手机号，通过他爸的手机号找到小明；这种方法在Xpath和CSS中能体现
八大元素定位
id定位
find_element_by_id("kw")
kw就是属性为id的元素；find_element_by_id()这个方法就是通过id定位元素的
name定位
find_element_by_name("wd")
wd就是属性为name的元素；find_element_by_name()这个方法就是通过name定位元素的
class定位
find_element_by_class_name("s_ipt")
s_ipt就是属性为class的元素；find_element_by_class_name()这个方法就是通过class定位元素的
tag定位（个人极其少用）
find_element_by_tag_name("input")
这里的input是标签的名字，因为相同的标签名有很多，所以使用tag定位的时候一定要在后面加上下标（例如：find_element_by_tag_name(“input”)[1]）
link定位
find_element_by_link_text("新闻")
link定位与前面介绍的方法有所不同，它只能定位文本链接（注意是链接）；在web的链接一般属性有href，标签名为<\a>；例子中的“新闻”则是标签对之间的文本
partial link定位
find_element_by_partial_link_text("很长的")
partial_link定位是link的一种补充，可以利用文字链接的一部分文字进行定位；这里的"很长的"是整段文字的一部分内容
Xpath定位（重点）
Xpath有很多种定位方法，比较灵活，实际经常使用；使用方法：find_element_by_xpath()；以下对常用的方法介绍一下
1.绝对路径定位（一般不使用）
find_element_by_xpath("/html/body/div/div/div/from/span/input")
这里"/html/body/div/div/div/from/span/input"是元素标签的层级关系，利用绝对路径去定位
2.利用元素属性定位（常用）
find_element_by_xpath("//input[@id='kw']")
//input表示当前页面下某个input的标签，[@id=‘kw’]表示这个元素的id值为kw
如果不想指定标签名也可以把input换成*，表示页面下任意一个标签；xpath可以对任意的属性使用
3.层级与属性结合
find_element_by_xpath("//span[@class='bg s_ipt_wr']/input")
这里定位的是span标签中class属性值为bg s_ipt_wr的子标签为input的元素
4.使用逻辑运算符
find_element_by_xpath("//input[@id='kw' and @class='s_ipt']")
使用and表示满足两个属性值来定位元素，注意写法为在同一个[]中，每个属性前面都要有@
5.使用contains
find_element_by_xpath("//span[contains(@class,'s_ipt_wr')]")
定位的是class属性值包含’s_ipt_wr’的元素
6.使用text()方法（常用的定位文字的方法）
find_element_by_xpath("//a[text(),'新闻']")
注意写法text(),‘中文’；定位的是匹配文字
也可以配合contains使用
find_element_by_xpath("//a[contains(text(),'新闻')]")
这样就定位了text包含新闻的文字
CSS定位（重点）
CSS是一种语言，用来描述HTML和XML文档的表现。一般情况下，CSS的定位速度比Xpath定位速度快。使用方法为find_element_by_css_selector()；以下介绍一下几种常用的定位方法
1.通过class定位
find_element_by_css_selector(".s_ipt")
在CSS中，点号表示通过class来定位元素
2.通过id定位
find_element_by_css_selector("#ku")
在CSS中，#号表示通过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("[name='kw']")
在CSS中，可以使用元素的任意属性定位，注意写法，必须使用中括号把属性括起来
6.组合定位
find_element_by_css_selector("form.fm > span > input,s_ipt")
这里读作标签form属性class的值为fm中子标签为span中子标签为input并属性class的值为s_ipt的元素
7.更多定位方法
find_element_by_css_selector("[class*=s_ipt]")
这里定位的是class属性包含s_ipt字符串的元素
find_element_by_css_selector("[class^=bg]")
这里定位的是class属性以bg字符串开头的元素
find_element_by_css_selector("[class$=wrap]")
这里定位的是class属性以wrap字符串结尾的元素
总结
八大元素定位最常用的就是xpath和css定位，因为这两种最灵活，可以定位到各种元素；语法有很多，这里只列出了常用的，更多的使用方法请自行查找。还有webdriver提供了另一套元素定位的写法（By）这里不细说了。最后建议各位进行自动化测试试，尽量让前端也参与配合，这样元素定位会更方便
扫一扫
353
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
