Selenium 之元素选择器

为什么要学元素选择器？

web自动化脚本如何操作浏览器呢?最重要的就是告诉浏览器，你要操作的元素是什么。

元素选择器就是起到这么一个作用，元素选择器在 Selenium 自动化测试中起着至关重要的作用。它们用于在网页中定位和操作元素，从而实现自动化测试的目的。通过元素选择器，你可以与网页中的各种元素进行交互，例如点击按钮、输入文本、选择下拉框、验证文本等。

Selenium ——八大元素选择器

Id选择器

通过元素的

id

属性来查找元素。

id

属性通常是唯一的，因此这是最常用的选择器之一。

示列html页面
<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1 id="header">Welcome to Selenium</h1>
    <button id="myButton">Click Me!</button>
</body>
</html>

# 通过 ID 查找标题元素并打印其文本内容，driver是WebDriver对象
driver.find_element(By.ID, "header")

如图可以发现想要选中Welcome to Selenium这句话，而h1标签恰好有id属性header，因此可以使用id选择器，driver.find_element(By.ID, "header")选中h1这个元素。

Name选择器

通过元素的 name属性来查找元素。用于表单元素，使用频率中等。

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Example Form</h1>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit" name="submit_button">Submit</button>
    </form>
</body>
</html>

# 通过 NAME 查找用户名输入框并输入文本
driver.find_element(By.NAME, "username")

如图可以发现想要选中name输入框，除了可以使用id选择器之外，使用

driver.find_element(By.NAME, "username")

查找

name

属性为

username

的输入框。

CLASS_NAME选择器

通过元素的 CLASS_NAME属性来查找元素。适合查找特定类名的元素，使用频率中等。

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1 class="header">Welcome to CLASS_NAME</h1>
    <button class="btn">Click Me!</button>
</body>
</html>

# 通过 CLASS_NAME 查找
driver.find_element(By.CLASS_NAME, "header")

如图可以发现想要选中Welcome to CLASS_NAME这句话，而h1标签恰好有class属性header，因此可以使用CLASS_NAME选择器，driver.find_element(By.CLASS_NAME, "header")选中h1这个元素。

TAG_NAME选择器

通过元素的 CLASS_NAME属性来查找元素。适用于特定标签的所有元素，使用频率较低。

#通过 HTML 标签名称来查找元素。例如，查找所有的 <div> 元素。

driver.find_element(By.TAG_NAME, "header")

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")

CSS Selector选择器

CSS是一种用于描述 HTML 或 XML 文档样式的语言。常用于控制网页的外观和布局，使得开发者可以将内容与样式分离，从而更好地维护和管理网页。市面上几乎所有的网页都使用了Css。而CSS Selector选择器就是用Css来对元素进行选择，基于这样的背景，CSS Selector 语法天生就是浏览器用来选择元素的。

#CSS_SELECTOR基本语法

find_element(By.CSS_SELECTOR, 'CSS_SELECTOR参数')

根据 tag名、id、class 选择元素

CSS_SELECTOR中也是可以根据id、tag，class来进行选择

根据 tag名选择元素的 CSS Selector 语法非常简单，在Css参数位置直接写上tag名即可

#要选择 所有的tag名为div的元素
#CSS_SELECTOR选择器
driver.find_element(By.CSS_SELECTOR, 'div')
#等同于Tag_name选择器
driver.find_element(By.TAG_NAME, 'div')

根据id属性选择元素的语法是在id值前面加上一个井号：

#id值

#CSS_SELECTOR参数=#id

driver.find_element(By.TAG_NAME, '#id值')

根据class属性选择元素的语法是在class值前面加上一个点号：.class

值

#CSS_SELECTOR参数=.class值

driver.find_element(By.TAG_NAME, '.class值')

根据属性值选择元素

想选中图中python自动化这段标题，就可以通过data-title这个属性进行选中。


driver.find_element(By.TAG_NAME, '[data-title="python 做 API接口测试 和 自动化  -  1周入门"]')

当然也可以在属性值前面加上标签的限制，使元素选择的更精准


driver.find_element(By.TAG_NAME, 'h1[data-title="python 做 API接口测试 和 自动化  -  1周入门"]')

多个属性值同时使用


driver.find_element(By.TAG_NAME, 'h1[data-title='python 做 API接口测试 和 自动化  -  1周入门'][class='video-title special-text-indent']')

CSS_SELECTOR联合使用

比如，我们要选择网页 html 中的元素测试1

<div id="parent">
    <div class="child1">
        <span class="target">测试1</span>
    </div>
    <div class="child2">
        <span class="target">测试2</span>
    </div>
    <div class="child3">
        <span class="target">测试3</span>
    </div>
</div>

CSS selector 表达式可以这样写：

#选择parent下的测试1

.child1>.target    #子元素选择

#还可以这样写

.child1>span        #子元素选择

#也可以这样写

.child1 span        #span既然是子元素，当然也是后代元素

CSS 选择器可以多个class联用，也可以和其他联用。

按照次序选择

父元素的第几个子元素

#使用nth-child

:nth-child(1)    #父元素下的第一个子元素

span:nth-child(1)   #父元素的第一个子元素,如果是span就选择
#举例

div>span:nth-child(1)     #div下的第一个子元素,如果是span就选

父元素的倒数第几个子元素

#使用 nth-last-child

:nth-last-child(1)    #父元素下的倒数第一个子元素

span:nth-last-child(1)    #父元素下的倒数第一个子元素吗,如果是span就选

div:span:nth-last-child(1)     #div下的倒数第一个子元素,如果是span就选

父元素的第几个某类型的子元素

span:nth-of-type(1)    #父元素下类型为span的第一个元素

#举例

div>span:nth-of-type(1)      #div下类型为span的第一个元素

父元素的倒数第几个某类型的子节点

span:nth-last-of-type(1)    #父元素下类型为span的倒数第一个元素

#举例

div span:nth-last-of-type(1)    #div下类型为span的倒数第一个元素

奇偶数子元素选择

#偶数

:nth-child(even) 

#奇数

:nth-child(odd) 

#也可以和nth-of-type一起使用

nth-of-type(even)

nth-of-type(odd)

兄弟元素的选择

前面使用了父子元素,和后代元素,那么能不能用兄弟元素选择呢?当然可以!

<div id="parent">
    <h3>你学习吗</h3>
    <span>我不学习</span>

    <div>信你个鬼</div>
</div>

#相邻兄弟元素

h3+span

#不相邻子元素

h3~div

Xpath选择器

前面介绍了css选择器,大家是不是觉得非常的强大灵活呢,还有另一种选择器也不遑多让,那就是接下来要介绍的Xpath选择器.

在Xpath中/代表根节点

基本选择器

绝对路径:

/html/body/div

相对路径:

//div

属性选择器

通过属性选择:

//tag[@attribute='value']

部分匹配属性值:

//tag[contains(@attribute, 'value')]

通过多个属性值选择:

//tag[@attribute1='value1' and @attribute2='value2']

文本选择器

精确匹配文本内容:

//tag[text()='text']

部分匹配文本内容:

//tag[contains(text(), 'text')]

位置选择器

选择第一个子元素:

(//tag)[1]

选择最后一个子元素:

(//tag)[last()]

选择特定位置的子元素:

(//tag)[position()]

轴选择器(父子兄弟)

选择父节点:

//tag/parent::parentTag

选择子节点:

//tag/child::childTag

选择兄弟节点:

//tag/following-sibling::siblingTag

标签： selenium 前端 python

本文转载自: https://blog.csdn.net/m0_57842734/article/details/139690245
版权归原作者 m0_57842734 所有，如有侵权，请联系我们删除。