前言
前些日子将团队内的 UI 自动化完成了重构,由之前使用的 Selenium 迁移到了新生的工具 Playwright。在 AI 大模型的加持下,脚本质量稳定和编写效率上得到了明显提升。本文从 Playwright 与 Selenium 对比出发,尽量用简单语言来描述,更多的是思路与设计的分享。
一、Playwright 与 Selenium 对比
关于对比,核心差异在于底层原理。Selenium 使用'代理'WebDriver 协议来统一接口对接不同厂家的浏览器,而 Playwright 直接和各个浏览器原生底层调试协议来通信,比如 CDP (Chrome Devtools Protocol)。
从原理上对比不难看出,Selenium 其实是在众多浏览器中采用'套一层'去解决自动化问题的,那么浏览器很多原生的底层数据 Selenium 根本无法实现,比如网络请求参数、控制台信息等等。而且执行速度上也天然的没有 Playwright 快。在 AI 时代,个人感觉因为 Selenium 底层原理,导致目前相关的 AI 应用难有明显的成果。反观 Playwright,结合 AI 的应用有很多亮点之处,所以近期在团队内部已经将驱动 UI 的底层重构,切换为 Playwright。
二、AI + Playwright MCP
那么如何让 AI 与 Web 自动化有效的结合,并带来效率、准确度上的提升呢?其实利用 MCP (Model Context Protocol) 是目前的解决方式之一。让 AI 模型分析页面的 DOM 元素,利用 MCP 来驱动浏览器,告诉 AI 模型记住页面交互的细节,它会抓取页面的情况并帮助你分析页面的元素结构和交互的过程。
有了这些源数据以后,它会很好帮助你编写 UI 自动化测试。如果你之前有很好的代码结构,它会让你在编写脚本的过程中减轻很多的工作量。
至于哪个模型能力最强等等话题,在现在各种 LLM 百花齐放的情况下,对于第一批梯队的大模型,我觉得对于普通人来说差异不大。当然还是有差距的,建议喜欢哪个,用哪个顺手就用哪个好了。
AI 模型也会犯错,而且会犯很多错,还有可能在跑偏的路上一直带歪你,所以如果利用好 AI 也是门学问。目前 AI 发展的情况,个人建议记住一个原则一定是 AI 辅助,半自动档位配合你工作,不要偷懒不去 Review AI 生成的代码,有错误必须反馈;积累好有效的 Prompt;在 AI 生成的代码毫无逻辑下,立即停止,手动 Coding 教会它如何去写;在 AI 生成代码很复杂的情况下,手动拆分模式加入合理设计模型,这样会更高效的协助你 Coding。
Demo 演示
如何安装 Playwright MCP 请参考 Node 环境的 MCP Server 安装指南。其实我也调研过目前市面上一些比较火的 AI 测试工具如 TestCraft、Testim.ai、Applitools 等等,封闭式的测试用例管理和编写方面,封装和封闭性太强了,而且收费,我觉得很难适合大多数业务的需求。下面使用一个 Demo 来演示一下如何使用 Playwright MCP。


OK 让我们试运行一下生成的脚本看看

完美运行!!!在实际业务中还是要修改的,Demo 演示的是 AI 分析页面并输出脚本的能力,大家可以举一反三。
三、Playwright 封装设计建议
分层设计思想的指导下,考虑到可维护性和可扩展性等,主要的封装思路如下,供参考:
- Playwright 提供了原生操作浏览器的能力,比如点击 click、输入 input 等等。那么基于底层封装一个你们业务的 Playwright 即 XxxPlayWright。

