Ddn Playwright Automation

DDN剧作家自动化

使用Playwright和MCP集成的DDN仪表板综合E2E测试套件。

🚀 快速开始

# Install dependencies
npm install

# Install Playwright browsers
npm run install:browsers

# Copy environment file
cp .env.example .env

# Run all tests
npm test

# Run tests in UI mode
npm run test:ui

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

# Run specific test suite
npm run test:dashboard
npm run test:analysis
npm run test:failures

📁 项目结构

ddn-playwright-automation/
├── tests/
│   ├── ui/              # UI E2E tests
│   │   ├── dashboard.spec.ts
│   │   ├── manual-analysis.spec.ts
│   │   └── failures.spec.ts
│   └── api/             # API tests
├── pages/               # Page Object Models
│   ├── DashboardPage.ts
│   ├── FailuresPage.ts
│   └── AnalysisPage.ts
├── fixtures/            # Test fixtures
│   └── pageFixtures.ts
├── utils/               # Helper utilities
│   └── helpers.ts
├── config/              # Test configurations
├── reports/             # Test reports and artifacts
├── .github/workflows/   # CI/CD pipelines
└── docs/                # Documentation

🧪 测试套件

仪表板测试

• 加载仪表板页面
• 服务状态验证
• 手动分析触发器
• 搜索和筛选失败
• API错误处理
• 自动刷新验证

手动分析测试

• 导航到分析页面
• 启动/停止分析
• 进度跟踪
• 结果显示
• 错误处理
• 取消工作流程

失败页面测试

• 故障列表显示
• 严重性过滤
• 故障详细信息视图
• 堆栈跟踪显示
• 测试重试功能
• 导出失败数据

🎯 页面对象模型

所有测试都使用页面对象模型（POM）模式进行可维护性：

import { DashboardPage } from '../../pages/DashboardPage';

test('example test', async ({ page }) => {
  const dashboardPage = new DashboardPage(page);
  await dashboardPage.goto();
  await dashboardPage.triggerManualAnalysis();
});

🔧 配置

环境变量

创建 .env 文件包含：

DASHBOARD_URL=http://localhost:5173
API_URL=http://localhost:5006
MONGODB_URI=mongodb+srv://...

剧作家配置

• 浏览器：Chromium、Firefox、WebKit、移动Chrome、移动Safari
• 重试：CI中重试2次，本地重试0次
• 记者：HTML、JSON、JUnit、列表
• 截图：仅在失败时
• 视频：仅在重试时
• 痕迹：第一次重试时

🤖 MCP集成

该项目与模型上下文协议（MCP）集成，用于：

• 测试生成：从用户交互中自动生成测试
• 测试愈合：自动修复损坏的选择器
• 智能断言：人工智能支持的断言建议

看 docs/MCP-INTEGRATION.md 了解详情。

📊 报告

测试执行后：

# View HTML report
npm run report

报告保存到：

• reports/html/ -HTML报告
• reports/results.json -JSON结果
• reports/junit.xml -用于CI的JUnit XML
• test-results/ -屏幕截图和视频

🔄 CI/CD

GitHub操作工作流运行：

• 关于推进主/发展
• 基于pull请求
• 每6小时（预定）
• 并行跨所有浏览器

📝 写作测试

基本测试结构

import { test, expect } from '@playwright/test';
import { DashboardPage } from '../../pages/DashboardPage';

test.describe('Feature Name', () => {
  test('should do something', async ({ page }) => {
    const dashboardPage = new DashboardPage(page);
    await dashboardPage.goto();
    
    await expect(dashboardPage.manualAnalysisButton).toBeVisible();
  });
});

使用夹具

import { test, expect } from '../fixtures/pageFixtures';

test('with fixtures', async ({ dashboardPage }) => {
  await dashboardPage.goto();
  await dashboardPage.triggerManualAnalysis();
});

🐛 调试

# Debug mode (step through tests)
npm run test:debug

# Run with headed browser
npm run test:headed

# Generate test code
npm run codegen

📚 最佳实践

1. 使用页面对象 -将选择器保留在页面类中
2. 正确等待 -使用 waitForLoadState, waitForResponse
3. 原子试验 -每个测试都应该是独立的
4. 有意义的名字 -描述性测试名称
5. 纯净数据 -在测试之间重置状态
6. 处理异步 -始终等待承诺
7. 错误处理 -测试快乐和错误路径

🔗 链接

• 仪表盘: http://localhost:5173
• API: http://localhost:5006
• 詹金斯: http://localhost:8081
• 剧作家文档: https://playwright.dev

👥 贡献

1. 创建特征分支
2. 使用页面对象编写测试
3. 确保所有测试通过
4. 提交拉取请求

📄 许可证

麻省理工学院