Playwright MCP - 代理项目

这个项目将Playwright与MCP（模型上下文协议）结合，用于Web系统的自动化测试。

🚀 设置

先决条件

Node.js 18及以上版本
npm 或 yarn

安装

# Instalar dependências
npm install

# Instalar navegadores do Playwright
npm run install:browsers

# Configurar variáveis de ambiente
cp .env.example .env
# Editar o arquivo .env com suas credenciais

🔐 环境变量设置

1. 复制示例文件：

cp .env.example .env

2. 编辑文件 `.env` 凭借其资格：

# Ambiente atual (HML ou PROD)
ENVIRONMENT=HML

# URLs dos ambientes
NEMESYS_URL_HML=
NEMESYS_URL_PROD=

# Credenciais HML
NEMESYS_USER_HML=seu_usuario_hml
NEMESYS_PASSWORD_HML=sua_senha_hml

# Credenciais PROD
NEMESYS_USER_PROD=seu_usuario_prod
NEMESYS_PASSWORD_PROD=sua_senha_prod

3. ⚠️ 重要提示：

文件 .env 在……里（或：在……中） .gitignore e 不会被提交 用于存储库
这保护了您的敏感凭证
使用文件 .env.example 作为模型

4. 在不同环境之间切换：

# Editar ENVIRONMENT no arquivo .env
ENVIRONMENT=HML  # ou PROD

# Ou definir via linha de comando
ENVIRONMENT=PROD npm test

🧪 进行测试

可用命令

# Executar todos os testes
npm test

# Executar testes com interface visual
npm run test:ui

# Executar testes em modo debug
npm run test:debug

# Executar testes com navegador visível
npm run test:headed

# Ver relatório de testes
npm run test:report

# Executar servidor MCP
npm run mcp:start

# Explorar site Angular e executar testes de segurança
npm run mcp:explore

# Gerar testes baseados na exploração
npm run mcp:generate

# Processo completo: explorar + gerar + executar testes
npm run mcp:run

# Executar testes BDD baseados em instruções
npm run mcp:bdd

# Testar configurações de geolocalização
npm run test:geolocation

# Executar MCP e interface de testes simultaneamente
npm run dev

特定测试

# Executar apenas testes de autenticação
npx playwright test tests/nemesys-auth.spec.js

# Executar apenas testes MCP
npx playwright test tests/nemesys-mcp.spec.js

# Executar apenas testes BDD e MCP
npx playwright test tests/nemesys-bdd-mcp.spec.js

# Executar apenas testes gerados automaticamente
npx playwright test tests/auto-generated-tests.spec.js

# Executar em ambiente específico
NODE_ENV=prod npx playwright test

📁 项目结构

playwright-mcp/
├── config.js                 # Configurações do projeto
├── global-setup.js           # Setup global dos testes
├── mcp-server.js             # Servidor MCP
├── playwright.config.js      # Configuração do Playwright
├── package.json              # Dependências e scripts
├── tests/                    # Testes
│   ├── nemesys-auth.spec.js      # Testes de autenticação
│   ├── nemesys-mcp.spec.js       # Testes com MCP
│   ├── nemesys-bdd-mcp.spec.js   # Testes BDD e MCP
│   └── auto-generated-tests.spec.js # Testes gerados automaticamente
├── screenshots/              # Screenshots dos testes
├── test-results/             # Relatórios de teste
└── README.md                 # Este arquivo

🌍 地理定位设置

该项目包含了特定的设置，用以模拟巴西用户并绕过NEMESYS的地理限制：

坐标圣保罗（-23.5505，-46.6333）
时区美国/圣保罗
语言pt-BR 翻译成中文是：葡萄牙语（巴西）
用户代理巴西版Chrome Windows
权限地理定位已启用

地理定位测试

npm run test:geolocation

这个命令用于检查配置是否正常工作以及登录字段是否已启用。

🤖 MCP（可能指某种测试或评估框架）自动测试生成器

MCP系统现在包含一个自动生成测试场景的工具，该工具：

🔍（放大镜图标，通常用于表示搜索、查看细节或调查等含义）网站自动分析

自动探索NEMESYS网站
识别表单、按钮、链接和输入字段
绘制导航结构图
生成详细的分析报告

🧪 试管/实验（的标志）生成测试场景

导航测试链接和页面导航
表格表单填写和提交测试
按钮测试按钮交互
输入字段字段验证测试
响应性测试不同的屏幕分辨率

🚀 表情符号“🚀”在中文中通常被直接保留为“🚀”，它代表火箭或快速上升的意思，常用于表达快速进展、激动或兴奋的情绪。在没有特定上下文的情况下，这个符号本身无需翻译，直接使用即可。执行测试

持续测试按顺序执行所有场景
单独测试每次测试都会单独打开和关闭浏览器
自动截图捕捉每一步的证据
详细报告生成包含结果的JSON报告

🎯 目标/靶心高级全面勘探

🔍 看起来像放大镜的符号，通常用于表示搜索、查看细节或放大查看。在中文中，可以简单翻译为“🔍（放大镜/查看）”。不过，具体翻译可能根据上下文有所不同。高级MCP探索者

全面测绘登录后探索网站的所有功能
菜单分析测试所有菜单和导航链接
表单验证使用巴西随机数据测试表单
信息检测识别成功、错误和警告消息
模式分析检测并测试模态框和弹出窗口
随机数据使用巴西真实数据（身份证号、电话、地址）

⚡（闪电符号，无具体含义，可表示速度、能量或警示等）针对Angular的特定安全探索

🔍（放大镜图标，通常表示搜索或查看细节）优化版MCP浏览器

角度检测自动识别Angular网站
侧边菜单具体探索Angular侧边菜单
SPA导航单页应用程序中的导航测试
Angular 表单测试响应式表单和模板驱动表单
Angular 路由检测并测试Angular路由
组件识别Angular组件
Angular 等待等待Angular框架完全加载
HTML/XML 报告为 Azure DevOps 生成报告
BDD系统执行基于自然语言指令的测试
Azure 管道在HML（预生产环境）和PROD（生产环境）上执行测试，并生成综合报告。

🧪 表示“实验瓶”或“试管”的意思，常用于描述化学实验或科学实验中的容器。测试场景

侧边菜单导航测试所有侧边栏菜单项
Angular 表单通过菜单测试打开的表单
子菜单测试通过子菜单导航
Angular 消息测试Angular的消息和通知
Angular 路由测试Angular路由导航

🧪 试管/实验（化学或科学实验的象征）生成的全面场景

完整导航测试所有菜单和链接
表单验证使用有效和无效数据进行测试
必填字段必填字段验证测试
系统消息测试消息显示
模态框和弹出窗口测试模态的开启和关闭
响应性在四种不同的分辨率下测试

📊（表格）真实测试数据

名字常见的巴西名字
电子邮件有效的巴西电子邮件地址
电话巴西电话号码
CPF（公积金）有效的CPF（巴西个人纳税人识别号）用于测试
地址巴西地址
公司巴西公司名称

🔍 MCP功能

MCP服务器提供以下工具：

导航至URL导航到特定的URL
点击元素点击页面上的一个元素
填充输入填写一个输入框
获取页面内容获取当前页面的内容
截取屏幕截图对页面进行截图
等待元素出现等待页面上的某个元素出现

🎯 已实施的测试

1. 身份验证测试`nemesys-auth.spec.js`)

✅ 使用有效凭据登录
✅ 测试无效凭据
✅ 登录后的导航
✅ 验证仪表板元素

2. MCP测试（`nemesys-mcp.spec.js`)

✅ 通过MCP指令实现自动化
✅ 特定功能测试
✅ 生成测试报告
✅ 自动截图

3. BDD（行为驱动开发）和MCP（可能是指某种特定测试或认证，具体需根据上下文确定，此处直译为“MCP测试”）测试`nemesys-bdd-mcp.spec.js`)

✅ 组织有序且灵活的BDD（行为驱动开发）场景
✅ 可重用的MCP命令
✅ 10个预定义测试场景
✅ 登录和浏览的辅助功能
✅ 表单、按钮、表格和响应式设计的测试
✅ 必填字段验证
✅ 消息和通知测试
✅ 模态框和弹窗测试

4. 自动生成的测试用例`auto-generated-tests.spec.js`)

✅ 针对Angular网站的专项探索
✅ Angular 侧边菜单测试
✅ 单页应用（Single Page Application）导航
✅ Angular 表单测试
✅ Angular 子菜单测试
✅ Angular 消息测试
✅ Angular 路由测试
✅ 等待Angular框架加载

🎭 表示戏剧或表演的符号。 BDD（行为驱动开发）系统

📋 翻译为中文是：清单 BDD（行为驱动开发）指令

MCP系统支持基于自然语言指令的测试执行：

# Executar testes BDD
npm run mcp:bdd

📝（记事本/笔记）指令格式

指令是在文件中定义的 bdd-instructions.txt：

# Navegação
CLICK: .sidebar-menu-item:Usuários
CLICK: .submenu-item:Cadastrar Usuário
WAIT: 2000

# Formulários
FILL: input[name="nome"]:João Silva
FILL: input[name="email"]:joao@email.com
SELECT: select[name="cargo"]:Administrador
CLICK: button[type="submit"]

# Validações
VERIFY: .success-message:Usuário cadastrado com sucesso
VERIFY: .error-message
VERIFY: input[name="email"]:invalid

# Screenshots
SCREENSHOT: usuario-cadastrado.png

🎯（目标）支持的操作（或“支持的动作”）

点击点击元素
填充填写字段
SELECT（在数据库查询语句中，表示“选择”的意思）选择选项
检查选中/取消选中复选框
验证检查状态或文本
导航浏览URL
刷新重新加载页面
返回/前进浏览器导航
等一下等待特定时间
等待等待元素出现/消失
屏幕截图截取屏幕截图

🚀 表情符号“🚀”在中文中通常被理解为“火箭”或“快速前进”的意思，但直接翻译时，由于它是一个图形符号，没有固定的中文文字对应，所以一般会保留原样或根据上下文解释为“火箭”或“快速”的意象。如果要在句子中使用，可以翻译为“🚀（火箭/快速）”。不过，具体翻译还需结合语境来判断。 Azure DevOps 管道

📋（清单/待办事项列表）管道配置

管道配置在一个单独的文件中：

azure-pipelines.yml完整的流水线，执行所有测试

🎯 完整流程：

✅ 已配置的变量 在文件中
✅ 无需设置 Azure DevOps 中的变量
✅ 执行所有测试 在一个单一的流水线中：

- HML测试 - PROD 测试（仅在 main 分支中）

✅ 合并报表 所有的测试中
✅ 立即起效 无需额外配置

📋 流程阶段：

构建安装依赖项并准备环境
HML测试在测试环境中执行测试
PROD 测试在生产环境中执行测试（仅限main分支）
报告合并所有报告

🎯 目标管道阶段

✅（这个符号在中文中通常表示“正确”、“对”或“确认”的意思，但直接翻译时没有对应的中文文字，所以保持原样） 构建与准备安装 Node.js、Playwright 及其依赖项
✅ HML测试探索并测试验证环境
✅ PROD 测试在生产环境中执行测试（仅限主分支）
✅ 综合报告生成HTML和XML报告
✅ 文物（或工艺品）提供报告下载服务

📊（表格） Azure 上的报告

HTML（超文本标记语言）交互式可视化报告
XML（可扩展标记语言）JUnit 报告到 Azure DevOps
屏幕截图测试的视觉证据
指标通过/未通过的情景图表
下载所有报告均可下载

📊 报告

测试生成多种格式的报告：

HTML（超文本标记语言）交互式可视化报告
JSON（JavaScript对象表示法）结构化数据用于分析
JUnit与持续集成/持续部署（CI/CD）兼容
屏幕截图自动截图

🔧 高级设置

超时

行动30秒
导航30秒
元素10秒

支持的浏览器

Chrome/Chromium
Firefox（火狐浏览器）
Safari/WebKit
边缘
移动版Chrome
移动版Safari浏览器

执行模式

无头的在后台运行
（朝着……方向）出发的；率领的具有可视化界面
调试调试模式
UI（用户界面）交互式界面

🚨 故障排除

常见问题

连接错误

- 检查NEMESYS的URL是否可访问 - 确认凭据在（此处） config.js

登录字段已禁用

- 执行 npm run test:geolocation 以验证地理位置 - 检查地理位置设置是否正确 - 该网站可能已更改了位置验证方式。

未找到元素

- 测试使用了多个选择器以提高兼容性 - 检查页面结构是否已更改

测试中的超时

- 增加超时时间 playwright.config.js - 检查连接速度

日志与调试

# Executar com logs detalhados
DEBUG=pw:api npm test

# Executar em modo debug
npm run test:debug

📝 贡献

要添加新的测试：

创建一个新文件在 tests/
使用标准 *.spec.js
导入设置 config.js
遵循现有的命名规范

📄 许可证

MIT 许可证 - 详见 LICENSE 文件。

🆘 支持

如有疑问或问题：

检查错误日志
请查阅 Playwright 的文档
检查NEMESYS的设置
联系开发团队

Agent MCP Playwhite Test Web

快速接入

详细介绍

Playwright MCP - 代理项目

🚀 设置

先决条件

安装

🔐 环境变量设置

1. 复制示例文件：

2. 编辑文件 .env 凭借其资格：

3. ⚠️ 重要提示：

4. 在不同环境之间切换：

🧪 进行测试

可用命令

特定测试

📁 项目结构

🌍 地理定位设置

地理定位测试

🤖 MCP（可能指某种测试或评估框架）自动测试生成器

🔍（放大镜图标，通常用于表示搜索、查看细节或调查等含义） 网站自动分析

🧪 试管/实验（的标志） 生成测试场景

🚀 表情符号“🚀”在中文中通常被直接保留为“🚀”，它代表火箭或快速上升的意思，常用于表达快速进展、激动或兴奋的情绪。在没有特定上下文的情况下，这个符号本身无需翻译，直接使用即可。 执行测试

🎯 目标/靶心 高级全面勘探

🔍 看起来像放大镜的符号，通常用于表示搜索、查看细节或放大查看。在中文中，可以简单翻译为“🔍（放大镜/查看）”。不过，具体翻译可能根据上下文有所不同。 高级MCP探索者

⚡（闪电符号，无具体含义，可表示速度、能量或警示等） 针对Angular的特定安全探索

🔍（放大镜图标，通常表示搜索或查看细节） 优化版MCP浏览器

🧪 表示“实验瓶”或“试管”的意思，常用于描述化学实验或科学实验中的容器。 测试场景

🧪 试管/实验（化学或科学实验的象征） 生成的全面场景

📊（表格） 真实测试数据