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中文网其他相关文章！