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"
    }
  }
}
```...