Playwright: 効率的なテストのためのユーティリティでの GraphQL リクエスト

Playwright のようなエンドツーエンドのテスト フレームワークを使用する場合、GraphQL リクエストをモックすると、テストの信頼性と速度が大幅に向上します。 Jay Freestone の優れたブログ投稿「Playwright での GraphQL リクエストのスタブ化」に触発されて、柔軟な GraphQL リクエストのインターセプトとレスポンスのスタブ化を可能にする再利用可能なユーティリティ関数を構築することにしました。

この投稿では、interceptGQL ユーティリティの実装を説明し、Playwright でそれを使用して GraphQL クエリとミューテーションのサーバー応答を模擬する方法を示します。

interceptGQL ユーティリティ: 仕組み

interceptGQL ユーティリティは、バックエンドへのすべての GraphQL リクエストのルート ハンドラーを登録し、operationName に基づいて特定の操作をインターセプトします。各オペレーションがどのように応答するかを定義し、リクエストで渡された変数を検証できます。

実装は次のとおりです:

import { test as baseTest, Page, Route } from '@playwright/test';
import { namedOperations } from '../../src/graphql/autogenerate/operations';

type CalledWith = Record<string unknown>;

type Operations = keyof (typeof namedOperations)['Query'] | keyof (typeof namedOperations)['Mutation'];

type InterceptConfig = {
  operationName: Operations | string;
  res: Record<string unknown>;
};

type InterceptedPayloads = {
  [operationName: string]: CalledWith[];
};

export async function interceptGQL(
  page: Page,
  interceptConfigs: InterceptConfig[]
): Promise {
  const reqs: InterceptedPayloads = {};

  interceptConfigs.forEach(config => {
    reqs[config.operationName] = [];
  });

  await page.route('**/graphql', (route: Route) => {
    const req = route.request().postDataJSON();
    const operationConfig = interceptConfigs.find(config => config.operationName === req.operationName);

    if (!operationConfig) {
      return route.continue();
    }

    reqs[req.operationName].push(req.variables);

    return route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ data: operationConfig.res }),
    });
  });

  return { reqs };
}

export const test = baseTest.extend({
  interceptGQL: async ({ browser }, use) => {
    await use(interceptGQL);
  },
});

</string></string>

例: タスク管理ダッシュボードのテスト

ユーティリティの実際の動作を示すために、それを使用してタスク管理ダッシュボードをテストしてみましょう。 GraphQL クエリ (GetTasks) をインターセプトし、その応答をモックします。

import { expect } from '@playwright/test';
import { namedOperations } from '../../../src/graphql/autogenerate/operations';
import { test } from '../../fixtures';
import { GetTasksMock } from './mocks/GetTasks.mock';

test.describe('Task Management Dashboard', () => {
  test.beforeEach(async ({ page, interceptGQL }) => {
    await page.goto('/tasks');

    await interceptGQL(page, [
      {
        operationName: namedOperations.Query['GetTasks'],
        res: GetTasksMock,
      },
    ]);
  });

  test('Should render a list of tasks', async ({ page }) => {
    const taskDashboardTitle = page.getByTestId('task-dashboard-title');
    await expect(taskDashboardTitle).toHaveText('Task Dashboard');

    const firstTaskTitle = page.getByTestId('0-task-title');
    await expect(firstTaskTitle).toHaveText('Implement authentication flow');

    const firstTaskStatus = page.getByTestId('0-task-status');
    await expect(firstTaskStatus).toHaveText('In Progress');
  });

  test('Should navigate to task details page when a task is clicked', async ({ page }) => {
    await page.getByTestId('0-task-title').click();

    await expect(page.getByTestId('task-details-header')).toHaveText('Task Details');
    await expect(page.getByTestId('task-details-title')).toHaveText('Implement authentication flow');
  });
});

ここで何が起こっているのですか?

1. リクエストのインターセプト: interceptGQL ユーティリティは GetTasks クエリをインターセプトし、GetTasksMock で定義されたモック データを返します。
2. 応答のモック: モックされた応答は、実際のバックエンドにアクセスする代わりに提供されます。
3. 変数の検証: このユーティリティは、リクエストとともに送信された GraphQL 変数も保存します。これは、API 呼び出しを個別にテストするのに役立ちます。

このアプローチを使用する理由

1. 速度の向上: 実際のネットワーク リクエストを回避することで、テストがより高速かつ確実に実行されます。
2. 簡略化されたテスト データ: 応答を制御することで、エッジ ケースやさまざまなアプリケーション状態のテストが容易になります。
3. API 呼び出しの検証: リクエストとともに送信された変数をキャプチャすることで、フロントエンドが正しいパラメーターを使用してバックエンドを呼び出すことを確認できます。

この実装とアプローチは、Jay Freestone の優れたブログ投稿「Playwright での GraphQL リクエストのスタブ化」からインスピレーションを得ています。彼の投稿は、interceptGQL ユーティリティを構築するための強固な基盤を提供しました。

このユーティリティを Playwright テスト スイートに組み込むことで、GraphQL クエリとミューテーションを簡単にモックでき、複雑なシナリオを簡素化しながらテストの速度と信頼性を向上させることができます。

以上がPlaywright: 効率的なテストのためのユーティリティでの GraphQL リクエストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。