レスポンスのモック（Mock API）

Playwrightの「レスポンスのモック（Mock API）」とは、Webアプリケーションの外部APIやバックエンドサーバーからのレスポンスを擬似的に再現する仕組みです。これにより、実際のサーバーに依存せずに、開発やテストを安定して実行できます。以下に詳しく説明します。

---

1. モックの目的と利点

• 外部依存の排除：実際のAPIが未実装・不安定・課金制などの場合でも、独立してテスト可能。

• 一貫性のあるテスト：APIの応答が毎回異なる場合でも、常に同じ結果を返すように制御可能。

• 開発の高速化：フロントエンド側の実装・確認を、バックエンドが未完成の段階から開始できる。

---

2. 基本構文：page.route を用いたレスポンスのモック

Playwrightでは、page.route(url, handler) を使って、指定されたURLへのリクエストをインターセプトし、モック応答を返します。

javascript
await page.route('**/api/data', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ message: 'これはモックデータです' }),
  });
});

解説

• **/api/data：ワイルドカードを用いてURLを指定

• route.fulfill({...})：本来のレスポンスの代わりに、モックデータを返す

• status：HTTPステータスコード（例：200、404など）

• contentType：返すデータの種類（通常は application/json）

• body：JSON文字列として返されるデータ

---

3. 条件に応じたレスポンスの変更

同じURLでも、リクエストの内容に応じてモックレスポンスを変えることができます。

javascript
await page.route('**/api/user', async route => {
  const postData = await route.request().postDataJSON();
  if (postData.id === 1) {
    await route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ name: '田中太郎' }),
    });
  } else {
    await route.fulfill({
      status: 404,
      body: 'ユーザーが見つかりません',
    });
  }
});

---

4. 元のリクエストの継続と部分的なモック

完全なモックではなく、一部の条件のみを変更し、それ以外は本来のネットワークリクエストを続行することも可能です。

javascript
await page.route('**/api/data', async route => {
  if (someCondition) {
    await route.fulfill({ body: 'モックデータ' });
  } else {
    await route.continue(); // 本来のリクエストを送信
  }
});

---

5. 応答時間のシミュレーション

モックレスポンスに意図的な遅延を加えることで、ネットワーク遅延のテストも可能です。

javascript
await page.route('**/api/slow', async route => {
  await new Promise(resolve => setTimeout(resolve, 2000)); // 2秒待機
  await route.fulfill({
    body: JSON.stringify({ result: '遅延レスポンス' }),
  });
});

---

6. まとめ

---

Playwrightのレスポンスモック機能を活用することで、ネットワークに依存せず信頼性の高いE2Eテストや、効率的なフロントエンド開発が可能になります。必要に応じて、テストごとに異なるレスポンスや状況を柔軟に再現できます。