--- description: "Codex 与 Playwright MCP 案例，说明如何让 AI 操作浏览器、点击页面、截图检查并验证网页状态。" --- ::: tip 最后核对 公开资料最后核对日期：2026-06-29。本文参考 [Model Context Protocol](https://modelcontextprotocol.io/)、[Playwright](https://playwright.dev/) 与 [microsoft/playwright-mcp](https://github.com/microsoft/playwright-mcp)。浏览器自动化能力、安装方式和可用工具名称请以原项目说明为准。 ::: # Codex × Playwright MCP：让 AI 像人一样操控浏览器 本章节介绍 **Playwright MCP**。这是一个基于 Playwright 的 MCP 服务器，它把打开浏览器、访问网页、点击按钮、填写输入框、读取页面内容、截图、验证结果等浏览器操作，封装成 AI 可以调用的工具。 像 Codex 这类编程类的 Agent，不仅能够编写和修改代码，还能够打开网页，像人一样检查页面是否跑通。 本章节使用**命令行**的方式，来学习 MCP 的安装和使用。 --- ## 1. 安装 运行以下命令完成安装： ```bash codex mcp add playwright npx @playwright/mcp@latest ``` ![playwright-mcp-add-command](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-add-command.png) **验证安装是否成功：** 进入 Codex，使用 `/mcp` 命令列出当前已经安装的 MCP 服务列表。 ![playwright-mcp-server-list](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-server-list.png) ![playwright-mcp-list-command](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-list-command.png) --- ## 2. 如何使用 通过 `/mcp` 命令确认安装成功之后，我们使用 Playwright MCP 来完成一个测试任务： 1. 让它打开浏览器去搜索"什么是 MCP" 2. 找几篇相关教程 3. 把搜索结果保存到 Markdown 本地文件里 提示词： ``` 请打开浏览器，到百度搜索"什么是 MCP"，选择两篇优质内容阅读，并整理成一个 markdown 文件保存在当前目录。 ``` ![playwright-mcp-browser-search-prompt](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-browser-search-prompt.png) 在执行过程中，需要我们放开一些权限，让它去调用相关工具。比如： - 填写搜索框 - 填写文本 - 打开网页 > 这些操作在未授权的情况下，需要**手动放行**。 ![playwright-mcp-permission-prompt](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-permission-prompt.png) 在执行过程中，你确实会发现它打开了浏览器，并且搜索了相关内容，还打开了两篇文章，这些都是可以看到的。 ![playwright-mcp-baidu-search-results](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-baidu-search-results.png) 最终它会把得到的结果总结输出给我们，然后**写入到本地的 Markdown 文件**里。 ![playwright-mcp-collected-search-summary](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-collected-search-summary.png) Codex 根据搜索到的两篇文章的内容进行总结，给我们进行相关的阐述说明。 ![playwright-mcp-markdown-file-created](https://cdn.canghecode.com/codexguide/docs/images/playwright-mcp-markdown-file-created.png) --- ## 参考来源 本文的操作思路和演示场景参考了以下 B 站创作者的视频内容，感谢原作者的分享： - 📺 **保姆级 Claude Code 速成，必学！简单！【附完整文档】** 来源：哔哩哔哩 链接：[https://b23.tv/xDKx6jX](https://b23.tv/xDKx6jX) > 本文截图均为作者本人实际操作所得，文字内容在参考基础上进行了重新整理与二次创作。如有侵权，请联系删除。