社区首页 >专栏 >MCP-Playwright：AI自动化神器，一款超级好用的自动化测试框架！

MCP-Playwright：AI自动化神器，一款超级好用的自动化测试框架！

测试开发技术

修改于 2025-08-14 05:05:53

4K030

代码可运行

文章被收录于专栏：测试开发技术测试开发技术

运行总次数：30

代码可运行

本文使用的MCP，来自腾讯云开发者MCP广场。腾讯云开发者社区MCP广场，致力于为用户提供丰富、好用、安全的MCP服务。

在软件开发与测试领域，自动化测试早已成为提升效率、保障质量的核心工具。然而，传统自动化测试框架往往面临代码编写繁琐、跨工具协作困难、操作复杂等痛点。

而今天，给大家介绍一款自动化测试工具：MCP-Playwright，它融合了先进的 AI 技术，不仅能让AI直接操控浏览器，更是通过标准化协议打通了测试工具链，让自动化测试变得像“说话一样简单”，为自动化测试带来了全新的体验。

1、Playwright MCP是个啥东西？

Playwright MCP是一个将大型语言模型（LLM）的强大语言理解与生成能力和 Playwright 卓越的浏览器自动化功能深度融合的创新框架。

Playwright 作为一款知名的开源自动化测试和浏览器操控库，本身就支持 Chrome、Firefox 和 Safari 等多种主流浏览器，能够模拟用户在浏览器中的各种操作，像点击按钮、填写表单、滚动页面、截取屏幕截图等。

而 MCP（Model Context Protocol）作为模型上下文协议，专为大型语言模型（LLM）设计。

它像一座桥梁连接了大语言模型（如Claude、GPT-4）与Playwright浏览器引擎。

传统自动化测试需要人工编写XPath/CSS选择器，而MCP-Playwright只需用自然语言描述需求，AI就能自动解析页面结构并执行操作。

它的工作原理极具创新性。当用户输入一条自然语言指令，例如 “测试某电商网站商品详情页的图片加载是否正常”，指令首先会被发送到与之集成的 LLM。LLM 运用先进的自然语言处理算法，对指令进行深度解析，理解其中的关键信息，如操作的目标网站（某电商网站）、核心动作（测试图片加载）以及特定页面（商品详情页）。随后，LLM 依据 Playwright 的 API 规则，生成相应的可执行代码。以刚才的指令为例，可能生成类似这样的 Python 代码（假设使用 Python 语言结合 Playwright 库）：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('https://www.cnblogs.com/jinjiangongzuoshi/p/18730620')
    page.wait_for_selector('img.product - image')
    image_loaded = page.evaluate('() => document.querySelector("img.product - image").complete')
    if image_loaded:
        print("图片加载正常")
    else:
        print("图片加载异常")
    browser.close()

2、目标群体

Playwright MCP的目标群体主要包括以下几类：

测试开发工程师：该工具基于Playwright提供浏览器自动化能力，适合需要进行网页自动化测试的专业人员，尤其是希望结合大语言模型（LLM）提升测试效率的团队。
数据抓取与分析人员：Playwright MCP支持LLM与网页交互，能够帮助用户完成网页数据抓取、表单填写和截图等操作，满足数据采集和分析需求。
智能代理开发者：对于需要构建智能代理（如自动化任务执行、网页交互）的开发者，Playwright MCP提供了结构化的可访问性接口，便于实现复杂的网页交互功能。
自动化测试框架优化者：传统自动化测试框架常面临代码编写繁琐、跨工具协作困难等问题，Playwright MCP通过简化操作流程，为优化测试框架提供了新思路。
大语言模型应用开发者：Playwright MCP能够将LLM的能力扩展至动态网页交互，适合希望增强模型应用场景的开发者，例如运行JavaScript代码或实现网页自动化操作。

3、快速使用

我们可以直接进入腾讯云开发者MCP广场，搜索mcp-playwright；在页面的右侧通过SSE URL连接服务输入配置信息，进行直接配置。

点击连接Server按钮

在mcp-playwright中，已支持Server下的13个工具，可选择工具进行在线测试

MCP Playwright 的安装过程也很简单，支持多种方式，尤其是对 Claude 的兼容让它格外友好。由于它是一个前端类型项目，所以本地只需要安装 npm 工具即可。

您可以通过以下任一方式安装该包：

npm
mcp-get
Smithery

使用npm安装：

npm install -g @executeautomation/playwright-mcp-server

使用mcp-get安装：

npx @michaellatman/mcp-get@latest install @executeautomation/playwright-mcp-server

使用Smithery安装（自动为Claude Desktop安装Playwright MCP）：

npx @smithery/cli install @executeautomation/playwright-mcp-server --client claude

在VS Code中安装

通过以下按钮之一在VS Code中安装Playwright MCP服务器：

或者使用VS Code CLI安装：

# 对于VS Code
code --add-mcp '{"name":"playwright","command":"npx","args":["@executeautomation/playwright-mcp-server"]}'

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

安装完成后，ExecuteAutomation Playwright MCP服务器将可在VS Code中与您的GitHub Copilot代理一起使用。

配置Claude Desktop，打开 claude-desktop-config.json 文件

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

设置正确，你应该会看到Playwright MCP服务器指向你的本地机器源代码。

您可以使用以下任一命令运行测试：

# 使用自定义脚本运行测试（带覆盖率）
node run-tests.cjs

# 使用npm脚本运行测试
npm test           # 不带覆盖率运行测试
npm run test:coverage  # 带覆盖率运行测试
npm run test:custom    # 使用自定义脚本运行测试（与node run-tests.cjs相同）

测试覆盖率报告将生成在coverage目录中。