Screen Recorder Demo Skill#

概述#

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

功能特性#

核心功能#

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

高级功能#

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

安装要求#

系统要求#

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

依赖安装#

bash

npm install puppeteer puppeteer-screen-recorder ffmpeg-static
# 或
yarn add puppeteer puppeteer-screen-recorder ffmpeg-static

快速开始#

1. 基础录制#

javascript

const { ScreenRecorder } = require('./scripts/record-browser');

const recorder = new ScreenRecorder({
  outputPath: './recordings/demo.mp4',
  fps: 30,
  quality: 80
});

await recorder.startRecording('https://your-app.com');
// 执行操作...
await recorder.stopRecording();

2. 端到端测试录制#

javascript

const { recordE2ETest } = require('./scripts/record-test');

await recordE2ETest({
  url: 'http://localhost:3000',
  testSteps: [
    { action: 'click', selector: '#login-btn' },
    { action: 'type', selector: '#username', text: 'testuser' },
    { action: 'type', selector: '#password', text: 'password123' },
    { action: 'click', selector: '#submit-btn' }
  ],
  output: './recordings/login-test.mp4'
});

API 文档#

ScreenRecorder 类#

构造函数

javascript

new ScreenRecorder(options)

options:

• outputPath (string): 输出文件路径
• fps (number): 帧率，默认 30
• quality (number): 视频质量 0-100，默认 80
• aspectRatio (string): 宽高比，如 '16:9'
• codec (string): 视频编码器，默认 'libx264'

方法

• startRecording(url, options): 开始录制
• stopRecording(): 停止录制
• pauseRecording(): 暂停录制
• resumeRecording(): 恢复录制
• addAnnotation(text, position): 添加标注
• addWatermark(imagePath, position): 添加水印

工具函数#

recordE2ETest(config)

录制端到端测试过程

config:

• url (string): 测试页面URL
• testSteps (Array): 测试步骤数组
• output (string): 输出文件路径
• headless (boolean): 是否无头模式，默认 false

convertVideo(input, output, options)

视频格式转换

mergeVideos(videos, output)

合并多个视频文件

配置示例#

基础配置#

json

{
  "recorder": {
    "fps": 30,
    "quality": 80,
    "outputDir": "./recordings",
    "defaultFormat": "mp4"
  },
  "browser": {
    "headless": false,
    "viewport": { "width": 1920, "height": 1080 },
    "slowMo": 50
  },
  "annotations": {
    "enabled": true,
    "fontSize": 24,
    "fontColor": "#ffffff",
    "backgroundColor": "#00000080"
  }
}

测试配置#

json

{
  "testSuites": {
    "login": {
      "url": "http://localhost:3000/login",
      "steps": "scripts/test-steps/login.json",
      "output": "recordings/login-test.mp4"
    },
    "dashboard": {
      "url": "http://localhost:3000/dashboard",
      "steps": "scripts/test-steps/dashboard.json",
      "output": "recordings/dashboard-test.mp4"
    }
  }
}

与测试框架集成#

Jest 集成#

javascript

// jest.config.js
module.exports = {
  setupFilesAfterEnv: ['./jest.setup.js'],
  reporters: [
    'default',
    ['./scripts/jest-video-reporter', { outputDir: './test-recordings' }]
  ]
};

Playwright 集成#

javascript

// playwright.config.js
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    video: 'on',
    screenshot: 'on',
  },
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['./scripts/playwright-video-reporter', { format: 'gif' }]
  ]
});

目录结构#

text

e2e-test/
├── SKILL.md                    # 技能文档
├── package.json                # 项目配置
├── scripts/
│   ├── record-browser.js       # 浏览器录制核心
│   ├── record-test.js          # 测试录制
│   ├── record-screen.js        # 屏幕录制
│   ├── convert-format.js       # 格式转换
│   ├── add-annotations.js      # 添加标注
│   └── utils.js                # 工具函数
├── configs/
│   ├── default.json            # 默认配置
│   ├── test.json               # 测试配置
│   └── production.json         # 生产配置
├── templates/
│   ├── demo-template.js        # 演示模板
│   └── test-template.js        # 测试模板
├── examples/
│   ├── basic-recording.js      # 基础录制示例
│   ├── e2e-test.js             # 端到端测试示例
│   └── api-test.js             # API测试示例
└── recordings/                 # 录制文件输出目录

使用示例#

示例 1：录制登录流程#

javascript

const { recordE2ETest } = require('./scripts/record-test');

await recordE2ETest({
  url: 'http://localhost:3000',
  testName: '用户登录测试',
  steps: [
    {
      description: '访问登录页面',
      action: 'goto',
      url: '/login'
    },
    {
      description: '输入用户名',
      action: 'type',
      selector: '#username',
      text: 'test@example.com'
    },
    {
      description: '输入密码',
      action: 'type',
      selector: '#password',
      text: 'password123'
    },
    {
      description: '点击登录按钮',
      action: 'click',
      selector: 'button[type="submit"]'
    },
    {
      description: '验证登录成功',
      action: 'waitFor',
      selector: '.dashboard',
      timeout: 5000
    }
  ],
  output: 'recordings/login-demo.mp4',
  annotations: true
});

示例 2：录制API测试#

javascript

const { recordAPITest } = require('./scripts/record-test');

await recordAPITest({
  apiUrl: 'http://localhost:8000/api',
  tests: [
    {
      name: '健康检查API',
      endpoint: '/health',
      method: 'GET',
      expectedStatus: 200
    },
    {
      name: '用户注册API',
      endpoint: '/auth/register',
      method: 'POST',
      data: {
        username: 'testuser',
        email: 'test@example.com',
        password: 'Password123!'
      },
      expectedStatus: 201
    }
  ],
  output: 'recordings/api-test.gif'
});

故障排除#

常见问题#

1. 录制失败

• 问题: 无法启动浏览器
• 解决: 确保已安装 Chrome/Chromium，或设置 executablePath

2. 视频质量差

• 问题: 视频模糊或卡顿
• 解决: 调整 fps 和 quality 参数，确保网络稳定

3. 文件过大

• 问题: 录制文件太大
• 解决: 降低 fps、 quality，或使用 convertVideo 压缩

4. 内存不足

• 问题: 录制过程中内存占用过高
• 解决: 减少录制时长，或增加系统内存

调试模式#

javascript

const recorder = new ScreenRecorder({
  debug: true,  // 启用调试模式
  logLevel: 'verbose'
});

性能优化建议#

录制优化#

1. 降低帧率: 非必要情况下使用 15-24 FPS
2. 调整分辨率: 根据需求调整录制区域大小
3. 使用硬件加速: 启用 GPU 加速录制

文件优化#

1. 格式选择: MP4 适合长视频，GIF 适合短视频
2. 压缩设置: 使用合适的压缩参数
3. 分段录制: 长时间录制可分段保存

许可证#

MIT License

更新日志#

v1.0.0 (2026-04-11)#

• 初始版本发布
• 支持基础浏览器录制
• 支持 MP4/GIF 格式输出
• 提供端到端测试录制功能

贡献指南#

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

联系支持#

• 问题反馈: GitHub Issues
• 文档: 项目 Wiki
• 邮件: support@example.com