在进行自动化测试时，前端页面因为频繁迭代UI 结构常有变动，这往往使得自动化测试的脚本往往“写得快、废得也快”，维护成本极高。

在大模型之前大家往往都会使用录制类工具，但录制类工具生成的代码灵活性较差、定位方式不太合理只能， 页面轻微改动就可能导致脚本完全失效。

然后AI大模型出现后, 测试工程师开始尝试借助大模型（如 ChatGPT）生成测试代码，但因为大模型无法实时获取网页的 DOM 结构和内容，整个开发过程也是相当麻烦，我们需要不断地将页面内容复制给大模型。

这正是 Playwright MCP 想要解决的问题。

Playwright MCP通过MCP协议，大模型不再对网页内容进行乱想瞎猜，而是真实感知DOM和页面结构后再发出操作指令。

因此，测试人员只需用自然语言描述测试需求，就能由模型完成整个测试流程——从打开页面、执行交互、采集结果，到生成可运行的测试代码，极大降低了测试脚本的开发门槛和维护成本。

即便页面结构发生变化，也可以快速地完成测试脚本的开发甚至抛弃测试脚本直接使用Prompt就可以完成稳定的测试，从而真正实现了更智能、更高效、更稳定的自动化测试体验。

什么是Playwright MCP

Playwright MCP是一个主要依赖于浏览器的可访问树的web自动化测试能力的MCP Server。

它允许使用LLM大模型使用结构化命令控制网页浏览器，从而可以快速且更准确的操作浏览器，非常适合网页导航、表单填写、数据提取和自动化测试等任务。

Playwright MCP 的主要优势：

• 快速响应：基于结构化命令，交互更轻量

• 高确定性：避免自然语言歧义，执行结果更可靠

• 易于集成：适用于 Copilot、Cursor 等 AI 编程工具

• 便于调试：多客户端可共享一个浏览器上下文

什么是MCP

MCP（Model Context Protocol） 是一种为大语言模型（LLM）设计的协议，MCP充当 LLM 与实际应用之间的桥梁或“翻译器”，将自然语言转化为结构化指令，使得模型可以更精确、高效地控制外部行为。

通过 MCP，大语言模型可以像调用 API 一样发出导航、点击、输入等指令，并接收结构化反馈，极大增强了模型的上下文理解与操作能力。

MCP使用传统的客服端-服务端架构模式

MCP客户端

可以理解成一个“中间人”，它会把我们发出的自然语言指令通过大模型转换成标准的 MCP 指令，再和 MCP 服务器建立连接，发送请求、接收响应。

MCP服务器

MCP 服务器可以理解为一个 “调度大脑 + 工具集合”，里面封装了很多功能和服务，比如访问文件、操作文件、和网页进行交互等等。

当MCP客户端发来请求时，服务器就从工具箱里找出合适的工具，完成对应的任务。

常用MCP客户端简介

GitHub Copilot + VS Code

GitHub Copilot的Agent模式可以使用MCP的Tools，优点是结合代码环境方便测试与生成自动化逻辑，支持多种插件扩展，使用体验非常流畅便。

缺点是 MCP 工具的集成和识别较不稳定，有时需要重启 VS Code或者电脑才能正确加载 MCP工具。然后当然你还需要额外付出10美金一个月。

Claude Desktop（Antropic）

Claude Desktop 是由 Anthropic 官方推出的桌面客户端，Claude Desktop 在MCP工具调用方面的体验非常出色，响应迅速、调用稳定。

优点：

• 原生支持 MCP 工具，配置简单；

• Claude 模型推理能力强，适合进行多轮复杂对话和自动化流程。

缺点：

• 国内用户注册需使用海外手机号验证；

• 免费账号有 Token 限制，内容稍长容易触发配额限制。

Cherry Studio

Cherry Studio 是由国内开发者打造的一款轻量型桌面客户端，支持接入多个主流厂商的大模型（如 OpenAI、Anthropic、Moonshot 等），但需用户自行配置对应的API Key。

缺点是部分模型集成体验不佳，尤其是在调用Playwright MCP等需要具备连贯推理能力的工具时，可能出现模型停顿、不继续执行等问题，对流畅使用造成较大影响。

目前不推荐用于复杂自动化测试等场景。

Cursor IDE

Cursor 自然不用多介绍了，这是专为 AI 编程设计的 VS Code 分支版本，对于MCP的配置和支持同样十分方便，但是在使用Playwright MCP时出现被判定为可疑行为被阻止的情况

环境准备

前置准备（Prerequisites）

• Node.js

  因为MCP其实就是nodejs程序，要运行MCP我们需要安装Nodejs环境，

  访问 https://nodejs.org/en/download 下载并安装推荐版本。

• Playwright

  安装完 Node.js 后，可以使用以下命令安装 Playwright 及其浏览器依赖：

• -npm install -g playwright：全局安装 Playwright，使其在所有项目中可用

• -npx playwright install：安装 Playwright 所需的 Chromium、Firefox 和 WebKit 浏览器。

安装Playwright MCP

Playwright MCP 有两个常用的实现版本，两个MCP库都可以使用：

• - @playwright/mcp：

由Microsoft官方发布和维护，是最基础、最标准的MCP客户端实现

• - @executeautomation/playwright

  -mcp-server：

  由社区开发者@executeautomation 构建，功能更加丰富，例如支持多页签、截图、保存测试结果等扩展能力，适合进阶使用者或自动化测试场景更复杂的项目。

安装Playwright MCP

• - npm install -g 

@playwright/mcp

• - npm install -g 

  @executeautomation/playwright-mcp-server

输入以下命令验证安装成功

• - npx @playwright/mcp --version

使用 Claude Desktop + 

Playwright MCP 自动生成测试代码实战

步骤一：

在 Claude Desktop 配置 Playwright MCP

1. 打开 Claude Desktop Settings → 切换至 Developer → 点击 Edit Config，打开 claude-desktop-config.json 文件。

2. 添加以下配置来启用 Playwright MCP：

1. {

2.   "mcpServers": {

3.     "playwright": {

4.       "command": "npx",

5.       "args": ["-y", "@executeautomation/playwright-mcp-server"]

6.     }

7.   }

8. }

AI写代码vbscript

3. 保存文件并重启 Claude Desktop，在聊天窗口中就可以看到Playwright MCP提供的Tools了

步骤二：

使用Prompt自动生成测试代码

配置完成后，我们开始演示如何通过Playwright MCP去生成Playwright的测试代码

示例 Prompt：

输入了prompt后，接下来就可以直接发送命令

Please explore https://www.baidu.com and generate a playwright test that performs a search for `LangChain MCP Adapter`.

AI写代码

Claude就会使用Playwright MCP工具执行以下操作：

- 打开默认浏览器，访问百度

- 快照页面结构，识别搜索框；

- 输入关键词LangChain MCP Adapter并点击搜索；

- 验证搜索结果 —— 检查是否出现相关内容的搜索结果

- 关闭浏览器

- 基于执行记录生成完整的 Playwright 测试代码。

感谢每一个认真阅读我文章的人！！！

作为一位过来人也是希望大家少走一些弯路，如果你不想再体验一次学习时找不到资料，没人解答问题，坚持几天便放弃的感受的话，在这里我给大家分享一些自动化测试的学习资源，希望能给你前进的路上带来帮助。

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。

 

          视频文档获取方式：
这份文档和视频资料，对于想从事【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！以上均可以分享，点下方小卡片即可自行领取。