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

登录后复制