自动化ai测试

一、准备阶段

1.首先确保电脑上安装了Nodejs(若未下载,请去官网链接下载)


2.打开命令行终端输入代码,下载playwright插件

PS C:\Users\29946\Desktop> npm install -g @playwright/cli@latest

added 3 packages in 5s


3.需要安装chrome,来进行实验,输入playwright-cli open google.com --headed(加headed表示是使用有头浏览器,否则无头浏览器会在后台静默运行,并且无界面,但优点是省内存多任务并发,有头浏览器有界面方便调试,在后台不运行)(--persistent 表示把cookie,登陆状态,本地存储之类的数据写到磁盘里,下次使用继续用,就不用重新登陆了

(1)我们可以看到输入指令后,playwright-cli自动弹窗打开chrome,并且我们可以在控制台看到playwright-cli只是简洁的输出了一个网页摘要,没有返回整个网页的全部DOM结构,标红处为网页结构文件地址(如果需要更详细的网页结构信息,就读取此快照文件,比MCP更节省上下文)

PS C:\Users\29946\Desktop> playwright-cli open google.com --headed

Browser `default` opened with pid 11432.

Ran Playwright code

```js

await page.goto('https://google.com');

```

Page

Snapshot

  • Snapshot(.playwright-cli\page-2026-06-14T08-16-33-739Z.yml)

(2)screenshot是给浏览器截屏(红色是表示截屏还是以PNG的格式存放在电脑的磁盘里) PS C:\Users\29946\Desktop> playwright-cli screenshot

Result

  • Screenshot of viewport(.playwright-cli\page-2026-06-14T08-18-04-042Z.png)

Ran Playwright code

```js

// Screenshot viewport and save it as .playwright-cli\page-2026-06-14T08-18-04-042Z.png

await page.screenshot({

path: '.playwright-cli\\page-2026-06-14T08-18-04-042Z.png',

scale: 'css',

type: 'png'

});

```

二、接入AI Agent

主要使用的Agent框架是Claude code与codex,因为playwright cli是一个新诞生的命令行工具,AI不知道使用,需要给AI搭配一些skills使用,接下来以playwright cli为技术底座,playwright cli skills作为说明文档搭配使用,就可以取代传统的MCP使用

1.我们新建一个文件夹取名叫test_playwright,并在此文件夹打开终端

在终端输入playwright-cli install --skills,图片为安装成功界面提示

它被放在了新建的test_playwright目录下

接下来可以启动Claudecode 打开询问你有哪些skills,页面成功查询到,说明成功接入Claudecode

2.接下来讲codex的接入步骤,只需将存放skills的目录.claude改成.codex即可,输入/skills查询,界面显示playwright cli说明成功

3.接下来用codex测试基础用法,询问天气

4.上述测试比较简单,不怎么费token,但如果进行复杂的任务就得花费很多token,那怎么在下次访问相同类似功能节省token,我们给AI说创建一个xxx skill,把刚才打开网站,查看天气,并且输出结果都提炼出来保存到skill里面(如果简单可以写脚本,甚至都不需要ai浪费token)

三、用处

用于web app自动化测试

相关推荐
IT 行者1 小时前
GitHub Spec Kit 实战(四):读懂和干预 /speckit.plan——AI 最自由发挥的一步
java·人工智能·github·ai编程·claude
江畔柳前堤5 小时前
github实战指南04-Actions 自动化实战
运维·自动化·github
uhakadotcom5 小时前
结合着 fastapi 使用,anyio 通常可以如何使用 , 它和 uvloop 在性能上有啥差异
后端·面试·github
李白的天不白5 小时前
下载smartadmin框架
git·github
QN1幻化引擎5 小时前
RingBuffer:用"循环缓冲区"干掉KV Cache的O(n)显存膨胀
算法·github
可乐要加冰^-^6 小时前
云雀文档下载
windows·git·github·石墨文档
江畔柳前堤6 小时前
github实战指南00-命令在哪里执行?
人工智能·线性代数·oracle·数据挖掘·github·word
IT 行者6 小时前
GitHub Spec Kit 实战(三):写一份能管住所有 spec 的 /speckit.constitution
java·github·ai编程·claude
IT 行者6 小时前
GitHub Spec Kit 实战(二):写一份不偏的 /speckit.specify
java·github·ai编程·claude