大语言模型

基于AI（LLM）和Playwright MCP（模型上下文协议）的测试自动化

2025 年 7 月 7 日

GenAI与Playwright MCP强强联合，为测试自动化带来革命性突破，解决传统测试的痛点。核心内容： 1. MCP协议如何连接LLM的思考能力与Playwright的自动化执行 2. 使用VS Code和Claude工具快速搭建Playwright MCP测试环境 3. 分析该技术组合的潜在挑战与应对方案

以下为作者观点：

在快节奏的软件开发领域，大规模交付高质量应用始终是一项挑战。传统测试自动化虽然功能强大，但常面临动态用户界面、不稳定测试和耗时的脚本维护等难题。生成式AI（GenAI）与Playwright MCP（模型上下文协议）——这对改变游戏规则的组合，正在重新定义现代测试自动化。

MCP（模型上下文协议）

本文将探讨这些技术如何协同简化QA流程、提升效率，并赋能测试人员专注于战略任务，同时也会分析使用LLM和Playwright MCP的潜在挑战。

本文涵盖内容

• MCP（模型上下文协议）的演进
• MCP架构与核心组件
• 模型上下文协议（MCP）的工作原理
• MCP服务器示例
• 什么是Playwright MCP？
• 为什么GenAI + Playwright MCP是变革性组合？
• 使用VS Code设置Playwright MCP
• 使用Claude Desktop设置Playwright MCP
• 使用Claude Cursor设置Playwright MCP
• 使用Claude Desktop执行测试用例示例
• 使用Cursor执行测试用例示例
• 将大型语言模型（LLM）与Playwright模型上下文协议（MCP）结合使用的潜在挑战

问题陈述

ChatGPT、Gemini、Claude和DeepSeek等大型语言模型（LLM）是强大的工具，可处理复杂查询、生成代码、撰写邮件，甚至模拟对话——全部通过自然语言实现。但有一个限制：

🤔 LLM能“思考”，但不能“行动”。

LLM的局限性

LLM旨在理解和生成类人文本，但缺乏直接与外部资源交互的能力：

• 打开浏览器：无法指令LLM启动浏览器并执行导航网站、点击按钮等操作。
• 数据库连接：LLM无法连接数据库获取或更新记录。
• API交互：LLM可生成API请求代码，但无法执行请求或处理实时响应。

LLM负责“思考”（如生成提示、代码或逻辑），MCP负责“行动”（如执行操作、连接资源和自动化工作流）。

MCP的演进

以编程方式与Web交互的能力变得愈发重要。此时GenAI通过利用Claude等大型语言模型（LLM）或自定义AI框架介入，为测试自动化引入智能，支持自然语言测试创建、自修复脚本和动态适应性。实现这种协同效应的桥梁是模型上下文协议（MCP），这是一种标准化接口，将GenAI的认知能力与Playwright的自动化优势连接起来。

MCP的角色

MCP通过提供集成多个组件（包括浏览器、数据库、API等）的框架，弥合LLM与现实应用之间的差距。与LLM不同，MCP旨在编排涉及外部资源的复杂工作流。

例如：
• 浏览器自动化：MCP可打开浏览器、导航至特定URL，并执行填写表单或抓取数据等操作。
• 数据库操作：MCP可连接数据库、运行查询并处理结果，支持动态数据驱动应用。
• API集成：MCP可调用API、处理响应，并将数据传递给其他组件进一步处理。

MCP架构与核心组件

如前所述，模型上下文协议（MCP）是Anthropic发布的开源协议，旨在为大型语言模型（如Claude）创建与数据库、API或工具等外部系统交互的一致方法。

通过标准化这种通信，MCP确保LLM可无缝集成各种外部资源，而无需为模型和系统的每种组合定制解决方案。

其核心采用客户端-服务器架构，主机应用可连接多个服务器：

• MCP主机：如Claude Desktop、Cursor、VS Code IDE等希望通过MCP访问数据的程序或AI工具。
• MCP客户端：与服务器保持1:1连接的协议客户端。
• MCP服务器：通过标准化MCP暴露特定功能的轻量级程序。每个独立服务器通常专注于特定集成点，如用于仓库访问的GitHub或用于数据库操作的PostgreSQL。
• 本地数据源：MCP服务器可安全访问的计算机文件、数据库和服务。
• 远程服务：MCP服务器可连接的互联网外部系统（如通过API）。

模型上下文协议（MCP）如何工作？

如前所述，模型上下文协议（MCP）是Anthropic发布的开源协议，旨在为大型语言模型（如Claude）创建与数据库、API或工具等外部系统交互的一致方法。

通过标准化这种通信，MCP确保LLM可无缝集成各种外部资源，而无需为模型和系统的每种组合定制解决方案。

MCP工作流程

以使用Claude Desktop的LLM（Claude）为例，尝试理解MCP的工作方式：

1. 用户→Claude Desktop
请求外部工具操作：用户要求Claude执行需要工具的操作，如打开文件、浏览网页或登录某处。

2. Claude Desktop→MCP客户端
启动MCP协议握手：Claude请求MCP客户端连接可用的MCP服务器，查看其提供的工具。

3. MCP客户端→MCP服务器
连接阶段：MCP客户端尝试连接所有配置的MCP服务器（如服务器1和服务器2）。

4. 能力发现阶段
MCP客户端发送：“你提供哪些能力？”
每个服务器响应：可用工具、资源和提示列表。

5. MCP客户端→Claude Desktop
Claude接收收集的信息并注册发现的能力，即知晓可用工具并可在对话中使用。

6. Claude Desktop→用户
Claude通知用户工具和资源已准备就绪，现在可处理原始用户请求（如打开浏览器、登录、获取文件等）。

MCP服务器示例

以下是一些MCP服务器示例：

• PostgreSQL MCP服务器：对连接的PostgreSQL数据库执行只读SQL查询，通过限制操作仅为数据检索确保安全。
• MySQL MCP服务器：执行只读MySQL查询，用于验证测试数据或获取测试相关指标。
• Selenium MCP服务器：通过Selenium WebDriver的模型上下文协议促进浏览器自动化，支持Chrome和Firefox浏览器。
• GitHub MCP服务器：自动化推送代码和分析仓库等操作。
• Playwright MCP服务器：使LLM或代理能够使用结构化命令控制Playwright管理的浏览器。
• Docker MCP服务器：通过自然语言控制Docker容器、镜像和卷。

什么是Playwright MCP？

Playwright MCP是充当大型语言模型（LLM）或其他代理与Playwright管理的浏览器之间桥梁的服务器。它支持结构化命令执行，使AI能够控制网页交互，如导航、表单填写或断言。MCP的独特之处在于其依赖浏览器的可访问性树——一种UI元素的语义层次表示，而非基于截图的视觉解释。

在快照模式下，MCP提供实时可访问性快照，详细说明角色（如按钮）、标签（如“提交”）和状态（如禁用）。这种方法轻量且精确，而视觉模式虽使用截图处理自定义UI，但速度较慢且可靠性较低。通过优先考虑可访问性树，MCP实现了无与伦比的速度、可靠性和资源效率。

可访问性树——回顾

可访问性树是辅助技术“查看”Web应用的方式，包含元素信息如：
• 角色（如按钮、文本框）
• 名称（如描述元素的标签）
• 状态（如已选中、已禁用）
• 层次结构（如父子关系）

MCP的关键特性

• 结构化数据交换：MCP提供DOM的可访问性快照（角色、标签、状态），使AI更易理解和与Web元素交互。
• 实时交互：支持AI基于实时浏览器状态动态调整测试流程，减少不稳定测试。
• 工具无关设计：MCP的开放标准可与各种AI模型和自动化框架集成，与Playwright强大的API结合时尤为出色。

在Playwright语境中，MCP充当位于AI模型和浏览器之间的服务器，将高级测试指令转换为可执行脚本，同时处理动态UI或跨浏览器差异等复杂性。

为什么GenAI + Playwright MCP是变革性组合？

将GenAI与Playwright MCP结合开启了测试自动化的新范式，解决了长期困扰QA团队的痛点。具体如下：

1.自然语言测试创建

想象用纯英文编写测试用例而无需触碰一行代码。借助GenAI和MCP，测试人员可描述场景，如“导航至登录页面，输入有效凭证，并验证仪表盘加载”。AI通过MCP解释该描述，生成Playwright脚本，例如：

await page.goto('https://example.com/login');await page.fill('#username', 'testuser');await page.fill('#password', 'secure123');await page.click('button[type="submit"]');await expect(page.locator('.dashboard')).toBeVisible();

2.自修复测试

UI变更（如按钮重命名或选择器更新）是测试失败的主要原因。由MCP驱动的GenAI可实时分析DOM并针对这些变更调整脚本。例如，若按钮ID从submit-btn变为login-btn，AI会检测新上下文并更新脚本，节省数小时手动维护时间。

3.动态测试适配

现代应用常根据用户上下文（如已登录 vs. 匿名用户）表现不同。MCP使GenAI能够理解这些变化并动态调整测试流程，确保全面覆盖而无需冗余脚本。

4.更快的测试用例生成

GenAI可分析应用行为并为边缘情况或易失败区域建议测试用例。例如，它可能提议测试表单对无效输入的错误处理，MCP随后将其转换为Playwright测试，缩短实现高测试覆盖率的时间。

5.可扩展性与集成

Playwright MCP可与CI/CD管道（如GitHub Actions、Jenkins）及Claude Desktop或Cursor IDE等工具无缝集成。像https://github.com/microsoft/playwright-mcp这样的社区项目进一步增强其功能，支持API测试和容器化环境。

使用VS Code设置Playwright MCP

在VS Code中设置Playwright MCP

若要利用Playwright MCP的潜力，需在VS Code中配置它，使AI代理能与Playwright管理的浏览器通信。以下是安装和配置MCP的两种简单方法。

方法1：通过VS Code终端快速设置

最快捷的入门方式是通过VS Code终端注册Playwright MCP服务器，该方法跨平台，适用于VS Code稳定版和Insiders版。

1. 启动VS Code：打开VS Code（稳定版）或VS Code（Insiders版），确保已安装Node.js和npm，因MCP依赖它们执行。

2. 打开终端：导航至“查看 > 终端”或使用快捷键Ctrl + ~（Windows/Linux）或Cmd + ~（macOS）。

对于VS Code稳定版，运行命令：

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

对于VS Code Insiders版，运行命令：

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

确认设置：

此命令注册MCP服务器，使VS Code扩展（如GitHub Copilot或Claude Desktop）在需要浏览器自动化时自动启动它。

通过触发AI驱动任务（如生成Playwright脚本）测试服务器是否正确启动。

方法2：在settings.json中自定义配置

若需更多控制或定制设置，可在VS Code的settings.json文件中手动配置Playwright MCP，此方法适合添加自定义参数或与特定工作流集成。

VS Code设置：

前往“文件 > 首选项 > 设置”或按Ctrl + ,（Windows/Linux）或Cmd + ,（macOS）
点击右上角的“打开设置（JSON）”图标编辑settings.json文件。

添加MCP配置：

在根对象内插入以下JSON结构：

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

Playwright MCP服务器中的可用工具

使用Claude Desktop设置Playwright MCP

Playwright MCP可与Claude Desktop配置，通过自然语言提示实现浏览器自动化，利用Claude的MCP生态系统。

设置步骤：
1. 安装Node.js。
2. 通过npx @playwright/mcp@latest安装Playwright MCP。
3. 编辑claude_desktop_config.json配置Claude Desktop（如在macOS上路径为~/Library/Application Support/Claude/claude_desktop_config.json）：

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

4. 进入Claude设置 → 开发者 → 编辑配置。

完成Claude设置后，可在Claude Desktop中查看工具。

使用Cursor设置Playwright MCP

Cursor是一款AI驱动的IDE，它使用Playwright MCP通过为其Composer功能提供实时浏览器上下文来增强测试自动化和UI开发。

设置步骤：

1. 在Cursor中配置，添加到.cursor/mcp.json。

2. 点击“添加新的全局MCP服务器” → 更新mcp.json文件。

3. 安装Node.js和Playwright MCP via npx @playwright/mcp@latest：

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

使用Claude Desktop执行测试用例

以Claude Desktop为例，执行一个简单测试：

1. 打开网站https://qaautomationlabs.com/
2. 点击“BLOG”标签

在Claude Desktop中输入上述指令并执行，截图显示指令已成功执行。

使用Cursor执行测试用例

以Cursor为例，执行登录和下单测试：
1. 打开@https://www.saucedemo.com/
2. 用用户名和密码登录
3. 点击“登录”按钮
4. 将“Sauce Labs Backpack”添加到购物车
5. 打开购物车
6. 点击“结账”按钮
7. 在名字、姓氏和邮编中填写随机数据
8. 点击“继续”按钮
9. 点击“完成”按钮
10. 验证消息“Thank you for your order!”

截图显示已按指令执行

所有步骤成功完成并验证了消息

注意：需点击“运行工具”执行命令。

潜在挑战

将大型语言模型（LLM）与Playwright模型上下文协议（MCP）结合用于自动化测试，为提升测试效率带来了重要机遇，但也伴随着若干挑战：

1. 安全与数据隐私：当LLM通过MCP管理的配置与敏感数据或安全环境交互时，存在数据泄露风险。
2. 多个MCP服务器的开销：部署多个MCP服务器处理各种任务（如浏览器自动化、数据库查询或API交互）可能使LLM不堪重负。
3. 动态UI处理和iframe问题：Playwright MCP依赖浏览器的可访问性树为LLM提供与Web应用交互的结构化快照。然而，包含iframe、悬停菜单或运行时加载组件的动态用户界面（UI）可能破坏快照准确性。例如，iframe可能导致快照不完整或不正确，进而导致测试执行不可靠。
4. LLM代码生成限制：尽管LLM可生成测试代码，但可能难以处理复杂或高度特定的场景，生成的代码可能不完整、不正确或过于通用，增加了人工干预的需求。
5. 上下文和细节理解：LLM可能难以解释Web应用的复杂逻辑或上下文，尤其是当应用行为依赖复杂业务规则或用户交互时。

结论

随着软件开发周期变得日益快速和复杂，对更智能、更具弹性的测试自动化的需求与日俱增。生成式AI与Playwright MCP的融合标志着向前迈出的关键一步，使团队能够以更高的速度、精度和适应性实现自动化。通过最小化维护开销和智能处理动态界面，这一强大组合不仅提高了测试覆盖率，还使QA专业人员能够专注于高价值的战略活动。

然而，与任何AI驱动的解决方案一样，必须以高度关注安全和数据隐私的态度评估和实施这些技术。确保敏感测试数据受到保护，理解模型行为，并确保集成遵循组织的安全标准。

立即咨询 JOTO

JOTO 提供覆盖企业智能体规划与搭建、AI 平台私有化部署、RAG 知识工程、AI 安全治理、FDE 驻场共创及持续运营优化的全周期 AI 落地服务，帮助企业把验证中的 AI 能力转化为安全、可控、可持续迭代的生产力。联系 JOTO 获取 AI 落地咨询

想把这些做法用到你的业务里?

留下你的场景和痛点,我们帮你判断从哪一步开始。

联系我们

基于AI（LLM）和Playwright MCP（模型上下文协议）的测试自动化

立即咨询 JOTO

想把这些做法用到你的业务里?

开启企业级 AI 落地

填写需求单