mcpField
R
replay-playwright

replay-playwright

github.com/replayioテスト・品質0103 回インストール37 週間前に更新
リポジトリ

replay-playwright について

replay-playwrightは、Replay BrowserでPlaywrightテストを実行し、録画をアップロードするためのセットアップスキルです。既存のプロジェクトやレポーターを維持しながらReplayを追加する手順を扱います。

主な機能

  1. 01Replay Playwrightプラグインとブラウザーの導入
  2. 02ReplayレポーターとChromiumプロジェクトの設定
  3. 03テスト終了後の録画アップロード
  4. 04録画ドライバーの読み込み問題の調査

活用シーン

  1. 01既存のPlaywrightテストへのReplay録画の追加
  2. 02Replay Browserでのテスト実行
  3. 03テスト録画が作成されない問題の診断

MCP 対応

録画したアプリケーションをデバッグするため、ClaudeでReplay MCPサーバーを設定する方法を説明します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/replayio/skills --skill replay-playwright

インストール後、Claude Code で/replay-playwrightを入力して読み込まれたか確認します。

詳細

replay-playwright

説明： ユーザーが Playwright テスト用に Replay をセットアップしたい場合、Replay Playwright プラグインを設定したい場合、または Replay Browser で Playwright テストを実行したい場合に使用します。例：「Playwright テスト用に Replay をセットアップして」「Playwright テストを記録して」「Replay Playwright プラグインを設定して」「Replay Browser でテストを実行して」。

手順：

Replay Browser を使って Playwright テストをセットアップし、実行できるようユーザーをサポートします。完全なリファレンスは次のとおりです。

インストール
1. Replay Playwright プラグインをインストールする
npm install --save-dev @replayio/playwright
# or
yarn add --dev @replayio/playwright
# or
pnpm add --save-dev @replayio/playwright
# or
bun add --dev @replayio/playwright
2. Replay Browser をインストールする
npx replayio install
認証

https://app.replay.io/team/new/tests で Test Suite Team を作成し、API キーを生成します。

次のいずれかの方法で API キーを保存します。

  • .env ファイル（推奨）：.env ファイルに REPLAY_API_KEY=<your_api_key> を追加し、dotenv パッケージを使って読み込みます。
  • macOS/Linux：export REPLAY_API_KEY=<your_api_key>
  • Windows：set REPLAY_API_KEY=<your_api_key>
設定

Replay reporter と Replay Chromium ブラウザーを使用するように playwright.config.ts を更新します。

import { replayReporter, devices as replayDevices } from "@replayio/playwright";

const config: PlaywrightTestConfig = {
  reporter: [
    replayReporter({
      apiKey: process.env.REPLAY_API_KEY,
      upload: true,
    }),
    ["line"],
  ],
  projects: [
    {
      name: "replay-chromium",
      use: { ...replayDevices["Replay Chromium"] },
    },
  ],
};

主な設定項目：

  • replayReporter は、テスト実行後の録画のアップロードを処理します
  • upload: true を設定すると、テスト終了時に録画が自動でアップロードされます
  • replay-chromium プロジェクトは、Replay Browser を使って録画を取得します
  • 通常のテスト実行用に、既存のプロジェクトを replay-chromium と併用できます
テストの実行

Replay Browser で Playwright テストを実行します。

npx playwright test --project replay-chromium

reporter の設定で upload: true が指定されている場合、録画は自動的にアップロードされます。

基本的なワークフロー

既存の Playwright プロジェクトに Replay をセットアップする：

  1. プラグインをインストールします：npm install --save-dev @replayio/playwright
  2. ブラウザーをインストールします：npx replayio install
  3. Replay reporter とプロジェクトを設定するように playwright.config.ts を更新します
  4. REPLAY_API_KEY 環境変数を設定します
  5. テストを実行します：npx playwright test --project replay-chromium

ユーザーの playwright.config.ts を変更する場合：

  • 既存のプロジェクトと reporter を維持し、Replay プロジェクトと reporter を追加します
  • @replayio/playwright から replayReporter と devices as replayDevices をインポートします
  • 設定で defineConfig を使用している場合は、既存の projects 配列に Replay プロジェクトを追加します
  • 設定にすでに reporter がある場合は、既存の配列に replayReporter を追加します
記録したアプリケーションのデバッグ

記録したアプリケーションをデバッグするには Replay MCP Server を実行します Claude に MCP サーバーをインストールするには、次のコマンドを実行します。

claude --mcp-config "{
    "mcpServers": {
      "replay": {
        "type": "http",
        "url": "https://dispatch.replay.io/nut/mcp",
        "headers": {
          "Authorization": "${REPLAY_API_KEY}"
        }
      }
    }
  }"

トラブルシューティング：録画が作成されない

Replay ブラウザーでテストが正常に実行されても録画が表示されない場合（replayio list に何も表示されない場合）は、 録画ドライバーの読み込みに失敗している可能性があります。

診断

録画を有効にして Replay ブラウザーを直接実行し、標準エラー出力を確認します。

RECORD_ALL_CONTENT=1 $(node -e "console.log(require('os').homedir() + '/.replay/runtimes/chrome-linux/chrome')") --headless https://google.com

録画ドライバーが正しく読み込まれていれば、DoLoadDriverHandle エラーは表示されません。replayio list で録画を確認できるはずです。

修正：libcrypto.so.1.1 が見つからない

次のエラーが表示される場合：

DoLoadDriverHandle: dlopen failed ... libcrypto.so.1.1: cannot open shared object file

Replay 録画ドライバーには OpenSSL 1.1 が必要ですが、システムには OpenSSL 3 しかありません。 Ubuntu 18.04 の libssl1.1 パッケージをダウンロードし、ライブラリーを展開します。

curl -sL -o /tmp/libssl1.1.deb \
  http://archive.ubuntu.com/ubuntu/pool/main/o/openssl/libssl1.1_1.1.1-1ubuntu2.1~18.04.23_amd64.deb
dpkg-deb -x /tmp/libssl1.1.deb $HOME/.local/openssl11
rm /tmp/libssl1.1.deb

次に、ブラウザーを起動する前に LD_LIBRARY_PATH を設定します。

export LD_LIBRARY_PATH=$HOME/.local/openssl11/usr/lib/x86_64-linux-gnu

診断コマンドをもう一度実行して修正を確認します。DoLoadDriverHandle エラーが解消されているはずです。

これは Playwright 設定の launchOptions.env に設定するか、Dockerfile でグローバルに設定してください。

コメント

Markdown 対応