web自动化测试：元素定位详解-优快云博客

本文链接：https://blog.youkuaiyun.com/Ly_LittleStar/article/details/121461627

本文主要探讨了web自动化测试中的元素定位，包括为何进行元素定位、selenium的定位方法以及8种元素定位方式，如id、name、class_name等。还介绍了html中常用的标签及其属性，如input、h2、a、img等，并强调了元素定位在自动化测试中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

web自动化测试核心内容：

元素定位
网页操作
等待
pytest+selenium组合使用
项目实战

本节内容主要讲元素定位。

1.为什么要进行元素定位？

操作元素

2.selenium如何进行定位元素？

自动化去查找元素的方法：

网页的页面结构（F12查找，selenium在用的查找方法）
坐标，受页面大小影响，selenium不支持
图像识别，消耗CPU资源但酷炫，实用性不高，selenium不支持

网页的页面结构：由各种各样的网页标签<>构成，形成很复杂的树形结构。

标签组成：

标签名
标签属性
text文本

<span class="soutu-hover-tip" style="display: none;">按图片搜索</span>

find_element：如果查找到多个元素，只会返回第一个。如果没有找到，就会报错。

find_elements：如果查到多个元素，则以列表形式返回，没有找到，也不会报错，返回空列表。

from selenium import webdriver


class TestDemo:
    def test_01(self):
        with webdriver.Chrome(executable_path='chromedriver96.exe') as browser:
            # browser.service.
            browser.get("http://www.baidu.com")
            # 先找到输入框, 元素定位
            # el = browser.find_element('id', 'kw')
            # 想直接获取所有的元素,返回列表
            elements = browser.find_elements('name', 'wd')
            print(elements)

运行结果：

3.元素定位方式（8大元素）

id，唯一的，但不一定每个元素都有id，如果有id，就优先使用id；
name，元素的名称，<input>标签基本都有name属性；
class_name，元素的类名，样式，只能是一个class的值；
tag_name ，标签，不推荐，重复率太高；
link_text，文本链接，a元素的文本内容；
partial_link_text，对文本链接的一种补充，a元素的部分文本内容；
xpath，相对/绝对路径；
css_selector，css选择器；

4.html

每个标签都有自己独特的能力，比如<input>代表输入框

标签中通过属性也可以获取某种能力，比如<input type="">

常用标签：

input，输入框
h2，设置标题，h1~h6
div，层，可实现换行
a，超链接，通过href定义要跳转链接网址
img，通过src属性获取图片
checkbox radio，输入方式，通过设置input的type属性值得到
id，元素id
name，元素名称
form，表单，专门去制造form表单，提交后会将数据传入到属性action定义的后台服务中，method定义接口请求方法，向接口传递参数时，需要给各标签定义属性value（非手工输入的输入方式，比如radio）
ul，列表
iframe，内嵌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>py44</title>
</head>
<body>
<!--标题-->
<h2>登录</h2>
<form action="http://httpbin.org/post" method="post">
    <!--输入用户名-->
    <div>用户名：<input name="username"></div>
    <!--输入密码-->
    <div>密码：<input type="password" name="pwd"></div>
    <!--单选框，name值一致才可以是同一系列实现单选-->
    <div>
        性别：
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
        <input type="radio" name="gender" value="unknown">未知
        <!-- 这是另一个选择器-->
        <input type="radio" name="aaa">男女
    </div>
    <div>
        喜欢的电影：
        <input type="checkbox" name="movie" value="zhanlang">战狼
        <input type="checkbox" name="movie" value="honghai">红海行动
        <input type="checkbox" name="movie" value="shuofu">说服
    </div>
    <div>
        上传文件：<input type="file" name="avatar">
    </div>
    <!--提交-->
    <div><input type="submit"></div>
</form>
<!--点击图片跳转到百度-->
<div>
<a href="http://www.baidu.com">
    <img src="click_picture.png" width="600px" height="160px">
</a>
</div>
<iframe src="http://www.testingpai.com" width="800px" height="600px"></iframe>
</body>
</html>

在浏览器中打开该html效果图：