Codex × Playwright MCP：让 AI 像人一样操控浏览器

本章节介绍 Playwright MCP。这是一个基于 Playwright 的 MCP 服务器，它把打开浏览器、访问网页、点击按钮、填写输入框、读取页面内容、截图、验证结果等浏览器操作，封装成 AI 可以调用的工具。

像 Codex 这类编程类的 Agent，不仅能够编写和修改代码，还能够打开网页，像人一样检查页面是否跑通。

本章节使用命令行的方式，来学习 MCP 的安装和使用。在半桶水课程里，它对应的是“网页检查 / 资料整理 / 自动化验证”的工作流。

这节解决什么

很多网页任务不能只靠文字判断，例如“按钮能不能点”“表单有没有提交成功”“页面是否真的出现结果”。Playwright MCP 的价值，是让 Codex 能打开页面、操作页面、截图和回报状态。

这节练的是：让 Codex 操作浏览器，但每一步都要有边界、有授权、有验收。

工作流卡

项目	内容
输入	目标网址、要完成的页面任务、允许点击的范围、禁止动作、输出格式
Codex 负责	打开页面、点击、填写、读取内容、截图、整理结果
人类判断	是否允许登录、是否允许提交、是否涉及隐私或付款
输出	截图、页面状态说明、Markdown 文件、测试记录
验收	页面状态可见、截图可复核、文件真实生成、来源链接可追溯

适合谁

这一节适合：

• 想让 Codex 检查本地网页、后台页面或公开网页的人。
• 想把网页资料整理成 Markdown、表格或报告的人。
• 做前端页面时，需要 AI 帮忙点击、截图和确认结果的人。

第一次练习建议使用公开网页或本地 localhost 页面，不要直接让 Codex 操作有付款、删除、发消息或权限变更的页面。

1. 安装

运行以下命令完成安装：

codex mcp add playwright npx @playwright/mcp@latest

验证安装是否成功： 进入 Codex，使用 /mcp 命令列出当前已经安装的 MCP 服务列表。

---

2. 如何使用

通过 /mcp 命令确认安装成功之后，我们使用 Playwright MCP 来完成一个测试任务：

1. 让它打开浏览器去搜索"什么是 MCP"
2. 找几篇相关教程
3. 把搜索结果保存到 Markdown 本地文件里

提示词：

请打开浏览器，到百度搜索"什么是 MCP"，选择两篇优质内容阅读，并整理成一个 markdown 文件保存在当前目录。

在执行过程中，需要我们放开一些权限，让它去调用相关工具。比如：

• 填写搜索框
• 填写文本
• 打开网页

这些操作在未授权的情况下，需要手动放行。

在执行过程中，你确实会发现它打开了浏览器，并且搜索了相关内容，还打开了两篇文章，这些都是可以看到的。

最终它会把得到的结果总结输出给我们，然后写入到本地的 Markdown 文件里。

Codex 根据搜索到的两篇文章的内容进行总结，给我们进行相关的阐述说明。

你要重点检查什么

• Codex 是否只访问了你允许的网站。
• 是否在每个需要权限的动作前说明了原因。
• 结果是否有截图、文件或页面状态作为证据。
• 如果它总结网页内容，是否保留来源链接。
• 有没有误点登录、购买、删除、提交表单等高风险按钮。

验收标准

这个案例完成后，至少要拿到：

• /mcp 能看到 Playwright MCP 已启用。
• Codex 成功打开目标页面并完成指定操作。
• 本地生成的 Markdown 文件能打开，内容和来源能对应。
• 至少有一张截图或清晰页面状态说明。
• Codex 明确说明哪些操作需要人工审批。

复用方式

可以把网页任务写成这个模板：

请使用 Playwright MCP 完成网页任务。

目标网址：
任务目标：
允许操作：
禁止操作：
输出格式：
验收标准：

每次需要点击、输入、提交或授权前，请先说明原因，等我确认。

参考来源

本文的操作思路和演示场景参考了以下 B 站创作者的视频内容，感谢原作者的分享：

• 📺 Claude Code 速成与完整文档分享视频
  来源：哔哩哔哩
  链接：https://b23.tv/xDKx6jX

本文截图均为作者本人实际操作所得，文字内容在参考基础上进行了重新整理与二次创作。如有侵权，请联系删除。