Playwright CLI上手教程:让AI帮你操控浏览器

摘要:微软在2026年初开源了一个叫Playwright CLI的命令行工具。这个工具专门给AI编程助手用的,比如Claude Code、GitHub Copilot这些。你只要用自然语言告诉AI“帮我抓这个页面的前100条评论”,AI就能通过Playwright CLI操控浏览器帮你完成。

微软在2026年初开源了一个叫Playwright CLI的命令行工具。这个工具专门给AI编程助手用的,比如Claude Code、GitHub Copilot这些。你只要用自然语言告诉AI“帮我抓这个页面的前100条评论”,AI就能通过Playwright CLI操控浏览器帮你完成。

这篇文章会从零开始教你用这个工具。


这东西是什么?跟以前的方案有什么区别

Playwright很多人应该听过,是微软出的浏览器自动化框架。以前AI要控制浏览器,主要走的是Playwright MCP(Model Context Protocol)方案。每次操作,MCP会把整个页面的无障碍树、截图这些数据全塞进AI的上下文窗口。

问题来了。一个典型的浏览器自动化任务,MCP方案大约要消耗114000个token,而CLI方案只需要大约27000个,差了差不多4倍。

两边的核心区别在哪?Playwright CLI把页面快照保存到磁盘上的YAML文件,而不是塞回AI的上下文窗口。AI收到的只是一个文件路径,需要的时候再去读。这样一来,AI在执行多步骤任务时不会因为上下文爆满而忘记之前干了什么。


环境搭建

1. 安装Node.js

去nodejs.org下载安装,版本要求18以上。装完验证一下:

node --version

2. 安装Playwright CLI

通过npm全局安装:

npm install -g @playwright/cli@latest

验证安装:

playwright-cli --version

然后初始化工作空间并安装浏览器:

playwright-cli install
playwright-cli install-browser

3. 安装AI编程助手

目前支持最好的两个框架是Claude Code(Anthropic出品)和Codex(OpenAI出品)。装好框架后,还需要安装Playwright CLI的Skills文件:

playwright-cli install --skills

这个命令会在项目目录下生成.claude/skills/playwright-cli/文件夹,AI编程助手会自动发现并使用这些技能说明。


基础命令

Playwright CLI的操作逻辑很简单:打开浏览器,拿到页面快照,用元素编号来交互。

# 打开浏览器并导航到页面
playwright-cli open https://example.com

# 获取页面快照(会返回元素编号,比如e15、e21)
playwright-cli snapshot

# 用编号点击元素
playwright-cli click e15

# 输入文字
playwright-cli type "Hello World"

# 按键
playwright-cli press Enter

# 截图
playwright-cli screenshot

# 关闭浏览器
playwright-cli close

两个常用参数:

  • --headed:打开可见的浏览器窗口(默认是无头模式,后台静默运行)

  • --persistent:保存cookie和登录状态到磁盘,下次不用重新登录

playwright-cli open https://example.com --headed --persistent

还有一个实用的可视化面板:

playwright-cli show

这个命令会打开一个仪表盘,里面展示所有运行中的浏览器会话的实时画面。点一下任意会话可以放大查看,甚至手动接管控制。


核心概念:Skills机制

Skills是这套方案里最关键的东西。

简单说,Skill就是一份操作说明书。微软官方把playwright-cli的使用方式直接封装成了一个skill,AI照着这份说明书就知道怎么用playwright-cli操作浏览器。

同样的,当你让AI在某个网站完成任务时,AI第一次也需要自己摸索网站的操作流程,这要消耗不少token。任务完成后,你可以把这次摸索的结果提炼成一个Skill文件,下次AI照着做就行了。

三种执行方式的效率对比:

  • 首次探索:token消耗高(约占41%上下文窗口),需要AI参与,适合新任务第一次跑通

  • 用Skill执行:token消耗低(约占5%上下文窗口),需要AI参与,适合重复执行的任务

  • 导出为脚本:token消耗为零,不需要AI,适合完全固定的标准化流程

创建Skill的方法很简单。第一次任务跑完后,让AI自己总结流程就行了。你就告诉AI:“请把刚才的操作流程提炼成一个Skill,保存到项目目录下。”AI会生成一个包含步骤说明、避坑提示的Skill文件。下次执行同类任务,直接引用这个Skill。


实战案例

案例1:抓取电商评论导出CSV

让AI执行:“用Playwright CLI打开[商品页面],抓取前100条用户评论,包括用户名、评分和评论内容,保存为reviews.csv。”

首次执行时AI会自己摸索翻页、定位元素。跑完后让它固化为Skill。之后抓同类商品的评论,效率能提升8到10倍。最后还可以让AI把整个流程导出为一段Shell脚本,以后完全脱离AI运行,token成本直接归零。

案例2:Markdown文章自动发布

很多人遇到过这个问题:Markdown文章粘贴到发布平台,格式乱了,图片也不显示。

解决思路分两步。第一步是预处理,让AI写一个Python脚本,把Markdown里的网络图片下载到本地,然后转成HTML格式。第二步是自动发布,用Playwright CLI打开发布平台,创建文章,粘贴HTML,上传本地图片,然后发布。把整个流程固化为Skill后,以后只需要给AI一个文件路径,剩下的全自动完成。

案例3:Web应用自动化测试

让AI读你的代码,自动生成测试用例,然后通过Playwright CLI逐条执行:注册,登录,核心功能操作,验证结果。配合定时任务,可以做到每天自动跑一遍回归测试。


CLI还是MCP

CLI更适合任务步骤多、流程相对固定的场景,因为可以在有限的上下文窗口里平衡浏览器操作和代码编写。MCP更适合需要AI反复观察页面、动态决策的探索性自动化场景。

简单判断标准:任务步骤多、流程固定,用CLI。需要AI反复观察页面、动态决策,用MCP。两者可以在同一个项目里混着用。


常见问题

支持哪些浏览器?

Chrome是默认的,也支持Firefox、WebKit、Edge。指定方式:

playwright-cli open --browser=firefox

怎么处理需要登录的网站?

用--persistent参数保持登录态。登录一次后,后续操作不需要重新登录。

Skills的源码在哪?

Playwright CLI的官方npm包是@playwright/cli,Skills文档在GitHub仓库的skills/目录下。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_13705