做UI自动化测试的不少同学可能都有遇到过这种问题：脚本运行极其脆弱，前端稍微调整页面样式、DOM 结构、文案，整套定位代码直接大面积报错，后续维护成本翻倍。

目前稳定的元素定位优先级里，data-testid是大家比较认可的，它和样式、页面结构解耦，只要标识不变，无论前端怎么重构页面，自动化脚本都无需改动，是保障用例长期稳定运行的最优解。

元素定位稳定的优先级如下：

理论上我们只需要让前端在交互元素上统一补充data-testid就能解决问题，但实际情况总是不理想：

1. 前端开发日常业务排期紧张，额外增加埋点属性会占用开发时间，普遍抵触；

2. 团队缺少统一规范，手动新增容易出现命名混乱、重复 id；

3. 存量老项目页面量大，逐行手动添加工作量巨大，很难推进落地。

很多测试只能退而求其次使用 CSS、XPath 定位，最终陷入 “前端改页面→脚本批量崩→反复修改定位器” 的恶性循环。

针对这个痛点，我封装了一套自动化 Skill，能够扫描前端代码，生成清单，然后添加 data-testid，可以将该 skill 提供给前端，或者我们自己拿到代码去操作。

###

实战案例

1、拉取前端项目

让前端负责同学提供项目地址，以及开通权限，之后使用git clone 拉取项目

如：

git clone xxx

2、skill 导入

打开前端项目，将 skill 安装在前端项目中

这套 Skill 核心能力

1. 自动扫描前端项目所有交互组件（按钮、输入框、弹窗、自定义组件等）；

2. 按照统一命名规则批量生成唯一data-testid，自动写入代码，不会覆盖已存在的测试标识；

3. 输出全页面元素清单，记录组件位置、生成的 testid，方便后续自动化脚本编写；

4. 适配 React、Vue 主流前端框架，存量项目、新项目均可直接使用。

3、执行 skill

输入下面的 skill

4、模块选择

执行 skill 之后，AI 会先进行代码的扫描，判断前端有什么模块，之后让你选择需要生成 data-testid 的模块

我这里先以一个模块作为案例，如：公寓管理、房间管理

在确认好模块之后，会输出两个 md 文件，分别是公寓管理和房间管理的 testid 清单

5、清单确认

md 中的内容如下，有涉及了哪些界面、路由，以及元素清单

我们需要重点关注的是元素清单，检查一下表中列出的元素是否都进行覆盖了，还有可以testid 的命名是否满足要求

在文档中还会有一些待确认的问题，可以进行回答

6、修改代码

在元素清单确认没问题之后，在对话框中输入“确认”

这个时候，AI 就会直接修改代码了

当然，这里我们修改之后，如果不确认或者担心会出现产生 bug，则可以提交代码让前端的同学进行确认，或者直接将这个 skill 提供给前端的同学进行执行也是可以的

7、效果演示

在添加完 data-testid 之后，相关的元素则会显示这个属性

后续这个属性就可以在 UI 自动化中被捕获和使用，例如

这个是我使用 playwright cli+playwright test skill 生成的 page object 代码，它获取到了 data-testid，之后在执行的时候，就能够比较稳定的找到相应的元素了

小结

这套 Skill 用于解决 UI 自动化最常见的元素不稳定痛点，一次性批量处理全项目页面，省去人工逐行添加的重复工作，从根源减少自动化脚本因页面重构失效，大幅降低长期维护成本。经常被元素定位不稳定困扰的测试同学可以去试试看。

以上是今天分享的内容，文中提到的Skill包，以及更多AI赋能测试的实战教程（含环境配置、Skill包、实操案例及排坑说明），已整理在知识星球，跟着步骤操作就可以上手，学习过程中有问题也可以提问。感兴趣的小伙伴可以了解一下哦～