selenium中用到的一些元素定位的方式和示例

hushi19910329

关注

已于 2024-07-06 23:19:04 修改 · 957 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

· GEO检测

Selenium元素定位方法总结 Selenium可以驱动浏览器完成各种操作，比如模拟点击等。要想操作一个元素，首先应该识别这个元素。人有各种的特征（属性），我们可以通过其特征找到人，如通过身份证号、姓名、家庭住址。同理，一个元素会有各种的特征（属性），我们可以通过这个属性找到这对象。目录一、元素的概念（一）什么是元素？（二）查看元素信息二、元素定位方法（一）根据id定位（二）根据name定位（三）通过class name定位（四）根据tag定位（五）通过link text定位（六）通过parti 阅读详情

本文内容结合chatgpt生成整理得到。
并参考以下文章：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46066007/article/details/131384908

文章目录

常用定位方式及解释

支持的元素定位方式

Selenium支持多种元素定位方式。以下是常用定位方式、解释及示例：

ID：
- 解释：通过元素的id属性进行定位。
- 示例：driver.find_element(By.ID, "element_id")
Name：
- 解释：通过元素的name属性进行定位。
- 示例：driver.find_element(By.NAME, "element_name")
Class Name：
- 解释：通过元素的class属性进行定位。
- 示例：driver.find_element(By.CLASS_NAME, "element_class")
Tag Name：
- 解释：通过元素的标签名进行定位。
- 示例：driver.find_element(By.TAG_NAME, "element_tag")
Link Text：
- 解释：通过链接文本进行定位，适用于<a>标签。
- 示例：driver.find_element(By.LINK_TEXT, "link_text")
Partial Link Text：
- 解释：通过部分链接文本进行定位，适用于<a>标签。
- 示例：driver.find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")
XPath：
- 解释：通过XPath表达式进行定位。
- 示例：driver.find_element(By.XPATH, "//tag[@attribute='value']")
CSS Selector：
- 解释：通过CSS选择器进行定位。
- 示例：driver.find_element(By.CSS_SELECTOR, "css_selector")

示例代码

以下是如何使用这些定位方式的示例代码：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 启动浏览器
driver = webdriver.Chrome()
driver.get("https://www.example.com")

# 通过 ID 定位
element_by_id = driver.find_element(By.ID, "element_id")

# 通过 Name 定位
element_by_name = driver.find_element(By.NAME, "element_name")

# 通过 Class Name 定位
element_by_class_name = driver.find_element(By.CLASS_NAME, "element_class")

# 通过 Tag Name 定位
element_by_tag_name = driver.find_element(By.TAG_NAME, "element_tag")

# 通过 Link Text 定位
element_by_link_text = driver.find_element(By.LINK_TEXT, "link_text")

# 通过 Partial Link Text 定位
element_by_partial_link_text = driver.find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")

# 通过 XPath 定位
element_by_xpath = driver.find_element(By.XPATH, "//tag[@attribute='value']")

# 通过 CSS Selector 定位
element_by_css_selector = driver.find_element(By.CSS_SELECTOR, "css_selector")

# 关闭浏览器
driver.quit()

这些定位方式提供了多种灵活的选择，适用于各种复杂的网页元素定位需求。

css定位器的一些使用示例

使用CSS Selector定位页面元素是一种非常灵活和强大的方式。以下是一些常见的CSS Selector示例及其讲解：

示例页面结构

假设有一个示例页面结构如下：

<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <div id="main">
        <h1 class="title">Welcome to Example</h1>
        <p class="description">This is an example page.</p>
        <div class="content">
            <ul>
                <li><a href="link1.html">Link 1</a></li>
                <li><a href="link2.html">Link 2</a></li>
                <li><a href="link3.html">Link 3</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

CSS Selector 定位示例及讲解

1. 通过ID定位

element = driver.find_element(By.CSS_SELECTOR, "#main")

解释：通过元素的id属性进行定位。#表示ID选择器。

2. 通过类名定位

element = driver.find_element(By.CSS_SELECTOR, ".title")

解释：通过元素的class属性进行定位。.表示类选择器。

3. 通过标签名定位

element = driver.find_element(By.CSS_SELECTOR, "h1")

解释：通过元素的标签名进行定位。

4. 组合选择器

element = driver.find_element(By.CSS_SELECTOR, "div#main > h1.title")

解释：组合使用ID和类名进行定位。>表示直接子元素选择器。

5. 属性选择器

element = driver.find_element(By.CSS_SELECTOR, "a[href='link1.html']")

解释：通过元素的属性进行定位。

6. 部分属性选择器

element = driver.find_element(By.CSS_SELECTOR, "a[href*='link']")

解释：通过元素的部分属性值进行定位。*=表示包含属性值。

7. 子元素选择器

element = driver.find_element(By.CSS_SELECTOR, "div.content > ul > li:nth-child(2)")

解释：通过子元素选择器定位列表中的第二个<li>元素。

8. 后代选择器

element = driver.find_element(By.CSS_SELECTOR, "div#main h1")

解释：选择div中所有<h1>后代元素。

9. 兄弟选择器

element = driver.find_element(By.CSS_SELECTOR, "h1 + p")

解释：选择紧跟在<h1>后的兄弟元素<p>。

示例代码

以下是如何使用这些CSS Selector定位示例的代码：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 启动浏览器
driver = webdriver.Chrome()
driver.get("path/to/your/example.html")

# 通过ID定位
element_by_id = driver.find_element(By.CSS_SELECTOR, "#main")

# 通过类名定位
element_by_class_name = driver.find_element(By.CSS_SELECTOR, ".title")

# 通过标签名定位
element_by_tag_name = driver.find_element(By.CSS_SELECTOR, "h1")

# 组合选择器
element_combination = driver.find_element(By.CSS_SELECTOR, "div#main > h1.title")

# 属性选择器
element_by_attribute = driver.find_element(By.CSS_SELECTOR, "a[href='link1.html']")

# 部分属性选择器
element_by_partial_attribute = driver.find_element(By.CSS_SELECTOR, "a[href*='link']")

# 子元素选择器
element_by_child = driver.find_element(By.CSS_SELECTOR, "div.content > ul > li:nth-child(2)")

# 后代选择器
element_by_descendant = driver.find_element(By.CSS_SELECTOR, "div#main h1")

# 兄弟选择器
element_by_sibling = driver.find_element(By.CSS_SELECTOR, "h1 + p")

# 关闭浏览器
driver.quit()

详细解释

ID选择器：#号后跟元素的id属性值。
类选择器：.号后跟元素的class属性值。
标签选择器：直接使用标签名称进行定位。
组合选择器：组合使用多种选择器进行更精确的定位。
属性选择器：[]内指定属性名和属性值进行定位。
部分属性选择器：使用*=表示包含属性值的部分内容。
子元素选择器：使用>表示直接子元素选择。
后代选择器：选择某个元素的所有后代元素。
兄弟选择器：使用+选择紧邻的兄弟元素。

通过掌握这些CSS Selector定位方法，可以更加灵活和高效地定位页面元素。

xpath定位示例

使用Selenium和XPath定位页面元素是一种非常灵活和强大的方式。下面是一些常见的XPath定位示例及其讲解：

示例页面结构

假设有一个示例页面结构如下：

<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <div id="main">
        <h1 class="title">Welcome to Example</h1>
        <p class="description">This is an example page.</p>
        <div class="content">
            <ul>
                <li><a href="link1.html">Link 1</a></li>
                <li><a href="link2.html">Link 2</a></li>
                <li><a href="link3.html">Link 3</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

XPath 定位示例及讲解

1. 绝对路径

element = driver.find_element(By.XPATH, "/html/body/div/h1")

解释：定位页面中第一个<h1>元素，使用绝对路径从根节点<html>开始。

2. 相对路径

element = driver.find_element(By.XPATH, "//h1")

解释：定位页面中第一个<h1>元素，使用相对路径，从页面的任何位置开始搜索。

3. 按属性值定位

element = driver.find_element(By.XPATH, "//h1[@class='title']")

解释：定位拥有class属性且值为title的<h1>元素。

4. 按部分属性值定位

element = driver.find_element(By.XPATH, "//h1[contains(@class, 'tit')]")

解释：定位class属性中包含tit值的<h1>元素。

5. 使用逻辑运算符

element = driver.find_element(By.XPATH, "//h1[@class='title' and text()='Welcome to Example']")

解释：定位class属性值为title且文本内容为Welcome to Example的<h1>元素。

6. 通过层级关系定位

element = driver.find_element(By.XPATH, "//div[@id='main']/h1")

解释：定位id属性为main的<div>元素的直接子元素<h1>。

7. 定位元素集合中的特定元素

element = driver.find_element(By.XPATH, "//ul/li[2]")

解释：定位<ul>元素中第二个<li>子元素。

8. 使用text()函数

element = driver.find_element(By.XPATH, "//a[text()='Link 2']")

解释：定位文本内容为Link 2的<a>元素。

9. 定位所有匹配的元素

elements = driver.find_elements(By.XPATH, "//li")

解释：定位页面中所有<li>元素，返回一个元素列表。

10. 使用starts-with函数

element = driver.find_element(By.XPATH, "//a[starts-with(@href, 'link')]")

解释：定位href属性值以link开头的<a>元素。

示例代码

以下是如何使用这些XPath定位示例的代码：

from selenium import webdriver
from selenium.webdriver.common.by import By

# 启动浏览器
driver = webdriver.Chrome()
driver.get("path/to/your/example.html")

# 绝对路径定位
element_absolute = driver.find_element(By.XPATH, "/html/body/div/h1")

# 相对路径定位
element_relative = driver.find_element(By.XPATH, "//h1")

# 按属性值定位
element_attribute = driver.find_element(By.XPATH, "//h1[@class='title']")

# 按部分属性值定位
element_partial_attribute = driver.find_element(By.XPATH, "//h1[contains(@class, 'tit')]")

# 使用逻辑运算符
element_logical = driver.find_element(By.XPATH, "//h1[@class='title' and text()='Welcome to Example']")

# 通过层级关系定位
element_hierarchy = driver.find_element(By.XPATH, "//div[@id='main']/h1")

# 定位元素集合中的特定元素
element_specific = driver.find_element(By.XPATH, "//ul/li[2]")

# 使用text()函数
element_text = driver.find_element(By.XPATH, "//a[text()='Link 2']")

# 定位所有匹配的元素
elements_all = driver.find_elements(By.XPATH, "//li")

# 使用starts-with函数
element_starts_with = driver.find_element(By.XPATH, "//a[starts-with(@href, 'link')]")

# 关闭浏览器
driver.quit()

详细解释

绝对路径：从根节点开始的路径定位元素，使用/表示。
相对路径：从页面的任意位置开始的路径，使用//表示。
按属性值定位：使用[@attribute='value']语法定位特定属性值的元素。
按部分属性值定位：使用contains(@attribute, 'value')语法定位包含部分属性值的元素。
逻辑运算符：使用and、or组合条件进行定位。
层级关系定位：使用/表示直接子元素关系。
特定元素：使用索引[index]定位特定位置的元素。
text()函数：使用text()='value'定位具有特定文本内容的元素。
starts-with函数：使用starts-with(@attribute, 'value')定位以特定值开头的属性。

通过这些示例和解释，可以更加灵活和精准地使用XPath定位页面元素。

各种元素定位方式之间的比较

CSS选择器和XPath选择器都是用于在文档对象模型（DOM）中定位元素的强大工具，但它们的语法和用途有所不同。以下是对这两者的详细解释，以及它们与其他元素定位方式之间的关系和区别。

CSS选择器和XPath选择器的关系

CSS选择器：
- 语法：基于CSS样式规则，适合前端开发。
- 用途：用于根据元素的标签、类、ID、属性等进行选择。
- 特点：语法简洁，性能较好。适用于大多数常见的元素定位场景。
- 示例：
```
#main          /* ID选择器 */
.title         /* 类选择器 */
div > p        /* 子元素选择器 */
a[href='link'] /* 属性选择器 */
```
XPath选择器：
- 语法：基于路径表达式，源自XML路径语言。
- 用途：用于通过元素的层级关系、属性、文本内容等进行选择。
- 特点：功能强大，支持复杂的查询（如父子关系、条件判断等）。适用于需要精确定位的场景。
- 示例：
```
//div[@id='main']           /* 按属性值定位 */
//h1[contains(@class, 'tit')] /* 按部分属性值定位 */
//ul/li[2]                  /* 定位特定子元素 */
```

CSS选择器与XPath选择器的互换性

在很多简单的场景下，CSS选择器和XPath选择器可以互换使用，但在某些复杂的查询中，XPath提供了更多的灵活性和功能。

可以互换的情况：

按ID选择：
- CSS：#main
- XPath：//*[@id='main']
按类名选择：
- CSS：.title
- XPath：//*[contains(@class, 'title')]
按标签选择：
- CSS：div
- XPath：//div
按属性选择：
- CSS：a[href='link']
- XPath：//a[@href='link']

不可以互换的情况：

复杂的父子关系：
- CSS：div > p（只能选择直接子元素）
- XPath：//div/p（可以选择任意子元素）
索引选择：
- XPath：//ul/li[2]（可以选择特定索引的元素）
- CSS：不支持直接的索引选择，需要结合伪类选择器，如ul > li:nth-child(2)
条件选择：
- XPath：//h1[@class='title' and text()='Welcome']（可以结合属性和文本内容进行选择）
- CSS：无法直接实现，需要更复杂的逻辑。

其他元素定位方式

ID定位：
- driver.find_element(By.ID, "element_id")
- 最快且最常用的定位方式，适用于ID唯一的元素。
Name定位：
- driver.find_element(By.NAME, "element_name")
- 适用于表单元素。
Class Name定位：
- driver.find_element(By.CLASS_NAME, "element_class")
- 适用于类名唯一的元素。
Tag Name定位：
- driver.find_element(By.TAG_NAME, "element_tag")
- 适用于标签名唯一或需要选择多个相同标签的场景。
Link Text定位：
- driver.find_element(By.LINK_TEXT, "link_text")
- 适用于文本唯一的链接。
Partial Link Text定位：
- driver.find_element(By.PARTIAL_LINK_TEXT, "partial_link_text")
- 适用于部分文本唯一的链接。