Playwright API调用代码复用报错：Request context disposed 求解决

我想把example.test.ts中的测试代码迁移到commonOperations.ts实现复用：

原example.test.ts测试代码：

test('Test name', async ({ request }) => {
  let response = await request.put(`${process.env.BASE_URL}/import`, { headers: { authorization: `Bearer ${token}` }, data: JSON.parse(quizSamples.getQuizData(2, 2, 100, 200)) });
  expect(response.status()).toBe(200);
});

我在commonOperations.ts中创建了CommonOperations类及importQuizBE方法：

export class CommonOperations {
    readonly page: Page;
    constructor(page: Page) {
        this.page = page;
    }

    async importQuizBE(request: any, token: any, quizData: any, expectedStatus: number) {
        let response = await request.put(`${process.env.BASE_URL}/import`, { headers: { authorization: `Bearer ${token}` }, data: JSON.parse(quizData) });
        expect(response.status()).toBe(expectedStatus);
    }
}

然后更新example.test.ts调用该方法：

test('Test name', async ({ request }) => {
  const comOperations = new commonOperations.CommonOperations(page);
  let response = comOperations.importQuizBE(request, token, quizSamples.getQuizData(2, 2, 100, 200), 200)
});

但运行时报错：Request context disposed.，请问如何正确迁移API调用实现代码复用？

错误原因分析 #

1. 异步方法未加await：调用importQuizBE时没加await，导致测试函数提前执行完毕，Playwright会销毁当前测试的request上下文，此时API请求还在处理，就会抛出Request context disposed错误。
2. 冗余依赖page：importQuizBE是API操作，完全不需要页面实例Page，构造函数传入page属于无效依赖。
3. 类型模糊：参数用any类型，不利于代码维护和类型检查。

修正后的代码 #

1. 重构commonOperations.ts

去掉冗余的page依赖，明确参数类型：

import { APIRequestContext } from '@playwright/test';

export class CommonOperations {
  async importQuizBE(
    request: APIRequestContext,
    token: string,
    quizData: string,
    expectedStatus: number
  ) {
    const response = await request.put(`${process.env.BASE_URL}/import`, {
      headers: { authorization: `Bearer ${token}` },
      data: JSON.parse(quizData)
    });
    expect(response.status()).toBe(expectedStatus);
    return response; // 按需返回响应结果
  }
}

2. 修正example.test.ts调用逻辑

添加await，去掉无效的page参数：

import { test } from '@playwright/test';
import { CommonOperations } from './commonOperations';
import quizSamples from './quizSamples';

test('Test name', async ({ request }) => {
  const comOperations = new CommonOperations();
  const response = await comOperations.importQuizBE(
    request,
    token, // 确保token已正确定义或导入
    quizSamples.getQuizData(2, 2, 100, 200),
    200
  );
});

额外注意事项 #

• 如果quizSamples.getQuizData返回的是JSON对象而非字符串，需要去掉commonOperations.ts中的JSON.parse，避免重复解析导致错误。
• 若多个测试需要复用CommonOperations，可以在beforeEach钩子中初始化实例，减少重复代码：

  let comOperations: CommonOperations;
  
  beforeEach(() => {
    comOperations = new CommonOperations();
  });
  

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