(转载)Playwright MCP操作使用

By - admin
Posted on 2025年12月27日2026年5月14日
Posted in AI世代

(转载)Playwright MCP操作使用

服务简介
Playwright 模型上下文协议 (MCP) 服务器是使用 Playwright 自动化浏览器和 API 测试的强大解决方案。
使用 Playwright MCP 服务器，您可以：
UI 方面

使 LLM 能够在真实的浏览器环境中与网页进行交互。
执行 JavaScript、截取屏幕截图和浏览网页元素等任务。
无缝处理 API 测试以验证端点并确保可靠性。
跨多个浏览器引擎进行测试，包括 Chromium、Firefox 和 WebKit。
控制台日志监控、代码生成、网页抓取、截图功能、JavaScript 执行、基本网络交互（导航、点击、表单填写、下拉选择和悬停）、内容检索（可见文本和 HTML）

接口方面
用于 API 自动化的 Playwright MCP 具有以下主要功能

支持 GET 请求
支持 POST 请求
支持 PATCH 请求
支持 PUT 请求
支持 DELETE 请求

安装环境配置
Git 资源仓库
https://github.com/microsoft/playwright-mcp （官网）
定位：Playwright 官方提供的 Model Context Protocol (MCP) 服务器，用于让大语言模型（LLM）通过结构化的方式（而非像素级视觉）与网页交互。
https://github.com/executeautomation/mcp-playwright （第三方）
定位：一个基于 Playwright 的 MCP 服务器实现，但更侧重于与 Claude Desktop（AI 助手）的集成，提供额外的功能（如生成测试代码、网页抓取等）。
安装 Node.js
确保你的 Mac 上已经安装了 Node.js 18 或更高版本。你可以通过以下命令检查 Node.js 版本：

node -v
如果未安装或版本过低，可以从 Node.js 官网下载下载完直接安装

https://nodejs.org/zh-cn/download
vs code 安装使用 Playwright MCP 服务器
使用 GitHub copilot +playwright mc 使用

第一步安装 copilot

打开 VS Code，点击左侧活动栏的扩展图标（或按 Ctrl+Shift+X / Cmd+Shift+X）。
搜索「GitHub Copilot」，找到由 GitHub 发布的官方扩展。
安装完成后，VS Code 右下角会弹出提示，点击「Sign in to GitHub」。

第二步

Vs code 下载地址：Download Visual Studio Code – Mac, Linux, Windows
从 git hub 进入安装 vs code 安装使用，选择 playwrig 安装的环境，选择 Python 的虚拟环境，之前已经安装过了，用这两种方式都是一样的

安装完可以测试下

第二种方法
直接通过命令行

npm install -g @executeautomation/playwright-mcp-server
npx @playwright/mcp@latest
启动命令

npx -y @executeautomation/playwright-mcp-server
操作命令 contorl +shift +p 或者 command +shift+p 输入用户设置

粘贴命令
{
  「mcpServers」: {
    「playwright」: {
      「command': 'npx',
      「args」: [
        「@playwright/mcp@latest」
      1
    }
  }
}

推荐使用第一种方法比较快
第三步
配置 playwright 驱动环境使用 Python 语言或者 node.js
我使用 Python 语言
安装 playwright:
pip3 install playwright
playwright install chromium
在 vs code 里面选择 Python 环境
实际操作应用
1、图书系统 Ui 自动化测试
导航到我的编程日志网站，清空用户名和密码，输入账号：相思断红肠密码 123456 ，登录成功断言，对图书查询模块进行功能测试，搜索功能、翻页功能测试，对搜索翻页进行截图，对上面步骤的测试结果汇总生成 HTML 测试报告放到当前工作目录
执行发现没有用 playwright mcp 执行，原因是生成 HTML 报告，

重新修改执行命令
导航到我的编程日志网站，清空用户名和密码，输入账号：相思断红肠密码 123456 ，登录成功断言，对图书查询模块进行功能测试，搜索功能、翻页功能测试，对搜索翻页进行截图，对上面步骤的测试结果汇总生成 HTML 测试报告放到当前工作目录使用 playwright mcp 执行
执行结果

第二轮用例

测试报告

测试结论
第一个项目执行，搜索查询出来的数据没有作对比，因为搜索出来的数据不是搜索的关键词，其他都正确。
第二项目，密码 ai 已经识别出填写进去了，但是提交的时候，提示密码没有填写，没有触发 JavaScript 的执行，还是存在着一些缺陷
接口的抓取相当不错，可以提供自行分析
Playwright 执行的流程
免费的模型效果都不好有限制，好点的都要收费，我都开 GitHub copilot 会员
用户与大模型交互：

您向大模型（如 GPT-4）发送请求，描述您想要执行的网页操作，例如「测试黑马商城的注册功能」。

大模型理解并转换为 MCP 命令：

大模型理解您的意图，并将其转换为一系列 Playwright MCP 命令。
这些命令包括网页导航、元素定位、点击操作、输入文本等。

MCP 执行命令：

MCP（Model Context Protocol）接收这些命令。
MCP 启动浏览器实例（如 Chrome）。
它按照大模型的指令顺序执行操作，比如：
- 打开网站
- 填写表单
- 点击按钮
- 等待响应

截取屏幕截图等
结果反馈：

MCP 捕获执行结果（成功/失败）。
它可能会获取页面内容、截图或网络请求信息。
这些信息被发送回大模型。

大模型分析与响应：

大模型分析执行结果和捕获的信息。
它可能会发现问题（如我们的示例中出现的「密码不能为空」错误）。
大模型生成分析报告和建议，并回复给您。

整个流程形成了一个闭环：您提出请求 → 大模型理解并指示 MCP 执行操作 → MCP 执行并收集数据 → 大模型分析结果并回复您。
考虑的问题
Playwright MCP 的优点

跨浏览器兼容性：支持多种主流浏览器
强大的自动等待：减少测试不稳定性
完整的 API：丰富的用户操作模拟能力
网络监控能力：可分析 API 调用和响应
移动设备模拟：支持响应式设计测试

Playwright MCP 的缺点

JavaScript 执行限制：正如您的测试案例所展示的，对于特定的 JavaScript 处理（如密码加密），自动化测试无法完全模拟，导致「密码不能为空」的错误
环境依赖性：需要特定环境配置，可能在不同 CI/CD 系统中遇到兼容问题
动态内容处理困难：对于复杂 JavaScript 渲染的页面，元素定位可能变得困难
维护成本高：UI 变动频繁时需要不断更新脚本
执行速度：端到端测试通常比单元测试或 API 测试慢
不稳定性：可能出现「脆弱」的测试，因网络延迟、动画效果等因素导致失败
特殊交互处理：验证码、第三方支付等特殊交互难以自动化
调试复杂：测试失败时诊断问题可能更困难

针对 playwright mcp 自动化的建议

混合测试策略：结合 API 直接调用和 UI 自动化测试
Mock 服务：简化验证码等流程
直接操作 DOM：使用 evaluateHandle 功能执行 JavaScript
网络请求拦截：分析并模拟真实请求参数
页面源码分析：了解密码处理方式

数据安全性考虑

凭证和敏感信息处理：

Playwright MCP 本身没有内置的凭证加密机制，任何密码或敏感信息都是以明文形式在测试脚本中。
测试中输入的密码、信用卡信息等敏感数据在截图中可能可见，存在泄露风险。
浏览器自动填充的凭证也可能在测试过程中被捕获。

存储安全：

测试过程产生的截图、录像和日志可能包含敏感信息，需要安全存储和适当清理。
测试数据（如测试用户凭证）通常未加密存储在测试代码或配置文件中。

网络安全：

默认情况下，Playwright 没有实施 HTTPS 证书验证，可能使测试容易受到中间人攻击。
测试环境的网络通信可能不如生产环境安全。

环境隔离：

测试可能在共享环境或 CI/CD 管道中运行，可能导致环境间的信息泄露。
不同测试之间的状态分离（如 cookie、localStorage）需要手动管理。

与 AI 集成的特有风险：

当与 AI 模型（如在 MCP 中）结合使用时，可能会将敏感的页面内容暴露给 AI 模型。
AI 模型可能会记忆或学习这些敏感信息，造成潜在的数据泄露。
用户与 AI 的交互记录可能包含敏感信息。

转载于：https://zhuanlan.zhihu.com/p/1932052105406976029

莫妮卡的小屋

(转载)Playwright MCP操作使用

Previous Article

Next Article

搜索

关于本站

找到我