テストケースの記述と構成（describe, it, beforeEach等）

Playwrightでは、Node.jsベースの**テストランナー（Playwright Test）**を使用して、ブラウザ操作の自動化テストを記述・実行することができます。その中で、describe、it、beforeEachといった構文を使って、テストケースを構造的に記述できます。以下に、それぞれの構成要素について詳しく説明します。

---

1. 基本構成

Playwright Testでは、テストスクリプトを以下のような構造で記述します：

ts
import { test, expect } from '@playwright/test';

test.describe('ログイン機能のテスト', () => {

  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com/login');
  });

  test('正しい資格情報でログインできる', async ({ page }) => {
    await page.fill('#username', 'user');
    await page.fill('#password', 'password');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('https://example.com/dashboard');
  });

  test('不正な資格情報でエラーが表示される', async ({ page }) => {
    await page.fill('#username', 'user');
    await page.fill('#password', 'wrongpassword');
    await page.click('button[type="submit"]');
    await expect(page.locator('.error-message')).toBeVisible();
  });

});

---

2. describe / test.describe

• 複数のテストケースを論理的なグループとしてまとめるために使用します。

• 例：ログイン機能、検索機能、商品購入フローなどを個別に分ける。

ts
test.describe('検索機能のテスト', () => {
  // 複数の `test(...)` を含めることができる
});

---

3. it / test

• 個別のテストケースを定義します。testがPlaywright Testで使われる一般的なエイリアスです（MochaやJestではitも同様の意味）。

• 各テストは非同期関数（async）として記述され、pageなどのコンテキストを受け取れます。

ts
test('ページタイトルが正しいことを確認する', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example Domain');
});

---

4. beforeEach / afterEach

• 各テストの前処理（beforeEach）や後処理（afterEach）を記述します。

• 例：毎回ログインページを開く、セッションをリセットするなど。

ts
test.beforeEach(async ({ page }) => {
  await page.goto('https://example.com/login');
});

test.afterEach(async ({ page }) => {
  // テスト後のクリーンアップ処理
});

---

5. スコープの注意点

• beforeEach や afterEach は、同じ test.describe ブロック内の test にのみ適用されます。

• グローバルに定義すれば、すべてのテストに共通の前処理・後処理として適用されます。

---

6. その他の補助機能

---

まとめ

この構成を利用することで、Playwrightでのテストスクリプトを明確で再利用性の高い構造にすることが可能になります。さらに、必要に応じてカスタムヘルパーやPage Object Patternを導入することで、大規模なE2Eテストも効率的に管理できます。