Screen Recorder Demo Skill

概述

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

功能特性

核心功能

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

高级功能

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

安装要求

系统要求

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

依赖安装

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

快速开始

1. 基础录制

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. 端到端测试录制

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 类

构造函数

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)

合并多个视频文件

配置示例

基础配置

{
  "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"
  }
}

测试配置

{
  "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 集成

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

Playwright 集成

// 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' }]
  ]
});

目录结构

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：录制登录流程

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测试

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. 内存不足

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

调试模式

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