用Playwright MCP让AI帮你完成所有浏览器自动化

🎏：你只管努力，剩下的交给时间 🏠 ：小破站

用Playwright MCP让AI帮你完成所有浏览器自动化

🥊前言：告别那些痛苦的“选择器地狱”吧！

曾几何时，为了让自动化测试顺利通过，我们花了几个小时反复调试 XPath、CSS 选择器，还得忍受测试一夜之间“全红”的绝望。而现在，只需要输入一句话：

“点击登录按钮，输入用户名和密码，再点击提交。”

Playwright MCP 就能自动完成整个流程。

不再写代码，不再找选择器，甚至不再打开 VS Code。你只需要会“说话”，剩下的就交给 MCP。这不仅仅是效率的提升，更是自动化体验的飞跃。

什么是 Playwright MCP？

✅ 定义

Playwright MCP 是 Microsoft 基于 Playwright 自动化框架 开发的 AI驱动协议，其目标是：

让大型语言模型（LLM）能够像人类一样，通过结构化语义而不是像素截图与网页交互。

✅ 技术栈组成

✅ 为什么不是 Selenium？

Playwright MCP 的工具解释

一、浏览器基础控制

1. browser_close

• 功能：关闭当前浏览器实例（所有标签页）。
• 场景：自动化任务完成后清理环境。
• 示例：browser_close() → 关闭浏览器，释放资源。

2. browser_resize

• 功能：调整浏览器窗口大小（支持像素或设备预设）。
• 参数：width（宽度）、height（高度），或 device（设备名，如 iPhone 14）。
• 示例：
  • browser_resize({width: 1280, height: 720})
  • browser_resize({device: "Pixel 7"})

3. browser_install

• 功能：安装 Playwright 支持的浏览器（Chromium/Firefox/WebKit）。
• 示例：browser_install({browsers: ["chromium", "firefox"]})

二、页面交互核心命令

4. browser_click

• 功能：点击页面元素。
• 参数：element（描述）、ref（元素引用）。
• 示例：browser_click({element: "搜索按钮", ref: "#search-btn"})

5. browser_type

• 功能：在输入框输入文本。
• 参数：element、ref、text、submit。
• 示例：browser_type({element: "用户名输入框", ref: "#username", text: "test@example.com", submit: false})

6. browser_hover

• 功能：鼠标悬停。
• 示例：browser_hover({element: "用户头像"})

7. browser_drag

• 功能：拖拽元素。
• 示例：browser_drag({source_ref: "#item", target_ref: "#cart"})

8. browser_select_option

• 功能：选择下拉框。
• 示例：browser_select_option({element: "城市选择", ref: "#city", label: "北京"})

三、导航与标签页管理

9. browser_navigate

• 功能：跳转页面。
• 示例：browser_navigate({url: "https://baidu.com", wait_until: "networkidle"})

10. browser_navigate_back / browser_navigate_forward

• 功能：浏览器返回/前进。
• 示例：
  • browser_navigate_back()
  • browser_navigate_forward()

11. browser_tab_new / browser_tab_select / browser_tab_close

• 功能：标签页管理。
• 示例：
  • browser_tab_new({url: "https://github.com"})
  • browser_tab_select({index: 1})
  • browser_tab_close({index: 1})

12. browser_tab_list

• 功能：列出所有标签页。
• 示例：browser_tab_list()

四、数据提取与文件操作

13. browser_snapshot

• 功能：结构化快照，用于元素定位。
• 示例：browser_snapshot()

14. browser_take_screenshot

• 功能：页面截图。
• 示例：browser_take_screenshot({path: "result.png", full_page: true})

15. browser_pdf_save

• 功能：保存页面为 PDF。
• 示例：browser_pdf_save({path: "invoice.pdf", format: "A4"})

16. browser_file_upload

• 功能：文件上传。
• 示例：browser_file_upload({element_ref: "#upload-btn", file_paths: ["./resume.pdf"]})

五、调试与高级控制

17. browser_console_messages

• 功能：获取控制台日志。
• 示例：browser_console_messages()

18. browser_handle_dialog

• 功能：处理弹窗。
• 示例：browser_handle_dialog({action: "accept", text: "同意"})

19. browser_network_requests

• 功能：查看网络请求。
• 示例：browser_network_requests({filter: "login"})

20. browser_press_key

• 功能：模拟键盘操作。
• 示例：
  • browser_press_key({key: "Enter"})
  • browser_press_key({key: "Control+A"})

21. browser_wait_for

• 功能：等待条件满足。
• 示例：
  • browser_wait_for({condition: "element", element_ref: "#loading"})
  • browser_wait_for({condition: "timeout", timeout: 2000})

22. browser_generate_playwright_test

• 功能：生成自动化测试脚本。
• 示例：browser_generate_playwright_test()

安装与配置教程

地址：https://github.com/microsoft/playwright

进入cursor的mcp配置文件加入如下代码即可

"playwright": {
  "command": "npx",
  "args": ["-y", "@playwright/mcp@latest"]
}

image-20250728125950700

实战测试

实现截图自己网站

image-20250715155010931

感谢

感谢你读到这里，说明你已经成功地忍受了我的文字考验！🎉 希望这篇文章没有让你想砸电脑，也没有让你打瞌睡。 如果有一点点收获，那我就心满意足了。

未来的路还长，愿你 遇见难题不慌张，遇见bug不抓狂，遇见好内容常回访。 记得给自己多一点耐心，多一点幽默感，毕竟生活已经够严肃了。

如果你有想法、吐槽或者想一起讨论的，欢迎留言，咱们一起玩转技术，笑对人生！😄

祝你代码无bug，生活多彩，心情常青！🚀