e2e-testing

E2Eテスト作成・実行スキル

対象プロジェクトにおけるPlaywright E2Eテストの作成・実行ガイド。

Quick Start

1. テストファイルの配置

.stdd.config.yml の各 apps[] ごとにサブディレクトリを分けて配置する（apps[].id をディレクトリ名に用いる）。

e2e/tests/
├── <apps[].id>/       # 各 apps[] の E2Eテスト（apps[] の数だけ繰り返す）
│   └── *.spec.ts
└── ...

2. 基本的なテスト構造

対象アプリのベースURLは .stdd.config.yml の apps[].port から組み立てる（http://localhost:<apps[].port>）。ハードコードしないこと。

import {
  test,
  expect,
  loginWithCredentials,
} from '../../fixtures/<apps[].id>/test-fixtures';

test.describe('機能名', () => {
  test('テストケース名', async ({ page, testUser }) => {
    // 認証が必要な場合はUIからログイン
    await loginWithCredentials(page, testUser.email, testUser.password);

    // テスト実行（ベースURLは apps[].port から組み立てる）
    await page.goto(`http://localhost:${process.env.PORT}/dashboard`);
    await expect(
      page.getByRole('heading', { name: 'ダッシュボード' }),
    ).toBeVisible();
  });
});

3. テスト実行（ローカル）

cd e2e
npx playwright test tests/<apps[].id>/login.spec.ts --headed

Locator選択の優先順位

重要原則: ユーザーが実際に見たり操作する「レンダリングされた出力」をテスト対象にすること。

優先度	Locator	用途	例
1	getByRole	ボタン、リンク、見出し、フォーム要素	getByRole('button', { name: 'ログイン' })
2	getByLabel	フォーム入力欄（label紐づき）	getByLabel('メールアドレス')
3	getByPlaceholder	プレースホルダーがある入力欄	getByPlaceholder('[email protected]')
4	getByText	静的テキストコンテンツ	getByText('登録完了しました')
5	getByTestId	上記で特定できない場合の最終手段	getByTestId('submit-button')
❌	locator('selector')	避ける: CSSセレクタやXPath	locator('input[type="email"]')

良い例と悪い例

// ✅ 良い例: アクセシビリティlocatorを使用
await page.getByRole('button', { name: 'ログイン' }).click();
await page.getByLabel('メールアドレス').fill('[email protected]');
await expect(
  page.getByRole('heading', { name: 'ダッシュボード' }),
).toBeVisible();

// ❌ 悪い例: CSSセレクタを使用
await page.locator('button[type="submit"]').click();
await page.locator('input[type="email"]').fill('[email protected]');
await expect(page.locator('h1')).toContainText('ダッシュボード');