一、准备阶段1.首先确保电脑上安装了Nodejs若未下载请去官网链接下载2.打开命令行终端输入代码下载playwright插件PS C:\Users\29946\Desktop npm install -g playwright/clilatestadded 3 packages in 5s3.需要安装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 codejsawait page.goto(https://google.com);### Page- Page URL: https://www.google.com/- Page Title: Google### Snapshot- [Snapshot](.playwright-cli\page-2026-06-14T08-16-33-739Z.yml)2screenshot是给浏览器截屏红色是表示截屏还是以PNG的格式存放在电脑的磁盘里 PS C:\Users\29946\Desktopplaywright-cli screenshot### Result- [Screenshot of viewport](.playwright-cli\page-2026-06-14T08-18-04-042Z.png)### Ran Playwright codejs// Screenshot viewport and save it as .playwright-cli\page-2026-06-14T08-18-04-042Z.pngawait 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页面成功查询到说明成功接入Claudecode2.接下来讲codex的接入步骤只需将存放skills的目录.claude改成.codex即可输入/skills查询界面显示playwright cli说明成功3.接下来用codex测试基础用法询问天气4.上述测试比较简单不怎么费token但如果进行复杂的任务就得花费很多token那怎么在下次访问相同类似功能节省token我们给AI说创建一个xxx skill把刚才打开网站查看天气并且输出结果都提炼出来保存到skill里面如果简单可以写脚本甚至都不需要ai浪费token三、用处用于web app自动化测试
自动化ai测试
发布时间:2026/6/15 1:31:22
一、准备阶段1.首先确保电脑上安装了Nodejs若未下载请去官网链接下载2.打开命令行终端输入代码下载playwright插件PS C:\Users\29946\Desktop npm install -g playwright/clilatestadded 3 packages in 5s3.需要安装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 codejsawait page.goto(https://google.com);### Page- Page URL: https://www.google.com/- Page Title: Google### Snapshot- [Snapshot](.playwright-cli\page-2026-06-14T08-16-33-739Z.yml)2screenshot是给浏览器截屏红色是表示截屏还是以PNG的格式存放在电脑的磁盘里 PS C:\Users\29946\Desktopplaywright-cli screenshot### Result- [Screenshot of viewport](.playwright-cli\page-2026-06-14T08-18-04-042Z.png)### Ran Playwright codejs// Screenshot viewport and save it as .playwright-cli\page-2026-06-14T08-18-04-042Z.pngawait 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页面成功查询到说明成功接入Claudecode2.接下来讲codex的接入步骤只需将存放skills的目录.claude改成.codex即可输入/skills查询界面显示playwright cli说明成功3.接下来用codex测试基础用法询问天气4.上述测试比较简单不怎么费token但如果进行复杂的任务就得花费很多token那怎么在下次访问相同类似功能节省token我们给AI说创建一个xxx skill把刚才打开网站查看天气并且输出结果都提炼出来保存到skill里面如果简单可以写脚本甚至都不需要ai浪费token三、用处用于web app自动化测试