replay-cypress

replay-cypress

説明： Cypress テストを記録するための Replay のセットアップ、Replay Cypress プラグインの設定、または Replay ブラウザーでの Cypress テストの実行をユーザーが希望している場合に使用します。例：「replay for cypress をセットアップする」「cypress テストを記録する」「replay cypress プラグインを設定する」「replay で cypress を実行する」。

手順：

Cypress テストを記録するための Replay のセットアップと設定を支援します。以下の手順を順番に実行してください。

ステップ 1：テストスイートチームを作成する

テストスイートチームを作成するため、ユーザーに https://app.replay.io/team/new/tests へのアクセスを案内してください。アップロードに必要な API キーが自動的に生成されます。

ステップ 2：Replay Cypress プラグインをインストールする

プラグインを開発用依存関係としてインストールします。

npm install --save-dev @replayio/cypress
# or
yarn add --dev @replayio/cypress
# or
pnpm add --save-dev @replayio/cypress
# or
bun add --dev @replayio/cypress

ステップ 3：Replay ブラウザーをインストールする

npx replayio install

記録に必要な Replay Chromium ブラウザーがインストールされます。

ステップ 4：API キーを保存する

API キーは、REPLAY_API_KEY 環境変数として使用できるようにする必要があります。プロジェクトのルートにある .env ファイルに保存します。

REPLAY_API_KEY=<your_api_key>

または、直接エクスポートします。

export REPLAY_API_KEY=<your_api_key>

ステップ 5：Cypress サポートファイルを設定する

Replay のサポート用インポートを cypress/support/e2e.js（または e2e.ts）に追加します。

CommonJS：

require('@replayio/cypress/support')

ESM：

import '@replayio/cypress/support'

ステップ 6：cypress.config.js（または cypress.config.ts）を設定する

Cypress の設定に Replay プラグインを追加します。

const { defineConfig } = require('cypress')
const { plugin: replayPlugin, wrapOn } = require('@replayio/cypress')
require('dotenv').config()

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(cyOn, config) {
      const on = wrapOn(cyOn)
      replayPlugin(on, config, {
        upload: true,
        apiKey: process.env.REPLAY_API_KEY,
      })
      return config
    },
  },
})

TypeScript の場合（cypress.config.ts）：

import { defineConfig } from 'cypress'
import { plugin as replayPlugin, wrapOn } from '@replayio/cypress'
import 'dotenv/config'

export default defineConfig({
  e2e: {
    setupNodeEvents(cyOn, config) {
      const on = wrapOn(cyOn)
      replayPlugin(on, config, {
        upload: true,
        apiKey: process.env.REPLAY_API_KEY,
      })
      return config
    },
  },
})

ステップ 7：Replay でテストを実行する

npx cypress run --browser replay-chromium

記録は自動的にアップロードされ、Replay DevTools で表示するための URL が各記録に対して提供されます。

重要な注意事項

• プラグイン設定の upload: true オプションを有効にすると、テスト完了後に自動でアップロードされます。
• wrapOn ラッパーは必須です。Cypress の on イベントハンドラーをラップし、Replay がテストのライフサイクルイベントをフックできるようにします。
• Cypress のイベント（テストの開始、コマンド、アサーション）は Replay DevTools のタイムラインに表示されます。
• CI/CD では、CI プロバイダーにシークレット環境変数として REPLAY_API_KEY を設定してください。

記録したアプリケーションのデバッグ

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

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