适配Webdriver.IO的浏览器端到端测试录制工具有哪些

以下是经过实测、可以满足「录制操作-可选加校验-导出可直接复用的标准化WDIO脚本」需求的方案，全部兼容TypeScript项目配置，导出内容可以直接粘贴到VSCode中使用：

• Chrome/Edge DevTools 原生录制器
  零额外成本的首选方案：打开浏览器开发者工具切换到「录制器」面板即可启动录制，过程中可以正常执行点击、输入、跳转等所有常规Web操作，也支持手动添加DOM属性校验、文本断言等检查点。录制结束后在导出菜单里直接选择Webdriver IO格式即可生成符合官方语法规范的代码，原生适配WDIO最新版本的TS类型定义，普通场景下复制进项目就能直接跑。缺点是对iframe嵌套、自定义拖拽、文件上传这类复杂交互生成的代码需要少量手动调整。
• WDIO官方维护的本地录制工具
  可以直接通过npm安装到现有WDIO项目中，通过CLI命令启动录制，会自动读取项目里已有的WDIO配置、TS规则，录制过程支持可视化添加断言、配置等待规则，停止录制后会直接生成符合项目规范的.ts格式测试文件，连复制粘贴的步骤都省了，直接能加入测试用例集执行。因为是官方生态工具，生成的元素选择器默认匹配WDIO的定位策略，脚本稳定性比通用录制工具更高。
• Katalon Recorder 多浏览器扩展
  开源免费的第三方录制插件，支持Chrome、Firefox、Edge全平台，录制时支持插入参数化变量、多标签切换校验、弹窗处理步骤，对复杂交互场景的适配比浏览器原生录制器更好，录制完成后导出选项选择Webdriver.IO即可生成对应脚本，免费版功能完全覆盖日常E2E测试录制需求。

避坑提示：早年流传的Selenium IDE原生不支持新版WDIO脚本导出，对应的第三方导出插件已经多年未更新，生成的是WDIO v5及更早版本的旧语法，和当前主流的v7/v8版本TS API不兼容，不要使用。

所有工具生成的脚本建议做一遍简单校验，把自动生成的动态class、随机id类的不稳定选择器替换成自定义属性定位，能大幅提升用例运行的稳定性。

内容的提问来源于stack exchange，提问作者ttqa