E2E Testing (Frontend)

E2E テスト（フロントエンド）

Note: E2E テストのカバレッジは現在限定的です。改善が必要な領域です。

テストの実行

npx playwright install  # First time only
npm run test:e2e

ページオブジェクトモデル

再利用可能なページ操作のためのページオブジェクトを作成します。

// e2e/pages/login-page.ts
import { type Page, type Locator, expect } from '@playwright/test';

export class LoginPage {
    readonly page: Page;
    readonly emailInput: Locator;
    readonly passwordInput: Locator;
    readonly submitButton: Locator;
    readonly errorMessage: Locator;

    constructor(page: Page) {
        this.page = page;
        this.emailInput = page.getByLabel('Email');
        this.passwordInput = page.getByLabel('Password');
        this.submitButton = page.getByRole('button', { name: /log in/i });
        this.errorMessage = page.getByRole('alert');
    }

    async goto() {
        await this.page.goto('/login');
    }

    async login(email: string, password: string) {
        await this.emailInput.fill(email);
        await this.passwordInput.fill(password);
        await this.submitButton.click();
    }

    async expectError(message: string) {
        await expect(this.errorMessage).toContainText(message);
    }
}

テストでのページオブジェクトの使用

// e2e/auth/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/login-page';

test.describe('Login', () => {
    test('successful login redirects to dashboard', async ({ page }) => {
        const loginPage = new LoginPage(page);

        await loginPage.goto();
        await loginPage.login('[email protected]', 'password123');

        await expect(page).toHaveURL('/');
    });

    test('invalid credentials shows error', async ({ page }) => {
        const loginPage = new LoginPage(page);

        await loginPage.goto();
        await loginPage.login('[email protected]', 'wrongpassword');

        await loginPage.expectError('Invalid email or password');
    });
});

セレクターの優先順位

1. セマンティックセレクターを優先します：

   page.getByRole('button', { name: /submit/i });
   page.getByLabel('Email address');
   page.getByText('Welcome back');
   

2. フォールバックとしてテスト ID を使用します：

   page.getByTestId('stack-trace');
   

3. 実装の詳細は避けます：

   // ❌ Avoid CSS classes and IDs
   page.locator('.btn-primary');
   

バックエンドデータのセットアップ

E2E テストは Aspire スタック全体に対して実行されます。バックエンドでは、backend-testing の AppWebHostFactory と同じインフラストラクチャを使用します。

特定のデータが必要なテストでは、次の方法を検討してください。

1. beforeEach での API 呼び出し — Playwright のリクエストコンテキストを使用してデータをセットアップします
2. テスト専用エンドポイント — テストデータ管理用の /api/test/* エンドポイントを作成します
3. データベースのシード — テスト実行前に必要なデータをシードします
4. Aspire オーケストレーション — Elasticsearch と Redis が事前設定された状態でテストを開始します

test.beforeEach(async ({ request }) => {
    // Set up test data via API
    await request.post('/api/test/seed', {
        data: { scenario: 'events-with-errors' }
    });
});

test.afterEach(async ({ request }) => {
    await request.delete('/api/test/cleanup');
});

Note: テスト中、バックエンドサービスではインメモリ実装を使用します。テストインフラストラクチャの設定方法については、AppWebHostFactory を参照してください。

アクセシビリティ監査

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('login page has no accessibility violations', async ({ page }) => {
    await page.goto('/login');

    const results = await new AxeBuilder({ page }).analyze();
    expect(results.violations).toEqual([]);
});

WCAG ガイドラインについては、accessibility を参照してください。