我们在做Web自动化测试时,最根本的就是操作页面上的元素。因此我们对元素的定位是最基础的工作,只有准确的定位到对应元素,才能进行后续的自动化控制,也就时操作这些元素。
我们之前用了好几篇文章,介绍在Selenium中如何进行元素的定位:
- 基本元素定位:https://www.cnblogs.com/liuyuelinfighting/p/14925556.html
- By类定位:https://www.cnblogs.com/liuyuelinfighting/p/14952281.html
- XPath定位:https://www.cnblogs.com/liuyuelinfighting/p/14943233.html
- CSS选择器定位:https://www.cnblogs.com/liuyuelinfighting/p/14950596.html
这也同时说明了在自动化测试中,元素定位是非常重要且必须掌握的技能。那么本篇文章是对Selenium中进行元素定位的归纳总结。
1、Selenium中8种基本元素定位方式
提示:基本元素定位方式,可以结合前面文章【Selenium基本元素定位】一起看,有详细说明。
(1)单数形式
# webdriver提供的基本元素定位方法。
# 1. 通过元素的id属性进行定位。
find_element_by_id("id属性值")
# 2. 通过元素的name属性进行定位。
find_element_by_name("name属性值")
# 3. 通过元素的class属性进行定位。
find_element_by_class_name("class属性值")
# 4.通过元素标签进行定位。
find_element_by_tag_name("标签名")
# 5. 通过超链接中全部文字定位超链接。
find_element_by_link_text("完整超链接文本")
# 6. 通过超链接中部分连续文字定位超链接。
find_element_by_partial_link_text("部分超链接文本")
# 7. 通过XPath定位元素。
find_element_by_xpath("XPath路径表达式")
# 8. 通过css选择器定位元素。
find_element_by_css_selector("css选择器定位策略")
(2)复数形式
# webdriver提供的基本元素定位方法。
# 1. 通过元素的id属性进行定位。
find_elements_by_id("id属性值")
# 2. 通过元素的name属性进行定位。
find_elements_by_name("name属性值")
# 3. 通过元素的class属性进行定位。
find_elements_by_class_name("class属性值")
# 4.通过元素标签进行定位。
find_elements_by_tag_name("标签名")
# 5. 通过超链接中全部文字定位超链接。
find_elements_by_link_text("完整超链接文本")
# 6. 通过超链接中部分连续文字定位超链接。
find_elements_by_partial_link_text("部分超链接文本")
# 7. 通过XPath定位元素。
find_elements_by_xpath("XPath路径表达式")
# 8. 通过css选择器定位元素。
find_elements_by_css_selector("css选择器定位策略")
2、By类定位的8种定位方式
提示:By类定位元素,可以结合前面文章【使用Seleniun中的By类定位元素】一起看,有详细说明。
(1)单数形式
# 1. 通过元素的id属性进行定位。
# ("id"," ")
find_element(By.ID, "id属性值")
# 2. 通过元素的name属性进行定位。
# ("name", " ")
find_element(By.NAME, "name属性值")
# 3. 通过元素的class属性进行定位。
# ("class name", " ")
find_element(By.CLASS_NAME, "class属性值")
# 4.通过元素标签进行定位。
# ("tag name", " ")
find_element(By.TAG_NAME, "标签名")
# 5. 通过超链接中全部文字定位超链接。
# ("link text", " ")
find_element(By.LINK_TEXT, "完整超链接文本")
# 6. 通过超链接中部分连续文字定位超链接。
# ("partial link text", " ")
find_element(By.PARTIAL_LINK_TEXT, "部分超链接文本")
# 7. 通过XPath定位元素。
# ("xpath", " ")
find_element(By.XPATH, "XPath路径表达式")
# 8. 通过css选择器定位元素。
# ("css selector", " ")
find_element(By.CSS_SELECTOR, "css选择器定位策略")
(2)复数形式
# 1. 通过元素的id属性进行定位。
# ("id"," ")
find_elements(By.ID, "id属性值")
# 2. 通过元素的name属性进行定位。
# ("name", " ")
find_elements(By.NAME, "name属性值")
# 3. 通过元素的class属性进行定位。
# ("class name", " ")
find_elements(By.CLASS_NAME, "class属性值")
# 4.通过元素标签进行定位。
# ("tag name", " ")
find_elements(By.TAG_NAME, "标签名")
# 5. 通过超链接中全部文字定位超链接。
# ("link text", " ")
find_elements(By.LINK_TEXT, "完整超链接文本")
# 6. 通过超链接中部分连续文字定位超链接。
# ("partial link text", " ")
find_elements(By.PARTIAL_LINK_TEXT, "部分超链接文本")
# 7. 通过XPath定位元素。
# ("xpath", " ")
find_elements(By.XPATH, "XPath路径表达式")
# 8. 通过css选择器定位元素。
# ("css selector", " ")
find_elements(By.CSS_SELECTOR, "css选择器定位策略")
3、XPath定位总结
提示:
- 使用XPath定位元素,可以结合前面文章【XPath路径表达式介绍】、【Selenium中使用XPath定位元素】、【XPath轴定位详解】一起看,有详细说明。
- 关于更多的XPath定位内容,请查看XPath的文档:http://www.w3school.com.cn/xpath/index.asp。
页面代码片段:
<bookstore id=‘zc‘>
<book id=‘b1‘>
<title lang="eng">Harry Potter</title>
<price>29.99</price>
</book>
<book id=‘b2‘>
<title lang="eng">Learning XML</title>
<price>39.95</price>
</book>
</bookstore>
(1)基础定位语法
XPath 使用路径表达式在 XML 文档中选取节点。节点是通过沿着路径或者 step
(步) 来选取的。
下面列出了最常用的路径表达式:
表达式 | 描述 |
---|---|
nodename |
选取此节点的所有子节点。 |
/ |
从根节点选取。 |
// |
从匹配选择的当前节点选择文档中的节点,而不考虑它们的位置。 |
. |
选取当前节点。 |
.. |
选取当前节点的父节点。 |
@ |
选取属性。 |
示例:
路径表达式 | 说明 |
---|---|
bookstore |
选取 bookstore 元素的所有子节点。 |
/bookstore |
选取根元素 bookstore 。注释:假如路径起始于正斜杠(/ ),则此路径始终代表到某元素的绝对路径! |
bookstore/book |
选取属于 bookstore 的子元素的所有 book 元素。 |
//book |
选取所有 book 子元素,而不管它们在文档中的位置。 |
bookstore//book |
选择属于 bookstore 元素的后代的所有 book 元素,而不管它们位于 bookstore 之下的什么位置。 |
//@lang |
选取名为 lang 的所有属性。 |
(2)属性定位语法
路径表达式 | 说明 |
---|---|
//标签名[@属性值=属性名] |
语法格式说明 |
//title[@lang] |
选取所有拥有名为 ang 的属性的 title 元素。 |
//title[@lang=‘eng‘] |
选取所有 title 元素,且这些元素拥有值为 eng 的 lang 属性。 |
(3)层级定位语法
路径表达式 | 说明 |
---|---|
//父标签名[@父标签属性名=‘属性值‘]/子标签 |
最终定位的是子标签 |
//book[@id=‘b1‘]/title |
定位id 属性为b1 的book 标签下的title 标签 |
//bookstore[@id=‘zc‘]/book[@id=‘b1‘]/title |
以此类推,可以增加多层 |
(4)索引定位语法
路径表达式 | 说明 |
---|---|
//bookstore/book |
定位到bookstore 标签下所有book 子节点 |
//bookstore/book[1] |
选取属于bookstore 子元素的第一个book 元素。 |
//bookstore/book[last()] |
选取属于 bookstore 子元素的最后一个book 元素。 |
//bookstore/book[last()-1] |
选取属于bookstore 子元素的倒数第二个book 元素。 |
//bookstore/book[last()-n] |
选取属于bookstore 子元素的倒数第n个book 元素。 |
//bookstore/book[position()=2] |
定位到结果集中第n个节点。 |
//bookstore/book[position()<3] |
选取最前面的两个属于bookstore 元素的子元素的book 元素。 |
//bookstore/book[position()>3] |
定位到结果集中索引大于n的节点。 |
(6)逻辑定位语法
XPath可以支持定位条件的与(and
)、或(or
)、非(not
)。(我们绝大部分都使用and
)
路径表达式 | 说明 |
---|---|
//标签名[@属性名1=‘属性值1‘and@属性名2=属性值2] |
使用多属性定位元素 |
input[@type=‘text‘and@name=‘user‘and@class=‘login-test‘] |
and 表示多定位条件同时匹配 |
input[@name=‘user‘or@class=‘login-test‘] |
or 表示定位条件有一个匹配即可 |
//book[not(@id=‘b1‘)] |
not() 方法表示条件取反 |
//input[@type=‘submit‘ and not(contains(@name,‘fuck‘))] |
not() 方法练习 |
(6)模糊定位语法
XPath 通配符可用来选取未知的 XML 元素。
通配符 | 描述 |
---|---|
* |
匹配任何元素节点。 |
@* |
匹配任何属性节点。 |
node() |
匹配任何类型的节点。 |
示例:
在下面的表格中,我们列出了一些路径表达式,以及这些表达式的结果:
路径表达式 | 说明 |
---|---|
//bookstore/* |
选取 bookstore 元素的所有子元素。 |
/* |
匹配绝对路径最外层元素 |
//* |
选取页面中的所有元素。 |
//title[@*] |
选取所有带有属性的 title 元素。 |
//*[@*] |
匹配所有有属性的节点(属性模糊查询使用很少) |
/bookstore/node()/title |
匹配bookstore 节点所有孙子辈的title节点,代表任意节点名。 |
(7)其他定位语法
1)其他常用定位
路径表达式 | 说明 |
---|---|
//*[text()=“xxx”] |
标签之间的文本内容是xxx的元素 |
//*[contains(@attribute,’xxxxx’)] |
属性值中含有xxx的元素 |
//*[starts-with(@attribute,’xxx’)] |
属性值以xxx开头的元素 |
2)选取若干路径
通过在路径表达式中使用|
运算符,您可以选取若干个路径。
实例:
路径表达式 | 结果 |
---|---|
//book/title | //book/price |
选取book 元素的所有 title 和 price 元素。 |
//title | //price |
选取文档中的所有 title 和 price 元素。 |
/bookstore/book/title | //price |
选取属于 bookstore 元素的 book 元素的所有 title 元素,以及文档中所有的 price 元素。 |
3).
和..
路径表达式 | 说明 |
---|---|
/bookstore/book/title/./.. |
使用.定位到title 本身,再使用..定位到title的父节点book |
/bookstore/book/title/./../price |
上边过程后,再定位到price 子节点 |
4)XPath 表达式中的运算符
运算符 | 描述 | 示例 | 返回值 |
---|---|---|---|
| |
计算两个节点集 | //book | //cd |
返回所有拥有 book 和 cd 元素的节点集 |
+ |
加法 | 6 + 4 |
10 |
- |
减法 | 6 - 4 |
2 |
* |
乘法 | 6 * 4 |
24 |
div |
除法 | 8 div 4 |
2 |
= |
等于 | price=9.80 |
如果 price 是 9.80,则返回 true。如果 price 是 9.90,则返回 false。 |
!= |
不等于 | price!=9.80 |
如果 price 是 9.90,则返回 true。如果 price 是 9.80,则返回 false。 |
< |
小于 | price<9.80 |
如果 price 是 9.00,则返回 true。如果 price 是 9.90,则返回 false。 |
<= |
小于或等于 | price<=9.80 |
如果 price 是 9.00,则返回 true。如果 price 是 9.90,则返回 false。 |
> |
大于 | price>9.80 |
如果 price 是 9.90,则返回 true。如果 price 是 9.80,则返回 false。 |
>= |
大于或等于 | price>=9.80 |
如果 price 是 9.90,则返回 true。如果 price 是 9.70,则返回 false。 |
or |
或 | price=9.80 or price=9.70 |
如果 price 是 9.80,则返回 true。如果 price 是 9.50,则返回 false。 |
and |
与 | price>9.00 and price<9.90 |
如果 price 是 9.80,则返回 true。如果 price 是 8.50,则返回 false。 |
mod |
计算除法的余数 | 5 mod 2 |
1 |
用于XPath定位中的示例:
路径表达式 | 说明 |
---|---|
/bookstore/book[price>35.00] |
选取 bookstore 元素的所有 book 元素,且其中的 price 元素的值须大于 35.00。 |
/bookstore/book[price>35.00]/title |
选取 bookstore 元素中的 book 元素的所有 title 元素,且其中的 price 元素的值须大于 35.00。 |
4、CSS选择器定位总结
提示:
- CSS选择器定位元素,可以结合前面文章【使用CSS选择器定位元素】一起看,有详细说明。
- 关于更多的CSS选择器定位内容,请查看CSS选择器文档:https://www.w3school.com.cn/cssref/css_selectors.asp。
(1)属性定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
#id |
#telA |
选择id="telA" 的所有元素。 |
.class |
.telA |
选择 class="telA” 的所有元素。 |
[属性名=属性值] |
[name=telA] |
除了id 和class 属性,其他属性的定位格式 |
[attribute] |
[target] |
选择带有target 属性所有元素。 |
* |
* |
选择所有元素。 |
(2)属性值模糊匹配定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
[attribute^=value] |
a[src^="https"] |
选择其src 属性值以"https”开头的每个<a> 元素。 |
[attribute$=value] |
a[src$=".pdf"] |
选择其src属性以".pdf“结尾的所有<a> 元素。 |
[attribute*=value] |
a[src*="abc"] |
选择其src 属性中包含“abc"子串的每个<a> 元素。 |
[attribute~=value] |
a[title~=flower] |
定位标签属性title值中有独立flower词汇的节点 |
[attribute|=value] |
a[lang|=en] |
用于选取带有以指定值开头的属性值的元素。 |
注意:
[attribute|=value]
该值必须是整个单词,比如
lang="en"
,或者后面跟着连字符,比如lang="en-us"
。
(3)标签定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
element |
p |
定位所有<p> 元素。 |
标签名[属性名=属性值] |
input#telA |
定位id 属性值为telA 的所有<input> 元素 |
(4)层级关系定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
element,element |
div,p |
选择所有<div> 元素和所有 <p> 元素。 |
element element |
div p |
选择 <div> 元素内部的所有 <p> 元素。包括子孙后代。 |
element>element |
div>p |
选择父元素为 <div> 元素的所有 <p> 元素。只包括子代。 |
element+element |
div+p |
选择紧接在 <div> 元素之后的所有 <p> 元素。同辈元素。 |
示例:
CSS选择器策略 | 示例 | 说明 |
---|---|---|
需要使用 > 或 空格表示层级关系 | 此行为语法说明 | |
父标签名[父标签属性名=属性值]>子标签名 |
p#p1>input |
定位id 属性值为p1 的<input> 元素 |
父标签名[父标签属性名=属性值] 子标签名 |
p#p1 input |
同上 |
(5)索引定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
:only-child |
p:only-child |
选择属于其父元素的唯一子元素的每个 <p> 元素。 |
:nth-child(n) |
p:nth-child(2) |
选择属于其父元素的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) |
p:nth-last-child(2) |
同上,从最后一个子元素开始计数。 |
:nth-of-type(n) |
p:nth-of-type(2) |
选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
:nth-last-of-type(n) |
p:nth-last-of-type(2) |
同上,但是从最后一个子元素开始计数。 |
(6)逻辑运算定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
标签名[属性名1=属性值1][属性名2=属性值2] |
input[type=‘telA‘][placeholder=‘电话A‘] |
同时匹配多个属性,无需写and 关键字 |
(7)元素状态定位
CSS选择器策略 | 示例 | 说明 |
---|---|---|
:empty |
p:empty |
选择没有子元素的每个 <p> 元素(包括文本节点)。 |
:target |
#news:target |
选择当前活动的 #news 元素。 |
:enabled |
input:enabled |
选择每个启用的 <input> 元素。 |
:disabled |
input:disabled |
选择每个禁用的 <input> 元素 |
:checked |
input:checked |
选择每个被选中的 <input> 元素。 |
:not(selector) |
:not(p) |
选择非 <p> 元素的每个元素。 |
5、总结
-
如果元素有明确
id
,name
,class
属性时,使用对应的基本定位方法。 -
如果没有
id
,name
,class
属性时,或id
,name
,class
属性是动态/不唯一的时候,使用XPath
和CSS Selector
定位。 -
定位页面超链接使用
link_text
和partial_link_text
定位 -
可使用
XPath
和CSS Selector
定位的时候,优先使用CSS Selector
。CSS Selector
定位的速度和效率比XPath
高。 -
没有最好的,只有最精简的,怎么简单怎么来。
扩展:为什么
CSS Selector
定位的速度和效率比XPath
高?
结论:因为你无论用那种方式定位,最终都会转换到CSS Selector
进行元素定位。
我们可以在PyCharm中,安装ctrl
点击对应的方法,进行查看源码,最终都会定位到如下代码:
def find_element(self, by=By.ID, value=None):
"""
Find an element given a By strategy and locator. Prefer the find_element_by_* methods when
possible.
:Usage:
element = driver.find_element(By.ID, ‘foo‘)
:rtype: WebElement
"""
if self.w3c:
if by == By.ID:
by = By.CSS_SELECTOR
value = ‘[id="%s"]‘ % value
elif by == By.TAG_NAME:
by = By.CSS_SELECTOR
elif by == By.CLASS_NAME:
by = By.CSS_SELECTOR
value = ".%s" % value
elif by == By.NAME:
by = By.CSS_SELECTOR
value = ‘[name="%s"]‘ % value
return self.execute(Command.FIND_ELEMENT, {
‘using‘: by,
‘value‘: value})[‘value‘]
说明:可以看到上面代码中的if语句中,所有用到的定位方式,最后都转为对应的
CSS Selector
定位。
提示:我们也可以通过
js
和jQuery
进行元素的定位,但推荐用以上总结的方式进行元素定位。