用 Playwright MCP 让 Codex 操控浏览器

这案例干啥的

就是让 Codex 自己开个浏览器,自己点页面、填表单、跑测试。你跟它说"去我那个测试环境登录一下,看看购物车能不能用",它真就开浏览器去操作了。

相当于给 AI 装了双手,能上网干活。

啥时候用

• 写完功能想快速验证下页面交互对不对
• 自动化测试,不想手写一堆 Playwright 脚本
• 抓取网页数据,懒得写爬虫
• 演示某个流程,需要录屏或者截图

准备工作

• Codex 装好 Playwright MCP
• 本地能跑起来你要测的页面(或者有公网地址)
• 大概知道你要测的流程是啥(比如"登录→加购物车→结算")

怎么搞

第一步:启动 MCP

确保 Codex 配置里 Playwright MCP 已启用。重启 Codex 让它加载。

第二步:描述任务

跟它说清楚你要干啥:

打开 http://localhost:3000 这个页面,用账号 admin/123456 登录,然后点"我的订单",看下页面有没有报错,最后截个图给我。

第三步:看它操作

Codex 会启动一个浏览器窗口(默认是无头的,你可以让它有头方便看),按你说的步骤一步步点。终端里会输出每一步在干啥。

第四步:拿结果

操作完了,它会告诉你结果:成功没成功、截图在哪、有没有报错。

第五步:让它写脚本

如果你以后想重复这个流程,跟它说:

把刚才的操作写成一个 Playwright 脚本,存到 tests/e2e/login.spec.ts 里。

这样下次直接跑脚本就行,不用每次让 AI 操作。

验证结果

• 浏览器确实打开了目标页面
• 操作步骤跟你描述的一致
• 截图/报告生成在指定位置
• 如果有报错,AI 能告诉你错在哪

注意事项

提示

第一次让 AI 操作时,用"有头模式"(headed),你能看到它在干啥。确认流程没问题了,再用无头模式跑,快得多。

注意

别让 AI 在生产环境乱点!特别是涉及删除、支付这类操作。Playwright 操作的是真页面,点了就是真点了。

我的经验

我一般这么用:新功能上线前,让 AI 跑一遍核心流程(登录→主功能→登出),截图存档。比我自己点一遍省事,而且能存成脚本以后跑回归测试。

还有个好用的招——让 AI 在操作的时候顺便"检查页面上的关键元素在不在"(比如"登录后应该看到用户名"),相当于做断言。

下一步

• 把生成的脚本塞到 GitHub Actions 里跑 CI
• 配合 Chrome 插件 操控真实浏览器
• 学下 Playwright 的"录制"功能,人操作一遍自动生成脚本