Menu
Playwrightを使用してE2Eテストを生成・実行。クリティカルユーザーフローの検証。
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
| name | e2e-runner |
| description | Playwrightを使用してE2Eテストを生成・実行。クリティカルユーザーフローの検証。 |
| license | MIT |
| version | 1.1.0 |
| triggers | ["/e2e","/playwright","E2Eテスト"] |
要約: PlaywrightでE2Eテストを生成・実行。テスト結果のレポートとスクリーンショット管理。
| コマンド | 説明 |
|---|---|
/e2e generate <flow> | テスト生成 |
/e2e run [flow] | テスト実行 |
/e2e report | レポート表示 |
WHEN /e2e generate <flow> 実行
DO テストファイルを生成
出力構造:
tests/e2e/
├── <flow>.spec.ts # テストファイル
├── fixtures/
│ └── <flow>.json # テストデータ
└── pages/
└── <flow>.page.ts # Page Object
テストテンプレート:
import { test, expect } from '@playwright/test';
test.describe('<Flow>', () => {
test('should complete flow', async ({ page }) => {
// Step 1: Navigate
await page.goto('/');
// Step 2: Action
await page.click('[data-testid="button"]');
// Step 3: Assert
await expect(page.locator('.success')).toBeVisible();
});
});
WHEN /e2e run [flow] 実行
DO Playwrightでテスト実行
| オプション | 説明 |
|---|---|
--headed | ブラウザ表示 |
--debug | デバッグモード |
--trace | トレース記録 |
--browser <name> | ブラウザ指定 |
# 全テスト
npx playwright test
# 特定フロー
npx playwright test tests/e2e/login.spec.ts
# デバッグ
npx playwright test --debug
WHEN テスト完了
DO レポート生成
📊 E2E Test Report
━━━━━━━━━━━━━━━━━━━━━━━━
Total: 10 tests
Passed: 8 ✅
Failed: 2 ❌
Skipped: 0
Duration: 45.2s
━━━━━━━━━━━━━━━━━━━━━━━━
Failed Tests:
1. login.spec.ts > should login
Error: Timeout waiting for selector
Screenshot: playwright-report/login-1.png
2. checkout.spec.ts > should pay
Error: Element not found
Screenshot: playwright-report/checkout-1.png
HTMLレポート:
npx playwright show-report
playwright.config.ts:
export default defineConfig({
testDir: './tests/e2e',
timeout: 30000,
retries: 2,
use: {
baseURL: 'http://localhost:3000',
screenshot: 'only-on-failure',
trace: 'retain-on-failure',
},
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
],
});
Architecture Decision Records作成ガイド。技術選定・設計判断のドキュメント化に使用。
MUSUBIX学習済み17ベストプラクティスガイド。コード・設計・テストパターンの適用に使用。
C4モデル設計ドキュメント作成ガイド。アーキテクチャ図・コンポーネント設計に使用。
設計仕様からコード生成ガイド。実装・機能作成に使用。
自動ドメイン検出・コンポーネント推論ガイド。プロジェクトドメイン特定に使用。
EARS形式要件の検証・作成ガイド。要件記述・構文検証に使用。