Playwright：用於高效測試的實用程式中的 GraphQL 請求-js教程-PHP中文網

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

DDD

發布： 2024-11-30 01:36:14

原創

115 人瀏覽過

Playwright: GraphQL Requests in A Utility for Efficient Testing

使用 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');
  });
});

登入後複製