用Playwright MCP让AI帮你完成所有浏览器自动化_playwright mcp + ai模型自动生成脚本代码

欢迎来到我的博客，代码的世界里，每一行都是一个故事

🎏：你只管努力，剩下的交给时间

🏠 ：小破站

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

• • 🥊前言：告别那些痛苦的“选择器地狱”吧！
  • 什么是 Playwright MCP？
  • • ✅ 定义
    • ✅ 技术栈组成
    • ✅ 为什么不是 Selenium？
  • Playwright MCP 的工具解释
  • • 一、浏览器基础控制
    • • 1. `browser_close`
      • 2. `browser_resize`
      • 3. `browser_install`
    • 二、页面交互核心命令
    • • 4. `browser_click`
      • 5. `browser_type`
      • 6. `browser_hover`
      • 7. `browser_drag`
      • 8. `browser_select_option`
    • 三、导航与标签页管理
    • • 9. `browser_navigate`
      • 10. `browser_navigate_back` / `browser_navigate_forward`
      • 11. `browser_tab_new` / `browser_tab_select` / `browser_tab_close`
      • 12. `browser_tab_list`
    • 四、数据提取与文件操作
    • • 13. `browser_snapshot`
      • 14. `browser_take_screenshot`
      • 15. `browser_pdf_save`
      • 16. `browser_file_upload`
    • 五、调试与高级控制
    • • 17. `browser_console_messages`
      • 18. `browser_handle_dialog`
      • 19. `browser_network_requests`
      • 20. `browser_press_key`
      • 21. `browser_wait_for`
      • 22. `browser_generate_playwright_test`
  • 安装与配置教程
  • 实战测试
  • 感谢

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

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

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

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

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

什么是 Playwright MCP？

✅ 定义

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

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

✅ 技术栈组成

组件 说明 Playwright 跨浏览器自动化框架，支持 Chromium、Firefox 和 WebKit MCP 协议 标准化语言模型与工具交互方式，统一指令格式 LLM（GPT/Claude） 理解人类自然语言指令，生成结构化控制命令 快照系统 结构化访问页面元素，不依赖 DOM/CSS

✅ 为什么不是 Selenium？

对比项 Selenium Playwright MCP 操作方式 基于选择器 基于结构化快照 编码门槛 高 低（自然语言驱动） 稳定性 易崩 自动适应页面变化 执行性能 慢 快 30%~50% 跨设备 有限 支持手机、平板仿真

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\"]}

实战测试

实现截图自己网站

感谢

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

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

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

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