sc-e2e

E2E テストスキル

複数のフレームワークに対応し、対話型デバッグ機能を備えた包括的なエンドツーエンドテストのワークフローです。

クイックスタート

# Run all E2E tests
/sc:e2e run

# Run specific test file
/sc:e2e run --file auth.spec.ts

# Debug failing test
/sc:e2e debug --file auth.spec.ts --ui

# Record user interactions
/sc:e2e record --url /login

# Run with tracing enabled
/sc:e2e trace --file checkout.spec.ts

# Generate test scaffold
/sc:e2e generate spec user-profile

# View test report
/sc:e2e report

動作フロー

1. 検出 - E2E フレームワーク（Playwright、Cypress、Selenium）を特定します
2. 設定 - 引数からモードとオプションを解析します
3. 実行 - 選択したモードを実行します
4. 分析 - 結果を解析し、失敗を特定します
5. 対話 - デバッグ、再実行、修正のオプションを提示します
6. レポート - 次に実行可能な手順とともに結果を提示します

フラグ

フラグ	型	デフォルト	説明
--file	文字列	-	対象とする特定のテストファイル
--grep	文字列	-	名前のパターンでテストをフィルタリングします
--headed	ブール値	false	ブラウザーを表示するモードで実行します
--workers	整数	auto	並列ワーカーの数
--ui	ブール値	false	フレームワークの UI モードを開きます
--url	文字列	/	記録モードの開始 URL
--output	文字列	-	生成したコードの出力ファイル
--framework	文字列	auto	使用するフレームワークを指定します：playwright、cypress、selenium

フレームワークの検出

プロジェクト設定から E2E フレームワークを自動検出します。

フレームワーク	検出方法	設定ファイル
Playwright	package.json の @playwright/test	playwright.config.ts
Cypress	package.json の cypress	cypress.config.ts
Selenium	package.json の selenium-webdriver	wdio.conf.js

# Detection logic
if [ -f "playwright.config.ts" ] || [ -f "playwright.config.js" ]; then
  FRAMEWORK="playwright"
elif [ -f "cypress.config.ts" ] || [ -f "cypress.config.js" ]; then
  FRAMEWORK="cypress"
elif [ -f "wdio.conf.js" ] || [ -f "wdio.conf.ts" ]; then
  FRAMEWORK="selenium"
fi

モード 1：run - テストを実行

任意のフィルターと設定を使って E2E テストを実行します。

Playwright

npx playwright test [--grep "pattern"] [--headed] [--workers N] [file]

Cypress

npx cypress run [--spec "file"] [--headed] [--browser chrome]

実行後の分析

テストの実行後、出力を解析し、対話型のオプションを提示します。

Test run complete: X passed, Y failed

  [r] Re-run failed tests
  [d] Debug failing test
  [t] View trace/screenshot
  [f] Fix with /sc:tdd
  [a] Run all tests
  [q] Quit

モード 2：debug - 対話型デバッグ

フレームワークのデバッグモードを起動して、ステップ実行でテストします。

Playwright のデバッグオプション

オプション	コマンド	用途
UI モード	npx playwright test --ui	タイムトラベル機能を使ったビジュアルなステップ実行
インスペクター	PWDEBUG=1 npx playwright test	セレクタービルダーとブレークポイント
スローモーション	npx playwright test --headed --slowmo=500	テストの実行を確認

Cypress のデバッグオプション

オプション	コマンド	用途
オープンモード	npx cypress open	対話型テストランナー
デバッグ	npx cypress run --headed --no-exit	失敗時にブラウザーを開いたままにします

デバッグのヒント

• ブレークポイントには await page.pause()（Playwright）または cy.pause()（Cypress）を使用します
• test-results/ または cypress/screenshots/ のスクリーンショットを確認します
• タイムトラベルデバッグにはトレースビューアーを使用します

モード 3：record - ユーザー操作を記録

codegen ツールを使ってブラウザーでの操作を記録し、テストコードを生成します。

Playwright

npx playwright codegen http://localhost:3000[url-path]

Cypress

npx cypress open  # Use Cypress Studio for recording

記録後

1. 生成されたコードを確認します
2. ページオブジェクトパターンへの変換を提案します：
   • セレクターをページオブジェクトクラスに抽出します
   • 操作を再利用可能なメソッドに変換します
   • 既存のパターンに基づいてアサーションを追加します

モード 4：trace - トレース

トレースを有効にしてテストを実行するか、既存のトレースを表示します。

Playwright

# Run with tracing
npx playwright test --trace on [file]

# View trace
npx playwright show-trace test-results/[trace].zip

Cypress

# Traces are auto-captured in cypress/videos/
# Screenshots in cypress/screenshots/

モード 5：generate - テストのひな形を生成

プロジェクトのパターンに沿ってテストファイルを生成します。

generate spec <name>

以下を含む新しいテスト仕様ファイルを作成します：

• フレームワークのインポート文
• ページ名を含む describe ブロック
• ログイン／ナビゲーションを含む beforeEach
• よくあるシナリオの空のテストスタブ

generate page <name>

以下を含む新しいページオブジェクトを作成します：

• 対象ページのコンポーネントから抽出したセレクター定数
• 操作メソッド（クリック、入力、ナビゲーション）
• アサーションヘルパー（expectLoaded、expectError）

ページオブジェクトパターン

// Playwright page object template
import { Page, Locator, expect } from '@playwright/test';

export class UserProfilePage {
  readonly page: Page;
  readonly nameInput: Locator;
  readonly saveButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.nameInput = page.getByTestId('profile-name');
    this.saveButton = page.getByTestId('profile-save');
  }

  async goto(): Promise<void> {
    await this.page.goto('/profile');
  }

  async updateName(name: string): Promise<void> {
    await this.nameInput.fill(name);
    await this.saveButton.click();
  }

  async expectLoaded(): Promise<void> {
    await expect(this.nameInput).toBeVisible();
  }
}

モード 6：report - レポートを表示

テストレポートを表示して分析します。

Playwright

npx playwright show-report

Cypress

# Open Mochawesome report if configured
open cypress/reports/index.html

出力の概要

## E2E Test Report

| Suite | Tests | Passed | Failed | Skipped | Duration |
|-------|-------|--------|--------|---------|----------|
| Auth | 5 | 5 | 0 | 0 | 12.3s |
| Dashboard | 8 | 7 | 1 | 0 | 24.1s |
| Checkout | 3 | 3 | 0 | 0 | 18.7s |

**Total**: 16 tests, 15 passed, 1 failed (93.8%)

環境変数

変数	用途
BASE_URL	テスト対象のアプリケーション URL（デフォルト：http://localhost:3000）
E2E_USERNAME	テストユーザーの認証情報
E2E_PASSWORD	テストユーザーのパスワード
CI	CI 用にワーカー数と再試行回数を調整します
PWDEBUG	Playwright Inspector を有効にします

MCP 連携

PAL MCP

ツール	使用するタイミング	目的
mcp__pal__debug	テストの失敗時	E2E テスト失敗の根本原因を分析します
mcp__pal__codereview	生成されたテスト	テストの品質とカバレッジをレビューします
mcp__pal__apilookup	フレームワークのドキュメント	最新の Playwright/Cypress API ドキュメントを取得します

PAL の使用パターン

# Debug failing E2E test
mcp__pal__debug(
    step="E2E test 'checkout flow' fails on payment step",
    hypothesis="Selector changed after UI update",
    confidence="medium",
    relevant_files=["tests/e2e/checkout.spec.ts", "src/components/PaymentForm.tsx"]
)

# Review generated page object
mcp__pal__codereview(
    review_type="quick",
    step="Review generated page object for completeness",
    relevant_files=["tests/e2e/pages/checkout.page.ts"]
)

Rube MCP

ツール	使用するタイミング	目的
mcp__rube__RUBE_MULTI_EXECUTE_TOOL	CI 連携	E2E の結果を Slack に投稿し、チケットを更新します

ツールの連携

• Bash - フレームワークの CLI コマンド（playwright、cypress）
• Glob - テストファイルの検出、ページコンポーネントのスキャン
• Grep - コンポーネントからのセレクター抽出、テスト出力の解析
• Read - ページオブジェクト生成のためのコンポーネント調査
• Write - 生成されたテストファイル、ページオブジェクト

関連スキル

• /sc:test - 単体テストと統合テスト
• /sc:tdd - テスト駆動開発のワークフロー
• /sc:pr-check - E2E を含む PR 前の検証
• /sc:implement - テスト生成を伴う機能実装