Playwright MCP Server 浏览器自动化实战指南

Playwright MCP Server 浏览器自动化实战指南

mcp-playwright Repository contains Playwright Model Context Protocol to automate Browser and APIs 项目地址: https://gitcode.com/gh_mirrors/mc/mcp-playwright

Playwright MCP Server 是一个基于 Playwright 的浏览器自动化工具，它通过自然语言指令（BDD格式）让用户能够轻松实现各种浏览器自动化操作。本文将详细介绍该工具的核心功能和使用方法。

多浏览器引擎支持

Playwright MCP Server 支持三种主流浏览器引擎，开发者可以根据需求灵活选择：

Given I navigate to website "https://example.com" using the "firefox" browser
And I take a screenshot named "firefox-example"
Then I navigate to website "https://example.com" using the "webkit" browser 
And I take a screenshot named "webkit-example"

技术要点：

• Chromium（默认）：Google 开源的浏览器引擎，兼容性最好
• Firefox：Mozilla 开发的浏览器引擎，测试跨浏览器兼容性必备
• WebKit：Apple Safari 使用的引擎，特别适合测试 macOS/iOS 环境

通过对比不同引擎的截图，开发者可以轻松发现页面渲染差异。

实战案例：完整用户流程测试

下面是一个典型的端到端测试场景，模拟用户登录和创建员工记录的全过程：

Given I navigate to website http://eaapp.somee.com and click login link
And I enter username and password as "admin" and "password" respectively and perform login
Then click the Employee List page 
And click "Create New" button and enter realistic employee details to create for Name, Salary, DurationWorked,
Select dropdown for Grade as CLevel and Email.

执行过程解析：

1. 系统会首先打开目标网站
2. 自动定位并点击登录链接
3. 填写凭据并提交登录表单
4. 导航至员工列表页面
5. 点击"新建"按钮并填写各项员工信息
6. 从下拉菜单中选择职级
7. 整个过程会实时展示在可视化界面中

浏览器历史导航控制

自动化测试中经常需要模拟用户的前进后退操作：

Given I navigate to website "https://example.com"
When I navigate to website "https://example.com/about"
And I navigate back in browser history
Then the current page should be "https://example.com"
When I navigate forward in browser history
Then the current page should be "https://example.com/about"

应用场景：

• 测试单页应用的路由功能
• 验证页面状态在导航后是否正确保持
• 检查浏览器历史记录相关功能

高级交互功能

拖放操作

Given I navigate to website "https://example.com/drag-drop-demo"
When I drag element with id "draggable" to element with id "droppable"
Then I should see confirmation message "Dropped!"

技术实现：

• 使用 Playwright 的 dragTo 方法
• 支持基于元素ID、CSS选择器或XPath定位
• 可配置拖放延迟时间

键盘交互

Given I navigate to website "https://example.com/form"
When I focus on the input field with id "search-box"
And I press the "Enter" key
Then the search results should appear

支持的操作：

• 单键操作（Enter、Tab、Esc等）
• 组合键（Ctrl+C、Shift+Tab等）
• 文本输入（支持模拟打字速度）

页面内容处理

生成PDF文档

Given I navigate to website "https://example.com/report"
When I save the current page as a PDF in "/downloads" folder with name "report.pdf"
Then I should see confirmation that the PDF was saved

高级配置选项：

When I save the page as PDF with the following settings:
  | Setting          | Value     |
  | ----------------- | --------- |
  | Output Path      | /downloads |
  | Filename         | invoice.pdf |
  | Format           | Letter    |
  | Print Background | true      |
  | Margins          | 2cm/1cm   |

应用场景：

• 自动生成网页快照
• 创建可打印的报告文档
• 存档重要页面内容

内容提取

Given I navigate to website "https://example.com/article"
When I extract all visible text from the page
Then I should see the article content in plain text without hidden elements

提取方式对比：

• 可见文本：过滤掉隐藏元素，只获取用户实际看到的内容
• 完整HTML：获取页面完整结构，包括元数据和脚本
• 特定元素：可针对特定区域进行精确提取

最佳实践建议

1. 错误处理：在关键步骤后添加验证点，确保操作成功
2. 等待策略：合理使用隐式等待，避免因网络延迟导致失败
3. 选择器优化：优先使用稳定的元素定位方式（如data-testid）
4. 模块化设计：将常用操作封装为可复用的步骤
5. 结果验证：不仅验证操作是否执行，还要验证预期结果

通过掌握这些功能，开发者可以构建出强大而稳定的浏览器自动化流程，满足各种测试和爬取需求。Playwright MCP Server 的自然语言接口大大降低了自动化测试的门槛，让非技术人员也能参与自动化流程的创建和维护。

mcp-playwright Repository contains Playwright Model Context Protocol to automate Browser and APIs 项目地址: https://gitcode.com/gh_mirrors/mc/mcp-playwright