Playwright如何创建无需类实例的静态网络响应工具方法？

方案一：高阶函数（函数式绑定page） #

无需创建类，通过高阶函数传入page实例，返回一个已绑定page的工具函数，直接在测试中调用即可。

// 工具函数定义（可放在单独的utils文件中）
import { Page, Response } from '@playwright/test';

export function createWaitForNetworkResponse(page: Page) {
  // 默认timeout设为30000毫秒（30秒），修正原代码中单位错误
  return (responseURL: string, status: number, timeout = 30000): Promise<Response> => {
    return page.waitForResponse(
      (response) => response.url().includes(responseURL) && response.status() === status,
      { timeout }
    );
  };
}

// 测试用例中使用
import { test } from '@playwright/test';
import { createWaitForNetworkResponse } from './utils';

test('验证提交接口响应', async ({ page }) => {
  const waitForNetworkResponse = createWaitForNetworkResponse(page);
  
  // 触发请求操作
  await page.goto('/submit-form');
  await page.click('#submit-button');
  
  // 等待目标响应
  const response = await waitForNetworkResponse('/api/submit-data', 200);
  
  // 验证响应内容
  const responseData = await response.json();
  expect(responseData.success).toBe(true);
});

方案二：扩展Playwright Test Fixture（推荐） #

通过扩展Playwright的测试fixture，将工具函数直接注入测试上下文，无需手动传递page，更符合Playwright最佳实践。

// 自定义fixture文件（比如 fixtures.ts）
import { test as base, Page, Response } from '@playwright/test';

// 定义自定义fixture类型
type NetworkUtilsFixtures = {
  waitForNetworkResponse: (responseURL: string, status: number, timeout?: number) => Promise<Response>;
};

// 扩展base test
export const test = base.extend<NetworkUtilsFixtures>({
  waitForNetworkResponse: async ({ page }, use) => {
    // 绑定当前page实例的工具函数
    const waitFn = (responseURL: string, status: number, timeout = 30000) => {
      return page.waitForResponse(
        (response) => response.url().includes(responseURL) && response.status() === status,
        { timeout }
      );
    };
    
    // 将工具函数注入测试上下文
    await use(waitFn);
  },
});

// 导出expect保持一致
export { expect } from '@playwright/test';

// 测试用例中使用
import { test, expect } from './fixtures';

test('验证登录接口响应', async ({ page, waitForNetworkResponse }) => {
  await page.goto('/login');
  await page.fill('#username', 'demo-user');
  await page.fill('#password', 'demo-pass');
  
  // 提前监听响应，避免请求完成后才开始等待
  const responsePromise = waitForNetworkResponse('/api/login', 200);
  await page.click('#login-btn');
  
  const response = await responsePromise;
  expect(await response.json()).toHaveProperty('accessToken');
});

关键说明 #

• 两种方案均采用函数式写法，无需创建类实例，完全符合你对“静态工具函数”的需求。
• 修正了原代码中timeout?: 30的单位问题：Playwright的waitForResponse超时参数为毫秒，默认设为30000（30秒）更合理。
• 方案二通过fixture注入，无需在每个测试中手动初始化工具函数，代码更简洁且能确保page实例的正确性，推荐项目中使用。

内容的提问来源于stack exchange，提问作者msmith1114