小惠珠哦

这个屌丝很懒，什么也没留下！

热门标签

Selenium 之元素选择器_selenium选择器

作者：小惠珠哦 | 2024-07-23 20:54:21

踩

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 中的元素 <span class="target">测试1</span>


<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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/871438