Playwright：用於高效測試的實用程式中的 GraphQL 請求

使用 Playwright 等端對端測試框架時，模擬 GraphQL 請求可以顯著提高測試可靠性和速度。受到 Jay Freestone 優秀部落格文章 Stubbing GraphQL Requests in Playwright 的啟發，我決定建立一個可重用的實用函數，允許靈活的 GraphQL 請求攔截和回應存根。

在這篇文章中，我將引導您完成攔截GQL實用程式的實現，並示範如何將其與 Playwright 一起使用來模擬 GraphQL 查詢和突變的伺服器回應。

interceptGQL 實用程式：它是如何運作的

interceptGQL 公用程式為後端的所有 GraphQL 請求註冊路由處理程序，根據操作名稱攔截特定操作。您可以定義每個操作應如何回應並驗證請求中傳遞的變數。

這是實作：

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<{ reqs: InterceptedPayloads }> {
  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: typeof interceptGQL }>({
  interceptGQL: async ({ browser }, use) => {
    await use(interceptGQL);
  },
});

範例：測試任務管理儀表板

為了示範該實用程式的實際效果，讓我們用它來測試任務管理儀表板。我們將攔截 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. 攔截要求：攔截GQL實用程式攔截GetTasks查詢並傳回GetTasksMock中定義的模擬資料。
2. 模擬響應： 提供模擬響應，而不是到達實際後端。
3. 驗證變數：該實用程式還儲存隨請求發送的 GraphQL 變量，這對於單獨測試 API 呼叫非常有用。

為什麼要用這種方法？

1. 提高速度：透過避免實際的網路要求，測試運行得更快、更可靠。
2. 簡化的測試資料：您可以控制回應，從而更輕鬆地測試邊緣情況和各種應用程式狀態。
3. API呼叫驗證：透過擷取隨請求傳送的變量，您可以確保前端使用正確的參數呼叫後端。

這個實作和方法的靈感來自 Jay Freestone 的優秀部落格文章 Stubbing GraphQL Requests in Playwright。他的貼文為構建攔截GQL實用程式提供了堅實的基礎。

透過將此實用程式合併到您的 Playwright 測試套件中，您可以輕鬆模擬 GraphQL 查詢和突變，提高測試速度和可靠性，同時簡化複雜的場景。

以上是Playwright：用於高效測試的實用程式中的 GraphQL 請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！