使用说明

剧作家MCP框架

一个全面的Playwright TypeScript框架，具有模块化架构，用于可扩展的UI和API自动化测试。

🏗️ 建筑

该框架遵循模块化布局，旨在实现可扩展性、清晰度和可维护性：

playwright-mcp-framework/
├── tests/                    # UI and API test cases
│   ├── example.spec.ts      # Basic UI test examples
│   ├── auth.spec.ts         # Authentication workflow tests
│   ├── workflow.spec.ts     # Workflow interaction tests
│   ├── api.spec.ts          # API testing examples
│   ├── framework.spec.ts    # Framework verification tests
│   └── complete-demo.spec.ts # Complete demo tests
├── testcontexts/            # Reusable test contexts
│   ├── setup.context.ts     # Setup and teardown utilities
│   ├── auth.context.ts      # Authentication helpers
│   ├── workflow.context.ts  # Common workflow utilities
│   ├── api.context.ts       # API testing utilities
│   └── index.ts             # Context exports
├── .github/workflows/       # CI/CD workflows
│   └── playwright.yml       # GitHub Actions workflow
├── playwright.config.ts     # Playwright configuration
├── tsconfig.json           # TypeScript configuration
├── Dockerfile              # Docker containerization
├── docker-compose.yml      # Docker Compose setup
└── package.json            # Project dependencies

🎯 主要特点

1. 测试组织 (`tests/`)

按功能/模块组织的UI测试用例
具有RESTful功能的API测试
框架验证测试
支持并行执行和测试隔离

2. 可重用的测试上下文 (`testcontexts/`)

设置上下文：处理测试初始化、导航和清理
AuthContext：管理身份验证工作流（登录、注销、会话处理）
工作流上下文：提供常见的UI交互实用程序（窗体、元素、等待）
API上下文：带有请求/响应验证的RESTful API测试

3. 配置 (`playwright.config.ts`)

浏览器支持：Chromium、Firefox、WebKit、移动Chrome、移动Safari
记者：HTML、JSON、JUnit、Allure和List报告器
重试：在CI环境中自动重试
人工制品：自动生成的屏幕截图、视频和故障痕迹

4. CI/CD集成

GitHub 操作：推送/PR上的自动测试执行
通知：测试结果的Slack和电子邮件通知
矩阵测试：跨多个浏览器并行执行
工件上传：自动上传测试报告和结果

5. Docker支持

容器化：在隔离的Docker容器中运行测试
Docker Compose：通过多容器配置轻松设置
一致的环境：跨所有平台的相同测试环境

6. 高级报告

诱惑报告：具有历史记录的丰富交互式测试报告
多种格式：HTML、JSON、JUnit，满足不同需求
屏幕截图和视频：测试执行的视觉证据
测试趋势：历史数据和趋势分析

🚀 入门指南

先决条件

已安装Node.js 16+
npm或yarn包管理器

安装

克隆存储库：

git clone https://github.com/SouvikMandal007/playwright-mcp-framework.git
cd playwright-mcp-framework

安装依赖项：

npm install

安装Playwright浏览器：

npx playwright install

📝 用法

运行测试

# Run all tests
npm test

# Run tests in headed mode (with browser UI)
npm run test:headed

# Run tests in debug mode
npm run test:debug

# Run tests in UI mode
npm run test:ui

# Run specific test file
npx playwright test tests/example.spec.ts

# Run tests on specific browser
npx playwright test --project=chromium

查看报告

# Open HTML report
npm run report

写作测试

使用测试上下文的示例：

import { test, expect } from '@playwright/test';
import { SetupContext, AuthContext, WorkflowContext } from '../testcontexts';

test.describe('My Feature Tests', () => {
  let setupContext: SetupContext;
  let authContext: AuthContext;
  let workflowContext: WorkflowContext;

  test.beforeEach(async ({ page, context }) => {
    setupContext = new SetupContext(page, context);
    authContext = new AuthContext(page, context);
    workflowContext = new WorkflowContext(page);
  });

  test('should login and perform action', async ({ page }) => {
    // Navigate to page
    await setupContext.navigateTo('https://example.com');
    
    // Perform login
    await authContext.login('user@example.com', 'password');
    
    // Interact with UI
    await workflowContext.fillForm({ field1: 'value1' });
    await workflowContext.submitForm();
    
    // Assert results
    expect(await setupContext.getPageTitle()).toContain('Success');
  });
});

🔧 配置

浏览器配置

编辑 playwright.config.ts 自定义：

超时设置
并行执行
重试策略
报告器选项
浏览器项目

环境变量

BASE_URL：测试的基本URL（默认值：http://localhost:3000)
CI：启用特定于CI的配置（重试、并行工作器）

📊 人工制品

所有测试工件都是在以下位置自动生成的：

test-results/：测试执行结果、视频、跟踪
playwright-report/：HTML测试报告
screenshots/：自定义屏幕截图（如果已拍摄）

🧪 测试上下文

设置上下文

处理测试初始化和常见操作：

navigateTo(url)：导航到URL
waitForPageLoad()：等待页面完全加载
clearStorage()：清除Cookie和存储
takeScreenshot(name)：拍摄自定义屏幕截图
getPageTitle()：获取当前页面标题

AuthContext

管理身份验证工作流：

login(username, password)：执行登录
logout()：执行注销
isAuthenticated()：检查身份验证状态
setAuthToken(token)：直接设置身份验证令牌
saveAuthState(path)：保存身份验证状态以供重用

工作流上下文

提供UI交互实用程序：

fillForm(data)：填写多个表单字段
submitForm()：提交表格
waitForElement(selector)：等待元素可见性
scrollToElement(selector)：将元素滚动到视图中
dragAndDrop(source, target)：执行拖放操作
waitForAPIResponse(url)：等待API响应
mockAPIRequest(url, data)：模拟API请求

API上下文

REST API测试实用程序：

get(endpoint, options)：发出GET请求
post(endpoint, data, options)：发出POST请求
put(endpoint, data, options)：发出PUT请求
patch(endpoint, data, options)：提出PATCH请求
delete(endpoint, options)：发出DELETE请求
setAuthToken(token)：设置身份验证令牌
verifyStatus(response, code)：验证响应状态
verifyResponseContains(response, data)：验证响应数据

🐳 Docker支持

在容器中运行测试以获得一致的环境：

# Using docker-run.sh script
./docker-run.sh

# Using Docker directly
docker build -t playwright-framework .
docker run --rm -v "$(pwd)/test-results:/app/test-results" playwright-framework npm test

# Using Docker Compose
docker-compose up

看医生.md 查看完整的Docker文档。

🔔 通知

获取自动测试结果通知：

Slack通知

在GitHub存储库机密中配置Slack webhook：

SLACK_WEBHOOK_URL: Your Slack webhook URL

邮件通知

在GitHub secrets中配置电子邮件设置：

EMAIL_SERVER, EMAIL_PORT, EMAIL_USERNAME, EMAIL_PASSWORD, EMAIL_TO

看通知.md 有关设置说明。

📊 API测试

完整的REST API测试支持：

import { test } from '@playwright/test';
import { APIContext } from '../testcontexts';

test('API test', async ({ request }) => {
  const api = new APIContext(request, 'https://api.example.com');
  const response = await api.get('/users/1');
  await api.verifyStatus(response, 200);
});

运行API测试：

npm run test:api

看 API测试.md 获取完整的API测试指南。

📈 诱惑报告

生成丰富的交互式Allure报告：

# Run tests and generate Allure report
npm test
npm run report:allure

Allure提供：

交互式测试结果
历史趋势
测试执行时间表
故障分类
屏幕截图和视频

看 ALLURE.md 用于Allure设置和使用。

🎨 最佳实践

使用测试上下文：利用可重用的上下文，而不是重复代码
组织测试：描述块中的组相关测试
清洁状态：使用 beforeEach 用于测试隔离
有意义的名字：使用描述性测试和变量名称
正确等待：使用显式等待而不是硬编码延迟
断言：包括有意义的断言消息
人工制品：让框架在失败时自动生成工件
API+用户界面：结合API和UI测试实现全面覆盖

🔒 CI/CD集成

该框架包括一个完整的GitHub Actions工作流，其中包括：

多浏览器并行执行
自动重试测试
工件上传（报告、截图、视频）
Slack和电子邮件通知
多种报告格式

工作流在以下情况下自动触发：

推动主/主/开发分支
拉取请求
手动工作流调度

看 .github/workflows/playwright.yml 以获取完整的工作流配置。

📚 文档

快速入门指南 -快速开始
Docker设置 -集装箱化指南
API测试 -REST API测试
诱惑报告 -高级报告
通知 -Slack/电子邮件设置
剧作家文档
TypeScript文档

🤝 贡献

欢迎投稿！请遵循以下指南：

创建要素分支
为新功能编写测试
确保所有测试通过
提交拉取请求

📄 许可证

MIT许可证