企业官网建设流程全解析

AI 助手浏览器自动化实战：Playwright CLI 完整上手指南

【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cli

Playwright CLI 是一款专为 AI 编码助手打造的浏览器自动化命令行工具。装好之后，Claude Code、GitHub Copilot 等 coding agent 就能直接打开页面、点按钮、填表单、截图，还能把你的操作录下来生成 Playwright 测试代码。相比把整页 DOM 塞进模型上下文的 MCP 方式，CLI 路线在令牌消耗上更省：每次操作只回给模型一份紧凑的页面快照和结果，助手不会被大段页面数据带偏。如果你已经在用 AI 编码助手、又想让浏览器活有人代劳，这个工具值得装一个试试。

两分钟装好 Playwright CLI 并跑通第一次自动化 🚀

环境要求只有一个：Node.js 18 及以上。全局安装只需一行：

npm install -g @playwright/cli@latest playwright-cli --help

接着告诉 AI 助手怎么用，有两条路。第一条是装自带的技能包，Claude Code 和 Copilot 会直接读取本地技能：

playwright-cli install --skills

第二条干脆不装：直接在对话里说一句"用 playwright-cli 测试这个页面的加待办流程，命令列表自己看playwright-cli --help"。CLI 的帮助信息写得足够直白，助手能自己摸清楚。

不想先交给 AI、想亲手把流程走一遍的话，三行命令就够：

playwright-cli open https://demo.playwright.dev/todomvc/ --headed playwright-cli type "Buy groceries" playwright-cli press Enter

浏览器默认是无头模式（不显示窗口），加上--headed会弹出真实窗口，方便你盯着每一步操作。

用快照引用定位元素：操作页面的三种姿势

浏览器自动化的核心难题是"找到那个元素"。Playwright CLI 的做法是：每条命令执行完都会返回一份文本快照，轻量描述页面结构，并给每个元素标上e15、e23这样的引用编号——相当于给页面上的元素发了座位号，助手报号即可操作：

playwright-cli snapshot playwright-cli click e15 playwright-cli fill e23 "搜索关键词"

习惯手写选择器的话，也可以直接传 CSS 或 Playwright 定位器，三种写法通用：

playwright-cli click "#main > button.submit" playwright-cli click "getByRole('button', { name: 'Submit' })" playwright-cli click "getByTestId('submit-button')"

大页面不必每次全量拍快照：snapshot --depth=4只取前 4 层结构，find "Add to cart"则相当于在快照里做 grep，返回命中的节点及其前后三行上下文。

用会话与持久化配置并行管理多个浏览器

同时跑两个项目怎么办？用-s=指定命名会话，每个会话有独立的浏览器、Cookie 和 localStorage，互不串台：

playwright-cli -s=shop open https://example-shop.com --persistent playwright-cli -s=admin open https://admin.example.com --persistent playwright-cli list

默认情况下浏览器配置放在内存里，关掉即失；加上--persistent会写到磁盘，重启浏览器也免登录。给 AI 助手指定会话，要么在每条命令前加-s=，要么在启动助手时设环境变量：

PLAYWRIGHT_CLI_SESSION=shop claude .

会话越跑越多时，playwright-cli close-all统一关闭，kill-all强杀卡住的进程。

可视化监控与接管 AI 的浏览器操作：show 仪表板

助手在后台操作浏览器时，你多半想知道它此刻在干嘛。一条命令打开仪表板：

playwright-cli show

👀 仪表板以网格列出所有活动会话：实时屏幕预览、会话名、当前 URL、页面标题。点进任意会话可放大查看，顶栏支持前进、后退、刷新，还能直接点进画面接管鼠标键盘，按 Esc 把控制权交还给 AI。卡住的会话可以直接关闭，非活动会话的数据也能当场删掉。排查"助手到底卡在哪一步"时，这个入口最省事。

模拟请求、保存登录态、录屏复盘：进阶自动化招式

后端接口还没好、想先拿假数据联调？route拦截匹配的请求并返回自定义响应：

playwright-cli route "**/api/products/*" --status=200 --body='{"success": true}' playwright-cli route-list playwright-cli unroute "**/api/products/*"

登录态不想每次重跑，用state-save把 Cookie、localStorage 导出成 JSON 文件，下个会话state-load一步恢复；cookie-set、cookie-delete等命令可做更细的单项管理。

调试三连也很实用：

playwright-cli console warning playwright-cli requests playwright-cli request 5

第一条看控制台消息，第二条列页面加载以来的全部网络请求，第三条展开第 5 个请求的详情。需要完整复盘时，video-start、video-chapter、video-stop为整个过程录像并打章节标记；tracing-start、tracing-stop生成执行轨迹供回放分析；实在不够用的话，run-code可以直接在页面上执行任意 Playwright 代码片段。

配置 Playwright CLI：配置文件、环境变量与技能参考手册

配置文件默认从.playwright/cli.config.json读取，也可用--config显式指定，内容覆盖浏览器选择、视口、超时、网络放行/拦截清单、录像保存等。临时调整走环境变量更方便：

export PLAYWRIGHT_MCP_BROWSER=firefox export PLAYWRIGHT_MCP_VIEWPORT_SIZE=1920x1080

跨浏览器对比时加--browser=chrome / firefox / webkit切换内核；--mobile或--device="iPhone 15"模拟移动端，移动页面通常更轻，快照也更省令牌。另外--raw参数会把输出里的页面状态和快照剥掉、只留结果值，方便接到管道里继续处理：

playwright-cli --raw eval "JSON.stringify([...document.querySelectorAll('a')].map(a => a.href))" > links.json

install --skills装的技能还自带一份 专业参考手册目录，覆盖 Playwright 测试套件的运行与调试、请求模拟、执行自定义代码、多会话管理、存储状态、规范驱动测试生成、跟踪记录、视频录制、元素属性检查。助手遇到复杂任务时，会自行翻阅对应章节。想看源码和文档原文，clone 一份即可：git clone https://gitcode.com/GitHub_Trending/pl/playwright-cli。

适合人群与几条实战建议

这套工具最适合两类人：一是在用 AI 编码助手、想让助手顺手把网页测试和数据抓取做好的工程师；二是希望把手工点按的操作沉淀成可重复执行的 Playwright 脚本的测试同学。

几条用下来顺手经验 ✅：需要反复交互的页面用持久化会话，免去每次重新登录；大页面用--depth限制快照深度，输出更简洁；问题难复现时先开录像，回放时章节标记能直接定位到出问题的动作。装好之后先跑一遍install --skills，再让助手对照--help开工，头五分钟就能看到它在页面上动起来。

【免费下载链接】playwright-cliCLI for common Playwright actions. Record and generate Playwright code, inspect selectors and take screenshots.项目地址: https://gitcode.com/GitHub_Trending/pl/playwright-cli