Playwright ネットワーク監視とAPIテスト

この章では、ブラウザーのネットワークトラフィックを監視する方法と、Playwright を使用した独立した API テストについて説明します。

ネットワークリクエストとレスポンスの監視

page.on('request') でリクエストを監視

例

test('ネットワークリクエストを監視', async ({ page }) => {
  const requests = [];

  // すべてのリクエストを監視
  page.on('request', request => {
    requests.push({
      url: request.url(),
      method: request.method(),
      postData: request.postData(),
    });
  });

  await page.goto('https://www.example.com/');

  // すべてのリクエストを出力
  console.log('ページは合計', requests.length, '個のリクエストを送信しました');
  requests.forEach(r => console.log(r.method, r.url));
});

page.on('response') でレスポンスを監視

例

test('ネットワークレスポンスを監視', async ({ page }) => {
  page.on('response', async response => {
    // API レスポンスのみに注目
    if (response.url().includes('/api/')) {
      console.log('API ステータスコード:', response.status());
      console.log('API URL:', response.url());
    }
  });

  await page.goto('https://www.example.com/');
});

page.waitForResponse() で特定のレスポンスを待つ

例

test('API レスポンスの完了を待機', async ({ page }) => {
  // ボタンをクリックする前に API レスポンスの監視を準備
  const responsePromise = page.waitForResponse(
    response => response.url().includes('/api/search') && response.status() === 200
  );

  // 検索をトリガー
  await page.getByPlaceholder('サンプルチュートリアルを検索').fill('Playwright');
  await page.keyboard.press('Enter');

  // API レスポンスを待機
  const response = await responsePromise;
  const data = await response.json();

  // API が返したデータを検証
  expect(data.results.length).toBeGreaterThan(0);
});

Console メッセージの監視

例

test('コンソールエラーの監視', async ({ page }) => {
  const consoleErrors = [];

  // console メッセージを監視
  page.on('console', msg => {
    if (msg.type() === 'error') {
      consoleErrors.push(msg.text());
    }
  });

  await page.goto('https://www.example.com/');

  // ページに JavaScript エラーがないことを検証
  expect(consoleErrors).toHaveLength(0);
});

ConsoleMessage 型

型対応するメソッド
'log'console.log()
'error'console.error()
'warning'console.warn()
'info'console.info()
'debug'console.debug()

API テスト（request fixture）

Playwright のrequestfixture を使用するとブラウザーを介さずに直接 HTTP リクエストを送信できます。

これは、テストの前後でサーバー側の状態を準備またはクリーンアップするのに最適です。

GET リクエストを送信

例

test('API GET リクエスト', async ({ request }) => {
  const response = await request.get('https://jsonplaceholder.typicode.com/posts/1');

  // レスポンスステータスを検証
  expect(response.status()).toBe(200);

  // JSON データを取得
  const data = await response.json();
  expect(data.id).toBe(1);
  expect(data).toHaveProperty('title');
});

POST リクエストを送信

例

test('API POST リクエスト', async ({ request }) => {
  const response = await request.post('https://jsonplaceholder.typicode.com/posts', {
    data: {
      title: 'サンプル チュートリアル',
      body: 'Playwright API テスト例',
      userId: 1,
    },
  });

  expect(response.status()).toBe(201);

  const data = await response.json();
  expect(data.title).toBe('サンプル チュートリアル');
});

baseURL と認証ヘッダーの設定

例

// ファイルパス: playwright.config.ts
export default defineConfig({
  use: {
    // API リクエストのベース URL
    baseURL: 'https://api.example.com',

    // デフォルトのリクエストヘッダー
    extraHTTPHeaders: {
      'Authorization': 'Bearer YOUR_API_TOKEN',
      'Accept': 'application/json',
    },
  },
});

API + ブラウザー組み合わせテスト

実際のプロジェクトでは、ブラウザーを操作する前後に API を使用して状態管理を行うことがよくあります。

例

test('API でデータを準備 + ブラウザーで検証', async ({ request, page }) => {
  // ステップ 1: API を介してテストデータを作成
  const response = await request.post('/api/todos', {
    data: { title: 'サンプル テストタスク', completed: false },
  });
  const todo = await response.json();

  // ステップ 2: ブラウザーでデータが表示されていることを検証
  await page.goto('/todos');
  await expect(page.getByText('サンプル テストタスク')).toBeVisible();

  // ステップ 3: API を介してデータをクリーンアップ
  await request.delete(`/api/todos/${todo.id}`);
});

API テストはブラウザー操作よりもはるかに高速で、データの準備やクリーンアップに適しています。API とブラウザー操作を組み合わせることで、テストの効率と信頼性を大幅に向上させることができます。

その他の拡張