Playwright：产品经理也能上手的浏览器自动化工具，AI时代为什么值得学
最近在折腾AI工具的时候，有一个名字反复出现在我的视野里——Playwright。
一开始是在GitHub上刷到的，微软出品的项目，九万多颗星。后来在B站、知乎、YouTube上搜AI自动化相关的内容，又频繁看到有人用它配合Claude Code、Cursor这些AI工具做浏览器自动化。甚至连我平时关注的几个技术博主，聊到“AI怎么操作网页”这个话题时，底层都绕不开它。
我当时就想搞明白一件事：一个浏览器自动化工具，跟产品经理有什么关系？产品经理又不写代码，也不做自动化测试，学这东西有什么用？
后来研究了一圈，发现这东西的价值远不止“测试工具”这四个字能概括的。尤其在AI时代，它正在变成一个产品经理也能驾驭的能力。
这篇文章就是这次研究的复盘。
Playwright到底是什么
先说基本概念。Playwright是微软开发的开源浏览器自动化工具，GitHub上九万多颗星，一句话概括它的能力：让程序代替人在浏览器里操作网页。
点击按钮、填写表单、翻页、截图、抓取页面上的文字——你在浏览器里能用手做的操作，Playwright都能用代码模拟。它支持Chrome、Firefox、Safari三大浏览器引擎，提供了TypeScript、Python、.NET、Java四种语言的SDK，基本上你想用什么语言写都行。
很多人可能听过Selenium，也是浏览器自动化工具。简单对比一下：
| 对比维度 | Playwright | Selenium |
|---|---|---|
| 开发方 | 微软 | 社区主导 |
| GitHub星数 | 9.2万+ | 3.1万+ |
| 浏览器支持 | Chromium/Firefox/WebKit | 需要分别配Driver |
| 安装体验 | 一条命令装好浏览器 | 需要手动下Driver |
| 自动等待 | 内置，元素就绪才操作 | 需要自己写Wait逻辑 |
| 录制功能 | Codegen，边操作边生成代码 | 有Selenium IDE但较老 |
| AI集成 | 官方推出MCP Server | 社区有方案但非官方 |
说白了，Playwright更像Selenium的"下一代版本"——安装更简单、跨浏览器更统一，微软官方在AI集成上投入了很大精力。Selenium不是不能用，但如果你是今天才开始接触浏览器自动化，Playwright的入门门槛确实更低。
产品经理能用它干嘛——四个实战场景
这是我这篇文章最想讲清楚的部分。Playwright对产品经理来说不是测试工具，而是一个减少重复劳动的效率工具。下面四个场景都是PM日常工作中会碰到的。
场景一：老系统功能盘点
做老系统重构或迁移的时候，PM要做的第一件事就是把现有系统的功能盘点清楚——有哪些菜单、每个菜单下面有哪些按钮、每个页面有什么字段、页面之间的跳转关系是什么。
传统做法是手动操作：一个页面一个页面截图，然后把截图贴到文档里，手动标注菜单层级和按钮名称。一个稍微大点的系统，光这个盘点工作可能要花好几天。
用Playwright就不一样了。它可以自动打开系统，遍历所有菜单，把每个页面的菜单结构、按钮文案、页面元素全部抓取下来，导出成结构化的文档。你不需要写复杂的代码，用Playwright的Codegen录制功能，在浏览器里操作一遍，它就能帮你生成对应的脚本。
| 对比维度 | 手动截图整理 | Playwright自动抓取 |
|---|---|---|
| 耗时 | 一个中等系统2-3天 | 几小时内跑完 |
| 遗漏风险 | 容易漏页面 | 按脚本遍历，不遗漏 |
| 输出格式 | 截图+Word文档 | 结构化数据，可导入表格 |
| 后续维护 | 每次改版重新截 | 脚本重跑即可 |
| 技术门槛 | 零门槛 | 需要基本脚本能力 |
有个做WMS系统迁移的项目，老系统跑了六年，菜单层级深到四层，页面超过两百个。要是纯手动截图整理，光盘点阶段就要花一周。后来让开发用Playwright写了个脚本，自动遍历菜单、抓取页面结构、导出Excel，一天就搞定了。
场景二：竞品页面自动化调研
做竞品分析的时候，PM需要反复访问竞品网站，截图记录功能模块、定价信息、页面布局。如果竞品多、页面多，这个工作量也不小。
用Playwright可以做两件事：第一，批量截图——写一个脚本，把竞品网站的每个页面自动访问一遍并截图，一次性拿到全部页面快照。第二，数据抓取——把页面上的关键信息（价格、功能列表、用户评价等）自动提取出来，存成结构化数据。
知乎上有一篇关于Playwright与AI智能体的文章提到，AI智能体可以自主分析网页结构，识别翻页按钮、下拉菜单等元素。这意味着即使竞品网站改版了，AI也能重新适应新的页面结构，不需要你手动改脚本。
更实际的做法是配合AI工具一起用。在Cursor或者Claude Code里装上Playwright MCP，直接用自然语言描述需求——“帮我打开这个竞品网站，把首页所有功能模块的名称和描述抓下来，导出成表格”——AI就会自动调用Playwright去执行。
我搜到一个案例，有人用Cursor自动开发Playwright脚本，监控竞品页面的价格变化，然后把脚本打包成API接入n8n工作流，实现每天自动抓取竞品定价数据。
场景三：批量重复操作自动化
产品经理日常有一类工作特别消耗时间但又不得不做：批量操作。比如在系统里批量创建测试数据、批量修改商品状态、在后台系统里批量处理订单。
这些操作的特点是：步骤固定、数量大、容易出错。手动做，点几十次鼠标、填几十次表单，手都点酸了还可能点错。
Playwright在这种场景下就特别合适。你把操作步骤录制成脚本，然后批量执行，一次跑几十条、上百条都没问题。B站和YouTube上都有大量Playwright MCP自动填表单的实战教程，播放量都不低，说明这个需求是普遍存在的。
有三种操作方式，门槛从高到低：
| 操作方式 | 技术门槛 | 灵活度 | 适用场景 |
|---|---|---|---|
| 手写Playwright脚本 | 需要会写代码 | 最高 | 复杂定制化操作 |
| Codegen录制脚本 | 零代码门槛 | 中等 | 固定步骤的批量操作 |
| AI对话驱动 | 会描述需求就行 | 较高 | 一次性任务、探索性操作 |
对于不太懂技术的PM来说，第二种和第三种是最友好的。Codegen录制就是你打开浏览器，正常操作一遍，Playwright在旁边帮你写代码。AI对话驱动更简单，直接跟AI说“帮我在这个系统里创建20条测试订单，每条的商品名称按这个列表填”，AI自己搞定。
场景四：嵌入AI工作流
这是我觉得最有想象力的一个场景。
在“人人都是产品经理”网站上看到一篇实践文章，作者用Cursor配合Playwright MCP自动开发了一个网页自动化脚本：从选题到写文到生图，一条龙自动化。其中Playwright负责的是外部网页操作环节——比如自动打开某个网站、填写内容、下载生成的图片、保存到指定路径。
这个脚本最后被打包成了一个API接口，接入到n8n工作流里，每天自动运行。作者花了大概一个下午，跑了26个AI请求，就把整个流程跑通了。
这个案例的价值不在于具体做了什么，而在于它展示了一种新的工作方式：浏览器操作可以变成工作流的一个节点。
以前你用n8n、Zapier这些工作流工具，能做的是API层面的自动化——调用接口、处理数据、发送通知。但涉及到网页操作的部分，比如“打开一个网站、点某个按钮、下载文件”这种，API工作流搞不定，只能手动做。
Playwright把这个缺口补上了。它让浏览器操作也能被编排进自动化流程里，从“API级自动化”扩展到“UI级自动化”。
AI时代的新玩法：Playwright MCP
前面几个场景里反复提到了一个东西——Playwright MCP。这是2025年微软推出的一个新项目，GitHub上已经三万多颗星，增长速度非常快。这部分单独讲一下，因为它改变了Playwright的使用方式。
什么是MCP
MCP的全称是Model Context Protocol（模型上下文协议），简单来说就是一套标准接口，让AI模型能够调用外部工具。你可以把它理解成AI和外部软件之间的“桥梁”。
Playwright MCP Server就是把这层桥梁架到了Playwright上。装上之后，AI就能通过MCP协议直接控制浏览器——打开网页、点击按钮、填写表单、截图、抓取数据，全都能做。
三种使用方式对比
| 使用方式 | 门槛 | 灵活度 | 适合谁 |
|---|---|---|---|
| 手写Playwright脚本 | 需要会写代码 | 最高 | 开发工程师 |
| Codegen录制脚本 | 零代码 | 中等 | 有一定技术感的PM |
| AI对话驱动（MCP） | 会说话就行 | 较高 | 不懂技术的PM |
flowchart LR
A[你说一句话] --> B[AI理解意图]
B --> C[MCP协议传指令]
C --> D[Playwright执行操作]
D --> E[浏览器自动运行]
E --> F[结果返回给AI]
F --> G[AI告诉你结果]
这个流程看起来很简单，但意义在于：你不需要写一行代码，就能让AI帮你完成浏览器操作。
知乎上有一篇文章专门介绍了Playwright MCP的实践，其中提到一个观点——自然语言交互使产品经理、手动测试人员等非技术背景人员也能参与自动化测试的创建。这话说得比较学术，翻译成人话就是：以前得会写代码才能做浏览器自动化，现在会说话就行了。
怎么接入
Playwright MCP的接入方式不复杂。核心就两步：
第一步，装Node.js和Playwright。如果你电脑上有Node.js环境，运行npm i -g @playwright/mcp@latest就能装好MCP Server。
第二步，在你的AI工具里配置MCP连接。不同的AI工具有不同的配置方式：
| AI工具 | 配置方式 |
|---|---|
| VS Code | code --add-mcp '{“name”:“playwright”,“command”:“npx”,“args”:[“@playwright/mcp@latest”]}' |
| Claude Desktop | 在配置文件里添加MCP Server条目 |
| Cursor | 在设置里添加MCP Server配置 |
配置好之后，你就可以在AI对话里直接说“帮我打开某个网站，截个图”或者“帮我在这个页面的输入框里填入XXX”，AI会自动调用Playwright去执行。
B站上有一个视频标题叫“用PlayWright MCP实现前端自动化测试”，讲的就是怎么在Claude Code里装上Playwright MCP，然后用自然语言让AI操作浏览器。评论区有人感慨“playwright挺猛，影刀的优势感觉不多了”，说明这类工具的冲击力已经让传统RPA工具的用户都坐不住了。
不太懂技术的PM怎么上手
这部分给一个实际的上手路径，从最低门槛开始，一层一层来。不用一上来就全学完，先从能解决眼前问题的那个层级开始就行。
第一层：用Codegen录制脚本（零代码门槛）
如果你完全不会写代码，先从Playwright的Codegen功能开始。它的工作原理很简单：你打开浏览器正常操作，Playwright在旁边帮你把每一步操作翻译成代码脚本。操作完一遍，脚本就生成好了，下次直接跑脚本就能重放同样的操作。
听起来像录屏，但比录屏强——录屏只能回放画面，Codegen生成的是可编辑的代码，你可以改参数、加循环、批量执行。
具体操作步骤：
- 装Node.js：去nodejs.org下载LTS版本安装包，Windows和Mac都是一路下一步。装完后打开终端（Windows叫命令提示符或PowerShell，Mac叫终端），输入
node -v，能看到版本号就说明装好了 - 初始化项目：在终端里进入你想放项目的文件夹，运行
npm init playwright@latest。它会问你几个问题——用什么语言（选TypeScript就行，不用纠结）、要不要装浏览器二进制文件（选是）、要不要生成示例文件（选是）。一路回车，大概一两分钟就装好了 - 启动录制：运行
npx playwright codegen，会自动弹出两个窗口——一个浏览器窗口，一个代码窗口。你在浏览器窗口里正常操作（点击、输入、翻页），代码窗口实时生成对应的代码 - 录制操作：比如你想录制“打开某个系统、点菜单、进详情页”的操作流程，就在浏览器窗口里走一遍。Codegen会帮你把每一步都记录下来，包括点击了哪个按钮、输入了什么文字、跳转到了哪个URL
- 保存脚本：录制完关掉浏览器窗口，把代码窗口里的内容复制保存成一个
.spec.ts文件，放进项目的tests目录 - 重放执行：在终端运行
npx playwright test，Playwright会自动打开浏览器、按照你录制的步骤重新执行一遍
这个方式适合什么场景：
- 老系统功能盘点：遍历所有菜单页面，每打开一个页面录一段脚本，批量截图
- 批量创建测试数据：录制一遍创建表单的操作，然后改改参数跑多次
- 竞品页面截图：录制访问竞品各页面的流程，一键批量截图
踩坑提醒：
- 第一次运行
npm init playwright@latest时会下载三个浏览器的二进制文件，加起来大概几百MB，如果网速慢可能要等一阵。别以为卡住了就强制关掉，让它下完 - Codegen录制的时候，尽量用“点击有明确文字的按钮”这种操作，别用坐标点击。因为页面布局会变，今天按钮在左边，明天改版搬到右边了，坐标就失效了。点按钮的文字内容，Playwright会自动用文字去定位，更稳定
- 录制完保存的脚本第一次跑可能报错，最常见的原因是页面加载慢、元素还没出来脚本就开始操作了。Playwright有自动等待机制，但如果遇到异步加载特别慢的页面，可能需要手动加一个
await page.waitForTimeout(2000)让它等两秒
第二层：用AI对话驱动（会说话就行）
如果你觉得录制还是太麻烦——还得装Node.js、还得跑命令——那直接走Playwright MCP路线。这条路的核心思路是：你跟AI说需求，AI帮你写脚本并执行，你只看结果。
具体怎么接入：
- 装Node.js：跟第一层一样，先装好Node.js
- 装Playwright MCP Server：在终端运行
npm i -g @playwright/mcp@latest，这个命令会把Playwright MCP Server装到全局，大概一分钟搞定 - 配置你的AI工具：不同的AI工具配置方式不一样，但核心都是在设置里添加一个MCP Server条目
| AI工具 | 配置方式 | 难度 |
|---|---|---|
| VS Code | 在终端运行code --add-mcp '{“name”:“playwright”,“command”:“npx”,“args”:[“@playwright/mcp@latest”]}' |
简单 |
| Claude Desktop | 打开配置文件claude-desktop-config.json，在mcpServers字段里添加“playwright”条目 |
中等 |
| Cursor | 进入Settings → MCP → 添加新的MCP Server，填入命令npx和参数@playwright/mcp@latest |
简单 |
- 验证连接：配置完重启AI工具，随便发一条消息让它打开浏览器，比如“帮我打开bing.com截个图”。如果AI成功调用了Playwright并返回截图，说明配好了。如果报错，最常见的原因是Node.js路径没找到——在配置里把
npx改成Node.js的完整路径就行
- 开始用：连接成功后，你就可以用自然语言跟AI描述需求了
实际对话示例：
比如你想抓取竞品网站的功能列表，可以这样说：
帮我打开competitor.com，找到导航栏里所有的菜单项，把每个菜单的名称和对应的链接URL抓下来，整理成表格格式返回给我。
AI收到指令后，会自动调用Playwright MCP的工具——打开浏览器、导航到页面、读取导航栏元素、提取文字和链接、整理成表格返回给你。整个过程你不需要碰代码，甚至不需要打开浏览器。
再比如你想批量截图竞品的几个页面：
帮我依次打开这三个URL：[URL1, URL2, URL3]，每个页面等3秒加载完成后截全页图，保存到桌面。
AI会自动串行执行，一个页面一个页面截图保存。
这个方式适合什么场景：
- 一次性任务：今天需要抓某个网站的数据，用完就完了，不值得写正式脚本
- 探索性操作：不确定页面结构，先让AI去试一下看看能抓到什么
- 竞品快速调研：临时需要对比几个竞品的页面布局或定价信息
踩坑提醒：
- 消耗Token：Playwright MCP每次操作都会把页面的可访问性树（Accessibility Tree）传给AI，页面越复杂消耗的Token越多。抓一个简单页面可能几百Token，抓一个复杂SPA页面可能几千Token。如果用收费的AI模型，注意控制成本
- AI会误判：页面有弹窗、Cookie提示、广告遮罩的时候，AI可能不知道该先关掉弹窗再操作，卡在那里反复尝试。遇到这种情况，在Prompt里加一句“先关闭所有弹窗和Cookie提示”就行
- 登录态问题：Playwright MCP默认每次启动新的浏览器上下文，不携带登录态。如果要操作需要登录的页面，需要在配置里加
--user-data-dir参数指向你的浏览器Profile目录，让Playwright复用你已登录的浏览器会话 - 别完全信任：AI给你返回的抓取结果，最好抽样验证一下。尤其是数字类数据（价格、库存、评分），AI有时候会把相邻元素的文字张冠李戴
第三层：学一点基础脚本（能看懂能改参数）
如果你的使用场景比较复杂——需要处理登录态、需要抓取动态加载的数据、需要定时运行、需要处理异常和重试——那光靠录制和AI对话就不够了，建议花点时间学基础的Playwright脚本写法。
不用学多深，Python版本的就够用了。选Python不选TypeScript的原因很简单：Python语法更接近自然语言，对非技术背景的人更友好。
学习路径建议：
- 装Python和Playwright：去python.org下载Python 3.12+安装包，装完后在终端运行
pip install playwright，再运行playwright install下载浏览器 - 跟着官方教程走：Playwright的Python文档有中文版（playwright.net.cn/python/docs/library），从“入门”章节开始，跟着写第一个脚本——打开网页、截图、提取文字。这一步大概30分钟
- 学核心API：Playwright最常用的API就十几个，记住这些就能覆盖80%的场景
| API方法 | 作用 | 使用场景 |
|---|---|---|
page.goto(url) |
打开网页 | 所有操作的第一步 |
page.click(selector) |
点击元素 | 点按钮、切菜单、展开折叠 |
page.fill(selector, text) |
在输入框填文字 | 填表单、搜索框输入 |
page.text_content(selector) |
获取元素文字 | 抓取页面上的文字内容 |
page.screenshot(path) |
截图 | 保存页面快照 |
page.wait_for_selector(selector) |
等待元素出现 | 页面加载慢时等关键元素 |
page.locator(selector) |
定位元素 | 找到页面上的某个元素 |
browser.close() |
关闭浏览器 | 脚本结束前清理 |
- 用AI帮你写，你来看懂和改参数：实际工作中不需要你从头写脚本。把需求描述给AI（Claude、GPT都行），让它帮你生成Playwright Python脚本，然后你拿过来跑、看报错、改参数。这个循环走几遍，你自然就理解脚本的结构了
一个实际的学习节奏：
- 第一天：装好环境，跑通官方教程的第一个脚本（30分钟）
- 第二天：让AI帮你写一个抓取竞品页面标题的脚本，你负责跑和调参数（1小时）
- 第三天：尝试改AI写的脚本——加一个循环，让它抓多个页面（30分钟）
- 一周后：基本的
goto→click→fill→text_content这套流程你就能看懂了
我自己现在的状态就是这个水平——能看懂脚本在干什么，简单的改改URL和选择器就能用，复杂的还是得靠AI帮写。但对于产品经理来说，这个程度已经能覆盖大部分日常需求了。你不需要成为Playwright专家，能看懂、能改参数、能跑通就行。
哪些地方被自媒体夸大了
聊完了好处，也得说实话。网上关于Playwright的文章和视频，有些说法确实夸大了。
“零门槛，人人都能用”——安装门槛确实不高，但也不是零门槛。你至少得会装Node.js、会用终端跑命令。对于完全没接触过命令行的PM，这一步就够研究半天的。别被“自然语言驱动”骗了，AI帮你写脚本不等于你完全不需要理解脚本在干什么。
“AI能自动完成所有浏览器操作”——简单场景确实可以，但复杂场景AI也会翻车。网页改版了按钮位置变了、页面有弹窗需要处理、表单有验证码要过——这些情况AI不一定能自动应对。网上有个博主说得挺到位的：浏览器自动化是所有方式里最慢、最不稳定的一种。网页会改版，今天按钮在左边，明天搬到右边，AI就要重新学。如果有API能直接调，30分钟的手动操作可能3秒就完了，但浏览器自动化可能要磨蹭很久。
“替代传统RPA工具”——Playwright确实在蚕食影刀、UiPath这类工具的市场，但它目前还不能完全替代。RPA工具的优势在于有可视化界面、有完善的异常处理机制、有企业级权限管理。Playwright更适合开发者和技术型PM，对于纯业务人员来说，RPA工具的上手门槛可能还是更低。
结尾
说实话，作为一个产品经理，我不需要精通Playwright。但知道它是什么、能做什么、怎么配合AI工具用，这件事本身就有价值。
在AI时代，浏览器自动化不再是开发工程师的专属技能。Playwright MCP把“写代码操作浏览器”变成了“说话就能操作浏览器”，这个变化对产品经理来说是实打实的利好。
你不需要会写代码，但你需要会描述需求、会判断AI给你的结果对不对、知道什么场景适合用自动化什么场景不适合。这些能力，恰恰是产品经理本来就具备的。
这大概也是我最近最大的感受：AI时代最重要的不是学技术本身，而是学会怎么跟AI协作。Playwright只是一个例子，后面肯定还会有更多这样的工具出现。
文中关于Playwright的GitHub星数、功能特性等数据截至2026年7月。Playwright和Playwright MCP均为微软开源项目，可免费使用。