browser-recording

ブラウザー録画スキル

Playwright を使ってブラウザーセッションを録画し、チュートリアルやドキュメント向けに Web UI の操作を動画でキャプチャします。

使用する場面

• Playwright でブラウザーセッションを録画する
• Web アプリケーションのデモ動画を作成する

使用しない場面

• ターミナルのみのワークフロー — 代わりに scry:vhs-recording を使用してください
• 静的なスクリーンショット — 標準のスクリーンショットツールを使用してください

概要

このスキルでは、Playwright に組み込まれた動画録画機能を使ってブラウザー操作をキャプチャします。ワークフローは次のとおりです。

1. Playwright のインストールを検証する
2. 動画録画を有効にして Playwright の spec を実行する
3. 録画した動画（WebM 形式）を取得する
4. gif-generation スキルを使って GIF に変換する

💡 注意：Claude Code 2.0.72+ には、対話型のブラウザー操作に使える Chrome のネイティブ連携が含まれています。このスキル（Playwright）は、自動録画ワークフロー、CI/CD、クロスブラウザー対応向けに設計されています。対話型のデバッグやライブテストには、Chrome のネイティブ連携の使用を検討してください。どちらの方法も相互に補完し合います。Chrome で対話的に開発し、その後 Playwright の spec で自動化できます。

必須の TodoWrite 項目

このスキルを呼び出すときは、次の項目の todo を作成してください。

- [ ] Validate Playwright is installed and configured
- [ ] Check spec file exists at specified path
- [ ] Execute Playwright spec with video recording
- [ ] Locate and verify video output
- [ ] Convert video to GIF using gif-generation skill

検証： --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 <spec-file> --config=playwright.config.ts

検証： pytest -v を実行し、テストがパスすることを確認します。

設定で動画録画を有効にする必要があります。設定の詳細については、spec-execution モジュールを参照してください。

ステップ 4：GIF に変換する

録画が完了したら、gif-generation スキルを使って WebM 動画を最適化された GIF に変換します。

**Verification:** Run the command with `--help` flag to verify availability.
Invoke scry:gif-generation with:
- input: <path-to-webm>
- output: <desired-gif-path>
- fps: 10 (recommended for tutorials)
- width: 800 (adjust based on content)

検証： --help フラグを付けてコマンドを実行し、利用可能であることを確認します。

Playwright spec の例

import { test, expect } from '@playwright/test';

test('demo workflow', async ({ page }) => {
  // Navigate to the application
  await page.goto('http://localhost:3000');

  // Wait for page to be ready
  await page.waitForLoadState('networkidle');

  // Perform demo actions
  await page.click('button[data-testid="start"]');
  await page.waitForTimeout(500); // Allow animation to complete

  await page.fill('input[name="query"]', 'example search');
  await page.waitForTimeout(300);

  await page.click('button[type="submit"]');
  await page.waitForSelector('.results');

  // Final pause to show 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 // Slow down actions for visibility
    }
  },
  outputDir: './test-results',
});

検証： pytest -v を実行し、テストがパスすることを確認します。

完了条件

• Playwright の spec が正常に実行された（終了コード 0）
• 出力ディレクトリに動画ファイルが存在する
• 動画のファイルサイズが 0 より大きい
• GIF への変換が完了している（要求された場合）

エラー処理

エラー	解決方法
Playwright がインストールされていない	npm install -D @playwright/test を実行します
ブラウザーがインストールされていない	npx playwright install chromium を実行します
Spec ファイルが見つからない	パスとファイル拡張子を確認します
動画が作成されない	Playwright の設定で動画が有効になっているか確認します
空の動画ファイル	テスト終了前に spec の操作が完了することを確認します

出力先

デフォルトの出力パス：

• 動画：./test-results/<test-name>/video.webm
• スクリーンショット：./test-results/<test-name>/screenshot.png

モジュール参照

• Playwright の実行オプションの詳細については、modules/spec-execution.md を参照してください
• 動画形式と画質の設定については、modules/video-capture.md を参照してください

関連項目

• scry:gif-generation：動画を最適化された GIF に変換します