Web 自动化测试如何定位元素？从 ID、CSS、XPath 到 AI 辅助定位自动化测试脚本经常出现一种情况：昨天还能

关注「软件测试就业联盟」公众号，陪你走好校招求职的每一步

自动化测试脚本经常出现一种情况：昨天还能正常点击的按钮，今天页面稍微改了一下，脚本就报错了。

有时是按钮的属性变了，有时是页面结构调整了，还有时是页面上出现了两个同名按钮，脚本不知道该点哪一个。

这些问题都与元素定位有关。

在 Web 自动化测试中，定位元素是执行点击、输入、选择、断言等操作的基础。传统方法包括 ID、CSS 选择器、XPath 等；随着 Playwright、AI 编程助手和浏览器智能体的发展，测试人员还可以借助页面结构分析、自然语言生成定位器和自动化失败诊断来提高效率。

但要注意：AI 可以帮助我们找到元素，不能替代对定位准确性和脚本稳定性的判断。

一、什么是元素定位？为什么定位方式很重要？

假设登录页面有两个输入框和一个登录按钮：

用户名输入框
密码输入框
登录按钮

人工测试时，我们可以直接看到页面，点击相应位置即可。

自动化脚本却需要一种明确的规则，告诉程序应该操作哪个元素。

例如，页面中有这样的 HTML 代码：

<input id="username" name="username" />
<input id="password" name="password" type="password" />
<button id="login-btn">登录</button>

通过元素属性，自动化脚本就能找到对应控件。

await page.locator("#username").fill("test_user");
await page.locator("#password").fill("12345678");
await page.locator("#login-btn").click();

如果开发人员修改了按钮的 ID，原来的定位方式就可能失效。

因此，设计自动化脚本时，不仅要考虑能否定位到元素，还要考虑三个问题：

准确性：是否找到了目标元素，而不是页面上其他相似元素？
稳定性：页面调整后，定位规则是否仍然有效？
可维护性：出现问题时，其他测试人员能否快速理解和修改？

二、传统元素定位方法有哪些？

1. ID 定位

通过元素的 id 属性定位。

<button id="submit-btn">提交</button>

await page.locator("#submit-btn").click();

优点：写法简单，目标明确，适合具有稳定、唯一 ID 的元素。

缺点：如果 ID 是动态生成的，或者开发人员修改了 ID，脚本就需要调整。

适合登录按钮、搜索框、表单控件等具有稳定 ID 的元素。

2. Name、Class 和标签定位

这些方式通过元素属性或 HTML 标签识别目标。

例如：

<input name="username" />
<button class="submit-btn">提交</button>

对应的 CSS 定位方式：

page.locator('[name="username"]');
page.locator(".submit-btn");
page.locator("button");

其中：

name 可以用于识别表单字段。
class 可以用于识别具有特定样式类的元素。
标签定位可以查找指定类型的元素，例如 button、input。

需要注意，class 经常被多个元素共用，单独使用时可能匹配到多个结果；标签定位的范围通常更大，也不适合直接用于需要精确识别的操作。

3. CSS 选择器定位

CSS 选择器可以根据 ID、Class、属性以及元素之间的结构关系查找目标。

例如：

// 根据 ID 定位
page.locator("#login-btn");

// 根据属性定位
page.locator('input[name="username"]');

// 根据父子结构定位
page.locator(".login-form button");

// 根据属性组合定位
page.locator('button[type="submit"]');

CSS 选择器的优点是语法简洁，能够组合多个条件，适合大部分 Web 自动化场景。

但不要为了定位一个按钮，写出依赖多层页面结构的长选择器。页面稍有调整，就可能导致定位失败。

4. XPath 定位

XPath 可以根据元素属性、文本内容以及页面节点之间的关系定位元素。

例如：

// 根据属性定位
page.locator('//button[@id="login-btn"]');

// 根据按钮文本定位
page.locator('//button[text()="登录"]');

// 根据输入框属性定位
page.locator('//input[@name="username"]');

当页面没有稳定 ID，或者需要根据父子节点、兄弟节点等关系查找元素时，XPath 会比较灵活。

例如，商品列表中有多个“购买”按钮，可以先找到对应的商品，再定位该商品内部的按钮。

但绝对 XPath，例如从 html/body/div[2]/div[1] 开始逐层查找，通常比较脆弱。页面结构调整后，定位路径可能随之失效。

Selenium 官方文档也建议优先使用稳定的 ID；没有合适 ID 时，可以考虑编写简洁的 CSS 选择器，并保持定位表达式易读、易维护。

5. 根据文本定位

如果页面上的按钮有明确文本，可以直接根据文本查找。

例如，Playwright 支持：

await page.getByText("登录", { exact: true }).click();

如果目标是交互控件，通常更推荐结合元素角色定位：

await page.getByRole("button", { name: "登录" }).click();

两种方式的区别在于：

getByText() 主要根据页面文本查找元素。
getByRole() 根据元素角色和可访问名称定位，更适合按钮、链接、复选框等交互控件。

如果页面存在多个“登录”文本，仍然需要进一步缩小定位范围。

6. 根据 Label、Placeholder 和 Test ID 定位

现代 Web 自动化测试还可以使用更贴近用户操作的定位方式。

// 根据表单标签定位
page.getByLabel("用户名");

// 根据输入框占位提示定位
page.getByPlaceholder("请输入用户名");

// 根据测试专用属性定位
page.getByTestId("login-button");

其中，getByTestId() 默认查找 data-testid 属性，例如：

<button data-testid="login-button">登录</button>

这种方式特别适合测试团队与开发团队约定稳定的测试属性。

当按钮文案需要修改时，只要 data-testid 保持不变，自动化脚本就不必跟着修改。

Playwright 官方文档推荐优先考虑用户可见的定位方式，例如角色、文本、表单标签，以及明确约定的测试属性。

三、AI 时代，元素定位有哪些新方法？

传统定位方式仍然是自动化测试的基础。AI 带来的变化，主要是帮助测试人员更快地识别元素、编写定位器，并在定位失败后分析原因。

1. 借助浏览器开发者工具，查看真实页面结构

Chrome 开发者工具中的 Elements 面板，可以查看页面 DOM 结构、元素属性、层级关系和 CSS 样式。

当脚本找不到按钮时，可以先检查：

页面中是否存在目标元素。
元素的 ID、Class、文本是否发生变化。
页面上是否存在多个匹配结果。
元素是否位于 iframe 中。
元素是否尚未加载，或者被弹窗遮挡。

这一步能够帮助我们判断问题究竟出在定位规则、页面状态，还是元素本身。

2. 借助 Playwright Codegen 生成定位器

Playwright 提供代码生成工具，可以记录浏览器操作，并生成相应的自动化代码。

例如，执行：

npx playwright codegen https://example.com

打开页面后，手动操作登录表单，工具就能生成对应的定位和操作代码。

生成的代码可以作为初稿，再由测试人员检查和优化。

需要注意，自动生成的定位器并不一定是最稳定的。页面上存在重复文本、动态属性或者复杂组件时，仍然需要人工调整。

3. 借助 AI 分析 DOM 和生成定位表达式

如果已经获取页面 DOM 片段、元素属性或可访问性快照，可以让大模型帮助分析目标元素。

例如，向 AI 提出这样的要求：

请根据下面的 HTML 片段，找到登录表单中的提交按钮。

要求：

优先使用稳定、可读的定位方式。

避免依赖过长的 DOM 层级。

检查页面是否存在多个匹配元素。

输出 Playwright 定位代码，并说明选择依据。

AI 可以分析候选元素，生成 CSS、XPath 或 Playwright Locator 表达式。

如果页面提供了明确的 data-testid、可访问名称或稳定的业务属性，AI 也可以据此选择更合适的定位方式。

但要区分两件事：AI 根据 DOM 生成定位器，和 AI 实际验证定位器是否正确，并不是同一件事。生成代码之后，仍然要在真实页面中检查匹配数量和目标元素。

4. 借助 Playwright MCP、CLI 等工具进行页面分析

当测试人员使用支持浏览器操作的工具或智能体时，可以让它先检查页面，再生成自动化操作。

例如，针对一个商品页面，可以要求工具：

打开商品详情页。
读取页面结构或可访问性快照。
找到商品名称、价格和购买按钮。
生成候选定位器。
执行点击操作，检查页面反馈。

这类方式减少了人工反复查看 DOM、复制属性和编写初始代码的工作。

如果使用 Playwright MCP，可以让支持 MCP 的 AI 客户端通过浏览器工具获取页面信息；如果使用 Playwright CLI，则可以结合命令行操作、页面快照和脚本执行完成分析。

具体能否读取 DOM、生成代码或直接执行操作，取决于所使用的工具及其配置。

AI 的优势在于缩短“查看页面—分析元素—生成代码—验证结果”的过程，而不是让定位器天然变得可靠。

5. 借助 AI 进行定位失败分析与修复

自动化执行过程中，如果某个定位器失效，AI 可以结合以下信息分析原因：

原始定位表达式。
当前页面 DOM 或可访问性快照。
错误日志和超时信息。
失败前后的页面截图。
最近一次成功执行时的定位方式。

例如，原脚本通过按钮文本定位“提交”，但页面改版后出现两个同名按钮。

AI 可以建议先定位对应表单，再在表单范围内查找提交按钮，而不是直接选择第一个匹配元素。

这种方式属于定位修复辅助。真正应用修复结果之前，必须确认目标元素和业务操作没有发生变化。

四、App 测试中的元素定位有什么不同？

以上方法主要针对 Web 页面。

如果测试对象是 Android 或 iOS App，定位方式还需要结合移动端的原生控件结构。

Appium 常见的定位方式包括：

定位方式	主要用途
Accessibility ID	根据无障碍标识定位控件
ID	根据原生控件标识定位
Class Name	根据控件类型定位
XPath	根据界面元素树及节点关系定位
平台专用定位	使用 Android 或 iOS 对应的定位机制

其中，Accessibility ID 通常值得优先考虑，但前提是应用正确设置了稳定的无障碍标识。

Appium 官方文档介绍了不同平台和驱动支持的定位策略，具体能力需要结合 Android、iOS 及所使用的驱动确认。

AI 也可以辅助分析移动端界面结构、生成候选定位表达式和排查失败原因，但不能仅凭一张截图，就保证找到了正确的原生控件。

五、定位元素时，怎样选择更稳定的方法？

实际项目中，不必追求某一种定位方式解决所有问题。更合理的做法是根据页面结构、控件属性和维护成本进行选择。

页面情况	建议优先考虑
元素具有稳定且唯一的 ID	ID
按钮、链接等交互控件名称明确	角色与可访问名称
表单字段有明确标签	Label
输入框有稳定的占位提示	Placeholder
测试团队与开发约定了专用属性	Test ID
需要根据属性组合查找元素	CSS 选择器
需要利用复杂节点关系定位	XPath
App 控件具有稳定的无障碍标识	Accessibility ID
只能通过视觉特征识别的控件	图像识别或视觉辅助，并增加结果验证