AI+playwright+robotframework实现AI大模型驱动的web UI自动化测试
文章目录
前言
前些日子将团队内的UI自动化完成了重构，由之前使用的selenium的迁移到了新生的工具playwright。 在AI大模型的加持下，脚本质量稳定和编写效率上得到了明显提升。刚刚发了一个关于AI 编写自动化接口测试的博客，看起来反响不错，所以又写了这篇文章与大家分享。本文从playwright与selenium 对比出发，尽量用简单语言来描述，一篇文章不太可能教会你如何去写，更多的是思路与设计的分享
一、playwright与selenium 对比
关于对比，之前有博主总结的蛮好，直接引用了 Playwright 与Selenium对比。我稍微总结一下，便于理解，从原理上对比
- selenium 使用“代理”webdriver 协议来统一接口对接不同厂家的浏览器
- playwright直接和各个浏览器原生底层调试协议来通信，比如CDP(Chrome Devtools Protocol)
从原理上对比不难看出，selenium其实是在众多浏览器中采用“套一层”去解决自动化问题的，那么浏览器很多原生的底层数据selenium根本无法实现，比如网络请求参数、控制台信息等等。而且执行速度上也天然的没有playwright快。在AI时代，个人感觉因为selenium底层原理，导致目前相关的AI应用难有明显的成果，之前我也搜索了很多，selenium作为老牌工具在AI上的火花好像还没有诞生。反观playwright，结合AI的应用有很多亮点之处，所以近期在团队内部已经将驱动UI的底层重构，切换为playwright。
二、AI-playwright MCP
那么如何让AI与web自动化有效的结合，并带来效率、准确度上的提升呢。其实我另一篇博客利用AI+ MCP让AI模型与业务数据完美结合，自动编写高质量的自动化测试脚本也提到过类似的解决方式，也就是利用MCP，至于什么是MCP本文不再赘述。让AI模型分析页面的dom元素。 利用MCP来驱动浏览器，告诉AI模型记住页面交互的细节，它会抓取页面的情况并帮助你分析页面的元素结构和交互的过程。那么有了这些源数据以后，它会很好帮助你编写UI自动化测试，如果你之前有很好的代码结构它会让你在编写脚本的过程中减轻很多的工作量。
至于哪个模型能力最强等等话题。在现在各种LLM百花齐放，各路追赶的情况下。对于第一批梯队的大模型，我觉得对于普通人来说差异不大。 当然还是有差距的，建议喜欢哪个，用哪个顺手就用哪个好了。
AI模型也会犯错，而且会犯很多错，还有可能在跑偏的路上一直带歪你，所以如果利用好AI也是门学问。目前AI发展的情况，个人建议记住一个原则一定是AI辅助，半自动档位配合你工作，不要偷懒不去reviewAI生成的代码，有错误必须反馈；积累好有效的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。
- 在XxxPlayWright 基础之上，将也代码组件化，因为每个公司的业务都不一样，大多数的UI控件其实都是DIY过的，所以基于XxxPlayWright基础上，可以将操作告警框、下拉框等组件的代码模块化，可以考虑使用Mixin 等结构型的设计模式。
- 基于模块组件化的代码，封装业务关键字层，提供业务的UI操作能力
- case 上层只调用UI业务代码关键字。
robotframerwork-browser 介绍
博主使用的自动化测试框架是robotframework，所以针对RF来简单介绍一下相关的知识，如果使用pytest的，其实原理类似。
使用的自动化测试框架一直是robotframwork，所以我是基于robot官方的库再二次封装一下，简单介绍一下robotframework-browser的特性。如果你使用原生的playwright可以忽略这部分内容
Browser library powered by Playwright。 关键点：new browser 、new page 等无需关心资源清理问题，RF框架可以自动清理，确保资源的隔离。 自动关联已经存在的资源和自动启动需要的资源。
RF-browser 文档
安装
Only Python 3.9 or newer is supported. From Node side 18, 20 and 22 LTS versions are supported.
- Install node.js e.g. from https://nodejs.org/en/download/
- Update pip pip install -U pip to ensure latest version is used
- Install robotframework-browser from the commandline: pip install robotframework-browser
- Install the node dependencies: run rfbrowser init in your shell
- if rfbrowser is not found, try python -m Browser.entry init
这里需要注意的是，playwright不像selenium那样需要单独安装驱动和驱动对应的浏览器，playwright提供了自动安装的方式。我这里使用了robot的playwright库，所以使用了rfbrowser init 进行安装，如果你使用原生playwright，它也提供了类似的能力。
