使用chatgpt4结合playwright进行智能化ui自动化测试

使用chatgpt4结合playwright进行智能化ui自动化测试

· 1,413 词 · 8 分钟 读完 playwright进阶

之前介绍过一个使用 chatgpt4 分析 dom，然后生成 puppeteer 代码进行自动化的测试工具 Taxy AI。今天发现有人推荐了一个使用 chatgpt4 生成 playwright 代码的测试工具BrowserGPT，稍微看了一下，原理比较简单，比较适合我们去研究一下，顺便打开思路。

演示动画

具体使用

因为我没有 chatgpt4 的 key，所以没办法直接上手使用，只能通过文档去猜测一下具体用法。

BrowserGPT 设置了 openai 的 key 以及 start url 之后就可以在命令行里运行了，大致的使用方式是输入一些自然语言，然后 BrowserGPT 执行 AI 生成的 playwright 代码，实现自然语言自动化的功能。

go to hn
click on the abc article

比如上面的一些描述就实现了去 hacknews 网站点击 abc 这篇文章的功能。

原理分析

大致看了一下，执行的流程是这样的，代码在这里

  • 获取初始化的 url，打开 chrome 浏览器，跳转到这个 url
  • 在命令行里启动 prompt，也就是给用户一个输入的 ui
  • 初始化 openai 的 api
  • 写个死循环，每次用户输入之后调用doAction函数
  • 在doAction函数里简化当前页面的 dom 元素
  • 将简化过的 dom 元素传给 chatgpt，让 gpt 根据 playwright 的示例生成代码
  • 执行 chatgpt 生成的代码

这里最有意思的部分是doAction函数

async function doAction(chatApi, page, task, options = {}) {
  const systemPrompt = `
You are a programmer and your job is to write code. You are working on a playwright file. You will write the commands necessary to execute the given input. 

Context:
Your computer is a mac. Cmd is the meta key, META.
You are on the website ${page.evaluate("location.href")}

Here is the overview of the site
${await parseSite(page, options)}

Your output should just be the code that is valid for PlayWright page api. When given the option to use a timeout option, use 1s. Except when using page.goto() use 10s. For actions like click, use the force option to click on hidden elements.

User: click on show hn link
Assistant:
\`\`\`
const articleByText = 'Show HN';
await page.getByText(articleByText, { exact: true }).click(articleByText, {force: true, hidden: true});
\`\`\`
`;
  let code = "";
  try {
    code = await queryGPT(chatApi, [
      new SystemChatMessage(systemPrompt),
      new HumanChatMessage(task),
    ]);
  } catch (e) {
    console.log(e.response.data.error);
  }
  try {
    const func = AsyncFunction("page", code);
    await func(page);
  } catch (e) {
    console.log(e);
  }
}

可以看到给 chatgpt 的提示词是两个部分合成的，一个是预先定义的，另一个是用户输入的指令。

简单分析一下系统的提示词，大概分这几个部分

  • 角色和任务定义: You are a programmer and your job is to write code. You are working on a playwright file. You will write the commands necessary to execute the given input.，让 chatgpt 去扮演程序员，
  • 环境描述: Your computer is a mac. Cmd is the meta key, META.，运行环境是 mac
  • 提供主要信息: Here is the overview of the site;${await parseSite(page, options)}，这里把当前页面的 html 元素的 body 简化了一下，再喂给了 AI
  • 提供示例: 最后提供一个示例，让 ai 按照例子生成代码，并且让 ai 不要废话，只需要生成代码就好了

一句话描述就是把当前的网页的 html 减肥一下，把页面的 dom 和用户的命令传给 ai，让 ai 生成 playwright 代码，最后执行 ai 生成的代码。

泛化

泛化一下，使用 ai 进行一些测试工具的设计我们可以有下面的一些尝试

  • 压缩信息。把页面/api 的描述用尽量简化的方式描述出来，作为输入的一部分喂给 ai，尽量不要基于 ai 自身的先验（也就是学习过的）知识来进行任务的执行，这样可能会产生幻觉
  • 定义好的提示词。一般来说好的提示词包含：角色定义，任务描述，示例以及规范的输出描述
  • 利用 ai 生成代码或其他文本（比如手工测试用例）
  • 利用执行 ai 的生成的代码或者保存 ai 生成的内容

其实按道理来说还应该使用 ai 去检查之前的生成的代码或内容，让 ai 提供改进方案或者建议，这样输出的代码可能准确性会更高，不过忽略掉这个步骤问题也不大。更泛化一点看，其实这个工具有点简单的 ai agent 的样子，把 agent 与测试结合起来应该是未来一个不错的尝试方向。

可能会遇到的问题

这个工具目前看来实用性是有限的，这是因为当前时间节点，也就是 2023 年 10 月份，ai 可能会存在下面的问题

  • 输出不稳定。同样的提示词可能每次生成的代码是不稳定的，不过之前看到 openai 的 dalle 3 提示词洋洋千言似乎每次得到的结果都很稳定，估计后面的模型在输出稳定性上会有极大的提升，另外好的提示词也能提升输出的稳定性；
  • 无法生成最新 api 的代码。playwright 的 api 变化很快，我记得半年前写的一些代码现在就可能跑不起来了，不过因为 gpt4 的训练内容并不是最新的，所以生成的代码可能是基于旧的 api，有点鸡肋。不过如果是生成 selenium 的代码的话可能实用性会更强一点，毕竟 se 的主要接口这些年都没怎么变过；

最后大家可以头脑风暴一下，除了让 ai 把自然语言转成代码进行自动化测试之前，ai 还能在测试领域有什么样的应用呢？