\ud83e\udd9e Scry Browser Recording — 浏览器录屏

Night Market Skill — 源自 claude-night-market/scry。如需完整的 agent、hook 与命令体验，请安装 Claude Code 插件。

目录

• 概述
• 必需的 TodoWrite 项
• 流程
• 步骤 1：验证 Playwright 安装
• 步骤 2：检查 Spec 文件
• 步骤 3：执行录制
• 步骤 4：转换为 GIF
• 示例 Playwright Spec
• Playwright 配置
• 退出条件
• 错误处理
• 输出位置
• 参见

# Browser Recording Skill

使用 Playwright 录制浏览器会话，为教程和文档创建 Web UI 交互的视频捕获。

何时使用

• 用 Playwright 录制浏览器会话
• 创建 Web 应用演示录制

何时不使用

• 仅终端工作流 —— 改用 scry:vhs-recording
• 静态截图 —— 使用标准截图工具

概述

本技能利用 Playwright 内置的视频录制功能捕获浏览器交互。工作流如下：

• 验证 Playwright 安装

💡 注意：Claude Code 2.0.72+ 已集成原生 Chrome 支持，可进行交互式浏览器控制。本技能（Playwright）专为自动化录制工作流、CI/CD 及跨浏览器支持设计。如需交互调试和实时测试，可考虑使用原生 Chrome 集成。两种方式互为补充——先用 Chrome 交互式开发，再用 Playwright spec 自动化。

必需的 TodoWrite 项

调用本技能时，请创建如下待办：

- [ ] 验证 Playwright 已安装并配置
[ ] 检查指定路径存在 spec 文件
[ ] 以视频录制模式执行 Playwright spec
[ ] 定位并验证视频输出
[ ] 使用 gif-generation 技能将视频转为 GIF

验证：运行命令时加上 --help 标志以确认可用性。

流程

步骤 1：验证 Playwright 安装

检查 Playwright 是否可用：

npx playwright --version

验证：运行命令时加上 --help 标志以确认可用性。若未安装，用户应执行：

npm install -D @playwright/test
npx playwright install chromium

验证：运行 pytest -v 确保测试通过。

步骤 2：检查 Spec 文件

验证 Playwright spec 文件存在。Spec 文件应：

• 位于 specs/ 或 tests/ 目录
• 扩展名为 .spec.ts 或 .spec.js
• 包含视频配置（参见 spec-execution 模块）

步骤 3：执行录制

启用视频并运行 spec：

npx playwright test  --config=playwright.config.ts

验证：运行 pytest -v 确保测试通过。配置必须启用视频录制。详见 spec-execution 模块。

步骤 4：转换为 GIF

录制完成后，使用 gif-generation 技能将 WebM 视频转换为优化后的 GIF：

验证：运行命令时加上 --help 标志以确认可用性。
调用 scry:gif-generation 并传入：
input: 
output: 
fps: 10（教程推荐）
width: 800（根据内容调整）

验证：运行命令时加上 --help 标志以确认可用性。

示例 Playwright Spec

import { test, expect } from '@playwright/test';
test('demo workflow', async ({ page }) => {
  // 导航到应用
  await page.goto('http://localhost:3000');
  // 等待页面就绪
  await page.waitForLoadState('networkidle');
  // 执行演示操作
  await page.click('button[data-testid="start"]');
  await page.waitForTimeout(500); // 等待动画完成
  await page.fill('input[name="query"]', 'example search');
  await page.waitForTimeout(300);
  await page.click('button[type="submit"]');
  await page.waitForSelector('.results');
  // 最后暂停以展示结果
  await page.waitForTimeout(1000);
});

验证：运行 pytest -v 确保测试通过。

Playwright 配置

创建或更新 playwright.config.ts：

import { defineConfig } from '@playwright/test';
export default defineConfig({
  use: {
    video: {
      mode: 'on',
      size: { width: 1280, height: 720 }
    },
    viewport: { width: 1280, height: 720 },
    launchOptions: {
      slowMo: 100 // 放慢动作以便观察
    }
  },
  outputDir: './test-results',
});

验证：运行 pytest -v 确保测试通过。

退出条件

• Playwright spec 成功执行（退出码 0）
• 输出目录存在视频文件
• 视频文件大小非零
• （如请求）GIF 转换完成

错误处理

输出位置

默认输出路径：

• 视频：./test-results//video.webm
• 截图：./test-results//screenshot.png

模块参考

• 详见 modules/spec-execution.md 了解 Playwright 执行选项
• 详见 modules/video-capture.md 了解视频格式与质量设置

参见

• scry:gif-generation：将视频转换为优化后的 GIF

故障排除

常见问题

找不到命令 确保所有依赖已安装并位于 PATH

权限错误 检查文件权限并以适当权限运行

意外行为 使用 --verbose 标志启用详细日志