使用 GPT4V+AI Agent 做自动 UI 测试的探索
一、背景
从 Web 诞生之日起，UI 自动化就成了测试的难点，到现在近 30 年，一直没有有效的手段解决Web UI测试的问题，尽管发展了很多的 webdriver 驱动，图片 diff 驱动的工具，但是这些工具的投入产出比一直被质疑，自动化率越多维护成本越高，大部分都做着就放弃了，还有一部分在做与不做间纠结。
本文结合一些开源的项目探索使用GPT 自动做 UI 测试的可能性。
二、方案选型
当前UI 的主要问题：一个是通过 Webdriver 控制浏览器执行，这些工具都需要先查找到对应元素的 Elements，无论是录制的还是自己编写的在面对 UI 变化，元素变化时都需要耗费很大的精力去重新识别，解析 Dom 查找，这个工作乏味且没有效率；另一种是通过图像进行点击，比如 Sikuli 这种工具，主要的问题也是复用性较差，换个分辨率的机器或者图片发生少的改动就不可用。
使用 GPT 做 UI 测试尝试了两种方案：
第一种将 Html 元素投喂给 GPT，主要方法获取 Html代码，对 Html 做初步缩减处理，再做向量化，然后喂给 GPT4 自动生成 Webdriver 驱动脚本，效果一般，而且因为 Html 比较大，Token 的消耗很大。
第二种思路是让 GPT 像人一样思考和测试，比如一个人打开一个网页后，他通过眼睛看到的页面文字或图标，然后用手完成点击和输入的操作，最后通过页面的弹窗或者文字来识别是否有错误，这几个动作通过大脑统一协调。
这里主要介绍第二种.
三、新方案实践
1.新方案简介
新的方案主要结合 Playwright，SoM视觉标记，GPT4Vison，GPT4，AutoGen来实现。主要的原理
通过 Playwright进行浏览器操作，包括页面图像的获取、浏览器的各种操作，相当于‘‘手’’；
进行SoM 视觉数据标记，因为 GPT4Vison 在进行页面原始识别时并不是很准确，参考微软的论文可以通过视觉标记的手段来辅助 GPT4V 识别，相当于“眼睛”。
通过GPT4+AutoGen 将这些步骤串起来实现协调控制，相当于“大脑”和“神经中枢”。
2.主要架构
3.实现步骤
1. 使用 Playwright 注入 JS
browser = playwright.chromium.launch(channel="chrome",headless=False)
context = browser.new_context()
page = context.new_page()
page.goto("http://oa.jd.com/")
inject_js ="./pagemark.js"
withopen(inject_js,'r')asfile:
content =file.read()
page.evaluate(f"{content}")2. SoM 视觉提示标记
如前文提到的 GPT4V 并不能有效的识别 Web 的元素，所以在使用 GPT4V 之前进行图像标记，图像标记现在有两种方式，一种是通过 AI 识别图片进行标记，这种主要利用在对静态图片图像的识别，对于 Web 页面的标记，我们可以采用注入 JS 修改页面元素的方式来标记。这里通过在浏览器中注入 pagemark.js，利用 Playwright 执行 js 函数来完成页面的标记，该 JS 能够完成标准的coco annotation的标注。
// DOM Labelerlet labels =[];functionunmarkPage(){
for(const label of labels){
document.body.removeChild(label);
}
labels =[];
}
functionmarkPage(){
unmarkPage();
var bodyRect = document.body.getBoundingClientRect();
var items =Array.prototype.slice.call(
document.querySelectorAll('*')
).map(function(element){
var vw = Math.max(document.documentElement.clientWidth ||0, window.innerWidth ||0);
var vh = Math.max(document.documentElement.clientHeight ||0, window.innerHeight ||