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

• 2021 年 6 月 30 日
• 筆記
• 测试基础必会技能 - Selenium测试框架

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

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

• 基本元素定位：//www.cnblogs.com/liuyuelinfighting/p/14925556.html
• By类定位：//www.cnblogs.com/liuyuelinfighting/p/14952281.html
• XPath定位：//www.cnblogs.com/liuyuelinfighting/p/14943233.html
• CSS选择器定位：//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的文档：//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（步） 来选取的。

下面列出了最常用的路径表达式：

示例：

（2）属性定位语法

（3）层级定位语法

（4）索引定位语法

（6）逻辑定位语法

XPath可以支持定位条件的与（and）、或（or）、非（not）。（我们绝大部分都使用and）

（6）模糊定位语法

XPath 通配符可用来选取未知的 XML 元素。

示例：

在下面的表格中，我们列出了一些路径表达式，以及这些表达式的结果：

（7）其他定位语法

1）其他常用定位

2）选取若干路径

通过在路径表达式中使用|运算符，您可以选取若干个路径。

实例：

3）.和..

4）XPath 表达式中的运算符

用于XPath定位中的示例：

4、CSS选择器定位总结

提示：

• CSS选择器定位元素，可以结合前面文章【使用CSS选择器定位元素】一起看，有详细说明。
• 关于更多的CSS选择器定位内容，请查看CSS选择器文档：//www.w3school.com.cn/cssref/css_selectors.asp。

（1）属性定位

（2）属性值模糊匹配定位

注意：[attribute|=value]

该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。

（3）标签定位

（4）层级关系定位

示例：

（5）索引定位

（6）逻辑运算定位

（7）元素状态定位

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