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-cliPlaywright CLI 是一款专为 AI 编码助手打造的浏览器自动化命令行工具。装好之后Claude Code、GitHub Copilot 等 coding agent 就能直接打开页面、点按钮、填表单、截图还能把你的操作录下来生成 Playwright 测试代码。相比把整页 DOM 塞进模型上下文的 MCP 方式CLI 路线在令牌消耗上更省每次操作只回给模型一份紧凑的页面快照和结果助手不会被大段页面数据带偏。如果你已经在用 AI 编码助手、又想让浏览器活有人代劳这个工具值得装一个试试。两分钟装好 Playwright CLI 并跑通第一次自动化 环境要求只有一个Node.js 18 及以上。全局安装只需一行npm install -g playwright/clilatest 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 --depth4只取前 4 层结构find Add to cart则相当于在快照里做 grep返回命中的节点及其前后三行上下文。用会话与持久化配置并行管理多个浏览器同时跑两个项目怎么办用-s指定命名会话每个会话有独立的浏览器、Cookie 和 localStorage互不串台playwright-cli -sshop open https://example-shop.com --persistent playwright-cli -sadmin open https://admin.example.com --persistent playwright-cli list默认情况下浏览器配置放在内存里关掉即失加上--persistent会写到磁盘重启浏览器也免登录。给 AI 助手指定会话要么在每条命令前加-s要么在启动助手时设环境变量PLAYWRIGHT_CLI_SESSIONshop claude .会话越跑越多时playwright-cli close-all统一关闭kill-all强杀卡住的进程。可视化监控与接管 AI 的浏览器操作show 仪表板助手在后台操作浏览器时你多半想知道它此刻在干嘛。一条命令打开仪表板playwright-cli show 仪表板以网格列出所有活动会话实时屏幕预览、会话名、当前 URL、页面标题。点进任意会话可放大查看顶栏支持前进、后退、刷新还能直接点进画面接管鼠标键盘按 Esc 把控制权交还给 AI。卡住的会话可以直接关闭非活动会话的数据也能当场删掉。排查助手到底卡在哪一步时这个入口最省事。模拟请求、保存登录态、录屏复盘进阶自动化招式后端接口还没好、想先拿假数据联调route拦截匹配的请求并返回自定义响应playwright-cli route **/api/products/* --status200 --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_BROWSERfirefox export PLAYWRIGHT_MCP_VIEWPORT_SIZE1920x1080跨浏览器对比时加--browserchrome / firefox / webkit切换内核--mobile或--deviceiPhone 15模拟移动端移动页面通常更轻快照也更省令牌。另外--raw参数会把输出里的页面状态和快照剥掉、只留结果值方便接到管道里继续处理playwright-cli --raw eval JSON.stringify([...document.querySelectorAll(a)].map(a a.href)) links.jsoninstall --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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AI 助手浏览器自动化实战：Playwright CLI 完整上手指南
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-cliPlaywright CLI 是一款专为 AI 编码助手打造的浏览器自动化命令行工具。装好之后Claude Code、GitHub Copilot 等 coding agent 就能直接打开页面、点按钮、填表单、截图还能把你的操作录下来生成 Playwright 测试代码。相比把整页 DOM 塞进模型上下文的 MCP 方式CLI 路线在令牌消耗上更省每次操作只回给模型一份紧凑的页面快照和结果助手不会被大段页面数据带偏。如果你已经在用 AI 编码助手、又想让浏览器活有人代劳这个工具值得装一个试试。两分钟装好 Playwright CLI 并跑通第一次自动化 环境要求只有一个Node.js 18 及以上。全局安装只需一行npm install -g playwright/clilatest 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 --depth4只取前 4 层结构find Add to cart则相当于在快照里做 grep返回命中的节点及其前后三行上下文。用会话与持久化配置并行管理多个浏览器同时跑两个项目怎么办用-s指定命名会话每个会话有独立的浏览器、Cookie 和 localStorage互不串台playwright-cli -sshop open https://example-shop.com --persistent playwright-cli -sadmin open https://admin.example.com --persistent playwright-cli list默认情况下浏览器配置放在内存里关掉即失加上--persistent会写到磁盘重启浏览器也免登录。给 AI 助手指定会话要么在每条命令前加-s要么在启动助手时设环境变量PLAYWRIGHT_CLI_SESSIONshop claude .会话越跑越多时playwright-cli close-all统一关闭kill-all强杀卡住的进程。可视化监控与接管 AI 的浏览器操作show 仪表板助手在后台操作浏览器时你多半想知道它此刻在干嘛。一条命令打开仪表板playwright-cli show 仪表板以网格列出所有活动会话实时屏幕预览、会话名、当前 URL、页面标题。点进任意会话可放大查看顶栏支持前进、后退、刷新还能直接点进画面接管鼠标键盘按 Esc 把控制权交还给 AI。卡住的会话可以直接关闭非活动会话的数据也能当场删掉。排查助手到底卡在哪一步时这个入口最省事。模拟请求、保存登录态、录屏复盘进阶自动化招式后端接口还没好、想先拿假数据联调route拦截匹配的请求并返回自定义响应playwright-cli route **/api/products/* --status200 --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_BROWSERfirefox export PLAYWRIGHT_MCP_VIEWPORT_SIZE1920x1080跨浏览器对比时加--browserchrome / firefox / webkit切换内核--mobile或--deviceiPhone 15模拟移动端移动页面通常更轻快照也更省令牌。另外--raw参数会把输出里的页面状态和快照剥掉、只留结果值方便接到管道里继续处理playwright-cli --raw eval JSON.stringify([...document.querySelectorAll(a)].map(a a.href)) links.jsoninstall --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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考