Playwright：用于高效测试的实用程序中的 GraphQL 请求

PHP中文网 • 2025年3月7日 08:14:49 • 编程技术 • 阅读 2

使用 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;type operations = keyof (typeof namedoperations)['query'] | keyof (typeof namedoperations)['mutation'];type interceptconfig = {  operationname: operations | string;  res: record;};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);  },});

登录后复制

示例：测试任务管理仪表板

为了演示该实用程序的实际效果，让我们用它来测试任务管理仪表板。我们将拦截 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');  });});

登录后复制