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

我们在做Web自动化测试时,最根本的就是操作页面上的元素。因此我们对元素的定位是最基础的工作,只有准确的定位到对应元素,才能进行后续的自动化控制,也就时操作这些元素。

我们之前用了好几篇文章,介绍在Selenium中如何进行元素的定位:

这也同时说明了在自动化测试中,元素定位是非常重要且必须掌握的技能。那么本篇文章是对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定位总结

提示:

页面代码片段

<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 元素,且这些元素拥有值为 englang 属性。

(3)层级定位语法

路径表达式 说明
//父标签名[@父标签属性名=‘属性值‘]/子标签 最终定位的是子标签
//book[@id=‘b1‘]/title 定位id属性为b1book标签下的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元素的所有 titleprice 元素。
//title | //price 选取文档中的所有 titleprice 元素。
/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选择器定位总结

提示:

(1)属性定位

CSS选择器策略 示例 说明
#id #telA 选择id="telA"的所有元素。
.class .telA 选择 class="telA”的所有元素。
[属性名=属性值] [name=telA] 除了idclass属性,其他属性的定位格式
[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、总结

  • 如果元素有明确idnameclass属性时,使用对应的基本定位方法。

  • 如果没有idnameclass属性时,或idnameclass属性是动态/不唯一的时候,使用XPathCSS Selector定位。

  • 定位页面超链接使用link_textpartial_link_text定位

  • 可使用XPathCSS 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定位。

提示:我们也可以通过jsjQuery进行元素的定位,但推荐用以上总结的方式进行元素定位。

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

上一篇:迅为-i.MX6ULL开发板-网络测试方法(二)


下一篇:volatile关键字(2)