从入门到精通只需一个小时？Selenium进行Web自动化②定位元素

已于 2025-05-03 16:45:53 修改
阅读量754 收藏 25
点赞数 24
分类专栏： UI自动化 文章标签： selenium 自动化 测试工具
于 2025-05-03 16:43:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_80488152/article/details/147678013
版权

文章目录

前言

我是标题党

学习过前端三剑客的，了解接下来讲解的内容将会非常迅速，四个字：降维打击

这一期后面两种重要的css_selector和xpth没说完，明天会详细讲解

一、定位元素

在这个selenium库中有八种元素定位方法

id、name、class_name、tag_name、css_selector、link、partial_link、xpth

小编这里小写一下、实际要大写，但是也可以不大写，不报错，但是最新的已经改标准了，所以大家还是大写哈。

ID通过元素的id属性定位driver.find_element(By.ID, "username")元素有唯一ID时，最可靠的定位方式
NAME通过元素的name属性定位driver.find_element(By.NAME, "password")表单元素常用name属性
CLASS_NAME通过元素的class属性定位driver.find_element(By.CLASS_NAME, "form-input")当元素有唯一的class时使用
TAG_NAME通过元素的标签名定位driver.find_element(By.TAG_NAME, "input")定位特定类型的元素，如所有input元素
LINK_TEXT通过链接的完整文本定位driver.find_element(By.LINK_TEXT, "了解更多")定位超链接元素
PARTIAL_LINK_TEXT通过链接的部分文本定位driver.find_element(By.PARTIAL_LINK_TEXT, "了解")链接文本较长时使用
CSS_SELECTOR通过CSS选择器定位driver.find_element(By.CSS_SELECTOR, "input[type='password']")灵活强大的定位方式
XPATH通过XPath表达式定位driver.find_element(By.XPATH, "//button[text()='保存']")最灵活的定位方式，适合复杂场景

二、前置工作

1.引入库

代码如下（示例）：from selenium import webdriver

2.创建调用Webdriver对象

对象名自己取

# 创建 WebDriver 对象
xpqh = webdriver.Chrome()

# WebDriver 的get方法 是让其打开相应网站
xpqh.get('https://blog.csdn.net/2301_80488152?type=blog')

3.find_element方法

定位元素都是在这个方法里面写哈

例如

element=xpqh.find_element(By.ID,'以ID为特征的元素名')

4.F12

F12的重要性不言而喻，开发者工具，进去后Element可以查看其HTML元素，是我们定位的找到想要元素的关键

这个能够快速帮助我们找到想要定位元素的关键信息，查找的信息会高亮显示

二、具体介绍

大家可以找一些案例来练手，更快学习

给大家一个代码，更方便大家理解，大家可以运行一下，之后把网址填入get()方法后面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>心平气和</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        neutral: {
                            100: '#F5F7FA',
                            200: '#E4E6EB',
                            300: '#C9CDD4',
                            400: '#86909C',
                            500: '#4E5969',
                            600: '#272E3B',
                            700: '#1D2129',
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-neutral-100 text-neutral-700 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <div class="bg-white rounded-xl shadow-soft p-6 md:p-8">

            <div class="mb-6">
                <h2 class="text-xl font-bold mb-2" id="page-title">心平气和</h2>
                <a href="https://blog.csdn.net/2301_80488152?spm=1010.2135.3001.5343" class="text-primary hover:underline" id="page-link">了解更多</a>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div class="bg-neutral-100 rounded-lg p-4">
                    <h3 class="font-semibold mb-2">表单登录</h3>
                    <form id="login-form">
                        <div class="mb-3">
                            <label for="username" class="block text-sm font-medium text-neutral-700 mb-1">用户名</label>
                            <input type="text" id="username" name="username" class="form-input w-full px-3 py-2 border border-neutral-300 rounded-md" placeholder="输入用户名">
                        </div>
                        <div class="mb-4">
                            <label for="password" class="block text-sm font-medium text-neutral-700 mb-1">密码</label>
                            <input type="password" id="password" name="password" class="form-input w-full px-3 py-2 border border-neutral-300 rounded-md" placeholder="输入密码">
                        </div>
                        <button type="submit" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-colors" id="login-btn">登录</button>
                    </form>
                </div>

                <div class="bg-neutral-100 rounded-lg p-4">
                    <h3 class="font-semibold mb-2">产品列表</h3>
                    <ul id="product-list">
                        <li class="mb-2 flex items-center">
                            <input type="checkbox" id="product-1" name="product" class="product-checkbox mr-2">
                            <label for="product-1" class="text-neutral-700">产品A</label>
                        </li>
                        <li class="mb-2 flex items-center">
                            <input type="checkbox" id="product-2" name="product" class="product-checkbox mr-2">
                            <label for="product-2" class="text-neutral-700">产品B</label>
                        </li>
                        <li class="flex items-center">
                            <input type="checkbox" id="product-3" name="product" class="product-checkbox mr-2">
                            <label for="product-3" class="text-neutral-700">产品C</label>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="bg-neutral-100 rounded-lg p-4">
                <h3 class="font-semibold mb-2">操作按钮</h3>
                <div class="flex space-x-3">
                    <button class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-md transition-colors" id="save-btn">保存</button>
                    <button class="bg-neutral-600 hover:bg-neutral-700 text-white font-medium py-2 px-4 rounded-md transition-colors" id="cancel-btn">取消</button>
                    <button class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-4 rounded-md transition-colors" id="delete-btn">删除</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
</title>
</head>
<body>

</body>
</html>

1.ID

我们要想找到用户名的输入框，并输入心平气和，可以找到这个输入框的唯一特性，比如说ID，虽然有些人写的时候ID可能不唯一。换种通俗的方法来说我们的这几种定位方式都是找特性或者共性。

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

# 创建浏览器实例 
xpqh = webdriver.Chrome() 

# 打开本地HTML文件 
xpqh.get("file:///D:/ceshi/xpqh.html") 

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2) 

#根据ID找元素 
xpqh = xpqh.find_element(By.ID, "username") 

#send_keys("属性值")添加东西 
xpqh.send_keys("心平气和") 

#防止闪退 
input()

运行结果：输入框中添加了“心平气和”这几个字

2.NAME

我们换一种方式在定位密码输入框，并填入密码，可以看到密码的name="password",前面的依旧不变，我们只需要把ID改成NAME

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

# 创建浏览器实例 
xpqh = webdriver.Chrome() 

# 打开本地HTML文件 
xpqh.get("file:///D:/ceshi/xpqh.html") 

#这个implicitly_wait(相应时间)，隐式等待 就是怕浏览器反映太快了，所以等待哈 
xpqh.implicitly_wait(2)
 
#根据Name定位密码输入框 
password = xpqh.find_element(By.NAME, "password") 

#send_keys("属性值")添加东西 
password.send_keys("123") 

#防止闪退 
input()

运行结果：

3.TAG_NAME

找出h2字体的个数，这个h2也是三剑客里面有学的

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

# 创建浏览器实例
xpqh = webdriver.Chrome()

# 打开本地HTML文件
xpqh.get("file:///D:/ceshi/xpqh.html")

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2)

# 使用TagName定位所有h2
h2 = xpqh.find_elements(By.TAG_NAME, "h2")
#输出h2的个数
print(f"找到 {len(h2)} 个h2")

#防止闪退
input()

运行结果：

这时候有人肯定想问：你说h2一个就一个啊。我还说h2两个嘞，简单代码可能大家可以数出来，但是现实怎么可能简单呢？

下面教大家怎么验证：跳转浏览器—>F12—>Ctrl+F

在搜索框里面输入想要查询的东西，就ok了

相比认真看我代码的小伙伴，看见了我的find_element加了一个s，find_element和find_elements的区别在哪里？

find_element和find_elements的区别

区别①返回元素

find_element：返回单个元素

find_elements：返回多个元素，列表呗

区别②没有找到元素，报错情况

find_element：NoSuchElementException

find_elements：返回[]，就是一个空列表

区别③怎么看找没找到

find_element：直接整个异常处理呗

try:
    element = xpqh.find_element(By.ID, "username")
except NoSuchElementException:
    print("元素不存在")

find_elements：看列表元素长度是不是为0呗

elements = xpqh.find_elements(By.ID, "username")
if elements:  # 列表不为空时执行操作
    elements[0].click()

考考大家，可以在什么场景下运用呢？

大家可以想想，没思路我在后面会讲到

4.CLASS_NAME

使用CLASS_NAME定位产品复选框

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

# 创建浏览器实例
xpqh = webdriver.Chrome()

# 打开本地HTML文件
xpqh.get("file:///D:/ceshi/xpqh.html")

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2)

# 使用CLASS_NAME定位产品复选框
checkboxes = xpqh.find_elements(By.CLASS_NAME, "product-checkbox")

# click()这个相当于模拟点击
#因为我们现在是find_elements，所以checkboxes现在是一个列表，列表第一个元素是下标为0
checkboxes[0].click()

#防止闪退
input()

运行结果：

5.LINK_TEXT

使用LINK_TEXT定位链接，在前端三剑客中也学到了链接<a></a>的使用

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

# 创建浏览器实例
xpqh = webdriver.Chrome()

# 打开本地HTML文件
xpqh.get("file:///D:/ceshi/xpqh.html")

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2)

#使用LINK_TEXT定位链接 
link = xpqh.find_element(By.LINK_TEXT, "了解更多") 

#点击 
link.click()

#防止闪退
input()

大家运行后是不是，从一个页面跳转到了我的博客页面呢？

 6.PARTIAL_LINK_TEXT

使用PARTIAL_LINK_TEXT定位链接，直接上代码

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

# 创建浏览器实例
xpqh = webdriver.Chrome()

# 打开本地HTML文件
xpqh.get("file:///D:/ceshi/xpqh.html")

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2)

#使用PARTIAL_LINK_TEXT定位链接 
link = xpqh.find_element(By.PARTIAL_LINK_TEXT, "了解") 

#点击 
link.click()

#防止闪退
input()

给大家摆一摆LINK_TEXT和PARTIAL_LINK_TEXT

LINK_TEXTPARTIAL_LINK_TEXT
共性都只能在a标签中使用
特性必须写出完整的值不用写出完整的值

 7.CSS_SELECTOR

CSS选择器，我觉得是非常常用的，可以根据tag、id 和 class来选择元素，在前端三剑客中，css样式，了解的应该能懂表述的，不懂的可以留言，我出一篇有关前端三剑客的帖子。

tagIDclass其他属性
直接写tag名前面加上一个井号前面加上一个.号用方括号[]

其他属性我单独拿出来说一下

比如说<a>标签

<a href="https://blog.csdn.net/2301_80488152?spm=1010.2135.3001.5343" class="text-primary hover:underline" id="page-link">了解更多</a>

这个代码是我们刚才做过相关的定位的例子，在CSS_SELECTOR中应该这样写

css= xpqh.find_element(By.CSS_SELECTOR, ["href="https://blog.csdn.net/2301_80488152?"])

CSS选择器定位保存按钮，保存这个按钮他有class、id属性，他的claa在登录按钮上也有，为了能让初学者明白，所以我选他的ID

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

# 创建浏览器实例
xpqh = webdriver.Chrome()

# 打开本地HTML文件
xpqh.get("file:///D:/ceshi/xpqh.html")

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2)

# 使用CSS选择器定位保存按钮 
xpqh.back() save_btn = xpqh.find_element(By.CSS_SELECTOR, "#save-btn") 

#点击
save_btn.click()

#防止闪退
input()

8.XPATH

这个也是比较常用的

使用XPath定位删除按钮

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

# 创建浏览器实例
xpqh = webdriver.Chrome()

# 打开本地HTML文件
xpqh.get("file:///D:/ceshi/xpqh.html")

#这个implicitly_wait(相应时间)，隐式等待  就是怕浏览器反映太快了，所以等待哈
xpqh.implicitly_wait(2)

#使用XPath定位删除按钮
delete_btn = xpqh.find_element(By.XPATH, "//button[text()='删除']") 

#点击
delete_btn.click()

#防止闪退
input()

总结

下一期我会重点介绍一下CSS-SELECTOR和XPTH,我上面说的不太全面，但是由于小编只想花两个小时来整理这些，有需要的小伙伴可以关于一下我，我后续也会出一些，面试常考题

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值