『心善渊』Selenium3.0基础 — 10、使用Seleniun定位页面元素归纳总结(超详细)

目录

• 1、Selenium中8种基本元素定位方式
  • （1）单数形式
  • （2）复数形式
• 2、By类定位的8种定位方式
  • （1）单数形式
  • （2）复数形式
• 3、XPath定位总结
  • （1）基础定位语法
  • （2）属性定位语法
  • （3）层级定位语法
  • （4）索引定位语法
  • （6）逻辑定位语法
  • （6）模糊定位语法
  • （7）其他定位语法
• 4、CSS选择器定位总结
  • （1）属性定位
  • （2）属性值模糊匹配定位
  • （3）标签定位
  • （4）层级关系定位
  • （5）索引定位
  • （6）逻辑运算定位
  • （7）元素状态定位
• 5、总结

我们在做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进行元素的定位，但推荐用以上总结的方式进行元素定位。