Screen Recorder Demo Skill\r

\r

概述\r

\r 基于 Puppeteer 的自动化端到端测试录制 Skill，支持录制浏览器操作并生成演示视频/GIF。\r \r

功能特性\r

\r

核心功能\r

• 🎥 浏览器操作录制：录制网页操作过程\r
• 🎯 智能区域录制：支持全屏或指定区域录制\r
• 🔄 格式转换：支持 MP4、GIF、WebM 格式\r
• ⚡ 自动化测试集成：与测试框架无缝集成\r \r

高级功能\r

• 📊 性能监控：录制时显示FPS和文件大小\r
• 🎨 视频编辑：添加水印、字幕、片头片尾\r
• 🔧 配置灵活：支持多种录制参数配置\r
• 📱 跨平台：支持 Windows、macOS、Linux\r \r

安装要求\r

\r

系统要求\r

• Node.js 16+\r
• npm 或 yarn\r
• Chrome/Chromium 浏览器\r \r

依赖安装\r

npm install puppeteer puppeteer-screen-recorder ffmpeg-static\r
# 或\r
yarn add puppeteer puppeteer-screen-recorder ffmpeg-static\r
```\r
\r
## 快速开始\r
\r
### 1. 基础录制\r
```javascript\r
const { ScreenRecorder } = require('./scripts/record-browser');\r
\r
const recorder = new ScreenRecorder({\r
  outputPath: './recordings/demo.mp4',\r
  fps: 30,\r
  quality: 80\r
});\r
\r
await recorder.startRecording('https://your-app.com');\r
// 执行操作...\r
await recorder.stopRecording();\r
```\r
\r
### 2. 端到端测试录制\r
```javascript\r
const { recordE2ETest } = require('./scripts/record-test');\r
\r
await recordE2ETest({\r
  url: 'http://localhost:3000',\r
  testSteps: [\r
    { action: 'click', selector: '#login-btn' },\r
    { action: 'type', selector: '#username', text: 'testuser' },\r
    { action: 'type', selector: '#password', text: 'password123' },\r
    { action: 'click', selector: '#submit-btn' }\r
  ],\r
  output: './recordings/login-test.mp4'\r
});\r
```\r
\r
## API 文档\r
\r
### ScreenRecorder 类\r
\r
#### 构造函数\r
```javascript\r
new ScreenRecorder(options)\r
```\r
\r
**options**:\r
- `outputPath` (string): 输出文件路径\r
- `fps` (number): 帧率，默认 30\r
- `quality` (number): 视频质量 0-100，默认 80\r
- `aspectRatio` (string): 宽高比，如 '16:9'\r
- `codec` (string): 视频编码器，默认 'libx264'\r
\r
#### 方法\r
- `startRecording(url, options)`: 开始录制\r
- `stopRecording()`: 停止录制\r
- `pauseRecording()`: 暂停录制\r
- `resumeRecording()`: 恢复录制\r
- `addAnnotation(text, position)`: 添加标注\r
- `addWatermark(imagePath, position)`: 添加水印\r
\r
### 工具函数\r
\r
#### recordE2ETest(config)\r
录制端到端测试过程\r
\r
**config**:\r
- `url` (string): 测试页面URL\r
- `testSteps` (Array): 测试步骤数组\r
- `output` (string): 输出文件路径\r
- `headless` (boolean): 是否无头模式，默认 false\r
\r
#### convertVideo(input, output, options)\r
视频格式转换\r
\r
#### mergeVideos(videos, output)\r
合并多个视频文件\r
\r
## 配置示例\r
\r
### 基础配置\r
```json\r
{\r
  "recorder": {\r
    "fps": 30,\r
    "quality": 80,\r
    "outputDir": "./recordings",\r
    "defaultFormat": "mp4"\r
  },\r
  "browser": {\r
    "headless": false,\r
    "viewport": { "width": 1920, "height": 1080 },\r
    "slowMo": 50\r
  },\r
  "annotations": {\r
    "enabled": true,\r
    "fontSize": 24,\r
    "fontColor": "#ffffff",\r
    "backgroundColor": "#00000080"\r
  }\r
}\r
```\r
\r
### 测试配置\r
```json\r
{\r
  "testSuites": {\r
    "login": {\r
      "url": "http://localhost:3000/login",\r
      "steps": "scripts/test-steps/login.json",\r
      "output": "recordings/login-test.mp4"\r
    },\r
    "dashboard": {\r
      "url": "http://localhost:3000/dashboard",\r
      "steps": "scripts/test-steps/dashboard.json",\r
      "output": "recordings/dashboard-test.mp4"\r
    }\r
  }\r
}\r
```\r
\r
## 与测试框架集成\r
\r
### Jest 集成\r
```javascript\r
// jest.config.js\r
module.exports = {\r
  setupFilesAfterEnv: ['./jest.setup.js'],\r
  reporters: [\r
    'default',\r
    ['./scripts/jest-video-reporter', { outputDir: './test-recordings' }]\r
  ]\r
};\r
```\r
\r
### Playwright 集成\r
```javascript\r
// playwright.config.js\r
const { defineConfig } = require('@playwright/test');\r
\r
module.exports = defineConfig({\r
  use: {\r
    video: 'on',\r
    screenshot: 'on',\r
  },\r
  reporter: [\r
    ['html', { outputFolder: 'playwright-report' }],\r
    ['./scripts/playwright-video-reporter', { format: 'gif' }]\r
  ]\r
});\r
```\r
\r
## 目录结构\r
\r
```\r
e2e-test/\r
├── SKILL.md                    # 技能文档\r
├── package.json                # 项目配置\r
├── scripts/\r
│   ├── record-browser.js       # 浏览器录制核心\r
│   ├── record-test.js          # 测试录制\r
│   ├── record-screen.js        # 屏幕录制\r
│   ├── convert-format.js       # 格式转换\r
│   ├── add-annotations.js      # 添加标注\r
│   └── utils.js                # 工具函数\r
├── configs/\r
│   ├── default.json            # 默认配置\r
│   ├── test.json               # 测试配置\r
│   └── production.json         # 生产配置\r
├── templates/\r
│   ├── demo-template.js        # 演示模板\r
│   └── test-template.js        # 测试模板\r
├── examples/\r
│   ├── basic-recording.js      # 基础录制示例\r
│   ├── e2e-test.js             # 端到端测试示例\r
│   └── api-test.js             # API测试示例\r
└── recordings/                 # 录制文件输出目录\r
```\r
\r
## 使用示例\r
\r
### 示例 1：录制登录流程\r
```javascript\r
const { recordE2ETest } = require('./scripts/record-test');\r
\r
await recordE2ETest({\r
  url: 'http://localhost:3000',\r
  testName: '用户登录测试',\r
  steps: [\r
    {\r
      description: '访问登录页面',\r
      action: 'goto',\r
      url: '/login'\r
    },\r
    {\r
      description: '输入用户名',\r
      action: 'type',\r
      selector: '#username',\r
      text: '[email protected]'\r
    },\r
    {\r
      description: '输入密码',\r
      action: 'type',\r
      selector: '#password',\r
      text: 'password123'\r
    },\r
    {\r
      description: '点击登录按钮',\r
      action: 'click',\r
      selector: 'button[type="submit"]'\r
    },\r
    {\r
      description: '验证登录成功',\r
      action: 'waitFor',\r
      selector: '.dashboard',\r
      timeout: 5000\r
    }\r
  ],\r
  output: 'recordings/login-demo.mp4',\r
  annotations: true\r
});\r
```\r
\r
### 示例 2：录制API测试\r
```javascript\r
const { recordAPITest } = require('./scripts/record-test');\r
\r
await recordAPITest({\r
  apiUrl: 'http://localhost:8000/api',\r
  tests: [\r
    {\r
      name: '健康检查API',\r
      endpoint: '/health',\r
      method: 'GET',\r
      expectedStatus: 200\r
    },\r
    {\r
      name: '用户注册API',\r
      endpoint: '/auth/register',\r
      method: 'POST',\r
      data: {\r
        username: 'testuser',\r
        email: '[email protected]',\r
        password: 'Password123!'\r
      },\r
      expectedStatus: 201\r
    }\r
  ],\r
  output: 'recordings/api-test.gif'\r
});\r
```\r
\r
## 故障排除\r
\r
### 常见问题\r
\r
#### 1. 录制失败\r
- **问题**: 无法启动浏览器\r
- **解决**: 确保已安装 Chrome/Chromium，或设置 `executablePath`\r
\r
#### 2. 视频质量差\r
- **问题**: 视频模糊或卡顿\r
- **解决**: 调整 `fps` 和 `quality` 参数，确保网络稳定\r
\r
#### 3. 文件过大\r
- **问题**: 录制文件太大\r
- **解决**: 降低 `fps`、`quality`，或使用 `convertVideo` 压缩\r
\r
#### 4. 内存不足\r
- **问题**: 录制过程中内存占用过高\r
- **解决**: 减少录制时长，或增加系统内存\r
\r
### 调试模式\r
```javascript\r
const recorder = new ScreenRecorder({\r
  debug: true,  // 启用调试模式\r
  logLevel: 'verbose'\r
});\r
```\r
\r
## 性能优化建议\r
\r
### 录制优化\r
1. **降低帧率**: 非必要情况下使用 15-24 FPS\r
2. **调整分辨率**: 根据需求调整录制区域大小\r
3. **使用硬件加速**: 启用 GPU 加速录制\r
\r
### 文件优化\r
1. **格式选择**: MP4 适合长视频，GIF 适合短视频\r
2. **压缩设置**: 使用合适的压缩参数\r
3. **分段录制**: 长时间录制可分段保存\r
\r
## 许可证\r
\r
MIT License\r
\r
## 更新日志\r
\r
### v1.0.0 (2026-04-11)\r
- 初始版本发布\r
- 支持基础浏览器录制\r
- 支持 MP4/GIF 格式输出\r
- 提供端到端测试录制功能\r
\r
## 贡献指南\r
\r
1. Fork 项目\r
2. 创建功能分支\r
3. 提交更改\r
4. 推送到分支\r
5. 创建 Pull Request\r
\r
## 联系支持\r
\r
- 问题反馈: [GitHub Issues](https://github.com/your-org/e2e-test/issues)\r
- 文档: [项目 Wiki](https://github.com/your-org/e2e-test/wiki)\r
- 邮件: [email protected]