在当今快速发展的技术领域，自动化测试已成为软件开发中不可或缺的一部分。它不仅提高了测试效率，还减少了人为错误，确保了软件的高质量交付。今天，我们将深入探讨一款由微软开发的开源自动化测试工具——Playwright，特别是其结合了MCP（Model Context Protocol）协议后的强大功能，如何真正实现“录制为主，编写为辅”的自动化测试。

什么是Playwright？

Playwright是由微软开发的一款开源自动化测试工具，支持多种主流浏览器（如Chromium、Firefox、WebKit）和多种编程语言（如JavaScript、TypeScript、Python、Java等）。通过提供统一的API，Playwright帮助开发者轻松编写跨浏览器的自动化测试脚本。

Playwright的核心优势

1. 跨平台支持

Playwright支持Windows、Linux和macOS，确保在不同操作系统上都能稳定运行。此外，它还支持移动端的Web应用测试（通过模拟Android/iOS设备），虽然不支持真机测试，但对于大多数场景已经足够。

2. 无头和有头模式

Playwright支持无头模式（默认）和有头模式，开发者可以根据测试需求选择合适的运行模式。无头模式适合后台或批处理任务，而有头模式则便于调试和可视化测试。

3. 自动等待机制

Playwright内置自动等待机制，能够智能等待元素加载完成（默认等待时间为30秒），这大大减少了因页面加载延迟导致的测试失败。

4. 强大的元素选择器

Playwright支持多种元素选择器，包括文本选择器和可访问性标签选择器，这使得定位页面元素变得更加灵活和可靠。

5. 网络请求拦截

Playwright支持上下文范围的网络请求拦截，可以存根和模拟网络请求，这对于测试网络依赖的功能非常有用。

Playwright的不足之处

尽管Playwright功能强大，但它也有一些不足之处：

• 不支持旧版浏览器：Playwright不支持旧版Microsoft Edge或IE11，这可能限制了在某些特定环境下的使用。
• SSL证书问题：在访问需要SSL证书的网站时，Playwright可能无法正常录制，需要测试人员单独处理。
• 移动端测试限制：虽然支持移动端Web应用测试，但不支持真机测试。

Playwright与Selenium的对比

与传统的Selenium相比，Playwright在多个方面表现出色。例如，Playwright基于WebSocket协议，能够接收浏览器（服务端）的信号，而Selenium则依赖HTTP协议，只能由客户端发起。此外，Playwright的浏览器上下文并行功能允许在单个浏览器实例下创建多个浏览器上下文，每个上下文可以处理多个页面，这大大提高了测试效率。

Playwright MCP：AI驱动的自动化测试

传统自动化测试依赖于开发者手动编写测试脚本，这不仅耗时，而且容易因页面动态变化而失效。Playwright结合了MCP协议后，通过与大语言模型（LLM）协作，可以通过自然语言描述需求，自动完成浏览器操作。这使得开发人员和测试人员能够像与“同事”对话一样完成一系列复杂任务。

如何配置Playwright MCP？

以下是配置Playwright MCP的示例：

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

你可以使用VS Code CLI安装Playwright MCP服务器：

# For VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

# For VS Code Insiders
code-insiders --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

安装后，Playwright MCP服务器将可用于VS Code中的GitHub Copilot代理。

CLI选项

Playwright MCP服务器支持以下命令行选项：

• --browser <browser>：指定使用的浏览器或Chrome通道。
• --cdp-endpoint <endpoint>：指定要连接的CDP端点。
• --executable-path <path>：指定浏览器可执行文件的路径。
• --headless：以无头模式运行浏览器。
• --port <port>：指定要侦听SSE传输的端口。
• --user-data-dir <path>：指定用户数据目录的路径。
• --vision：运行使用屏幕截图的服务器。

用户数据目录

Playwright MCP将使用新配置文件启动浏览器，配置文件路径如下：

• Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
• macOS: ~/Library/Caches/ms-playwright/mcp-chrome-profile
• Linux: ~/.cache/ms-playwright/mcp-chrome-profile

所有登录信息都将存储在该配置文件中，如果需要清除离线状态，可以在会话之间删除该配置文件。

在Linux上运行带头浏览器，没有DISPLAY

在没有显示的系统上运行带头浏览器时，可以使用DISPLAY环境变量运行MCP服务器，并传递标志以启用SSE传输。

npx @playwright/mcp@latest --port 8931

然后在MCP客户端配置中，将url设置为SSE端点：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/sse"
    }
  }
}

工具模式

Playwright MCP提供两种模式：

1. 快照模式（默认）：使用辅助功能快照以获得更好的性能和可靠性。
2. 视觉模式：使用屏幕截图进行基于视觉的交互。

要使用视觉模式，请在启动服务器时添加--vision标志：

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

视觉模式最适合与基于坐标的交互模型配合使用，这些模型能够与元素在X/Y坐标空间中进行交互。

自定义传输的编程用法

import { createServer } from '@playwright/mcp';
// ...
const server = createServer({ launchOptions: { headless: true } });
transport = new SSEServerTransport("/messages", res);
server.connect(transport);

快照模式与视觉模式

快照模式

Playwright MCP提供了一组用于浏览器自动化的工具，包括导航、点击、输入文本、选择选项、上传文件、按键操作、捕获快照、保存PDF、捕获屏幕截图、等待和关闭页面等。

视觉模式

视觉模式提供了使用屏幕截图进行基于视觉的交互的工具，包括导航、返回、前进、捕获屏幕截图、移动鼠标、点击、拖放、输入文本、按键操作、选择文件、保存PDF、等待和关闭页面等。

写在最后

Playwright结合MCP协议的出现，标志着自动化测试领域从“代码驱动”向“AI驱动”的历史性转变。无论是测试工程师、开发人员还是数据分析师，Playwright都将成为未来工作中不可或缺的效率神器。借助这一技术栈，我们能够大幅提升工作效率，实现更加智能和高效的自动化测试。

希望这篇文章能帮助你更好地了解Playwright及其强大的功能。如果你有任何问题或建议，欢迎在评论区留言，让我们共同探索自动化测试的无限可能！