Playwright组件测试拦截多API请求时超时问题排查

核心问题 #

你当前的实现存在两个关键隐患：

1. 变量作用域错误：beforeEach里定义的requestURL是局部变量，测试用例根本无法访问到（你的代码能运行大概率是实际代码中误用了全局变量），多个测试用例执行时会出现变量覆盖、断言逻辑混乱的问题。
2. 异步时序失控：beforeEach中提前等待networkidle的时机不合理，后续测试用例触发的请求无法被正确关联，测试用例增多后，未处理的请求堆积导致超时。

优化方案 #

改用page.waitForRequest在每个测试用例中独立捕获目标请求，彻底避免跨用例的状态干扰，同时保证请求与操作的时序一致性。

修改后的代码示例

// 移除beforeEach中冗余的路由拦截和networkidle等待，仅保留页面初始化逻辑
test.beforeEach(async ({ page }) => {
  await page.goto('/your-target-page'); // 组件测试对应mount操作
});

test('PRODUCT SHARE CLICK EVENT', async ({ page }) => {
  // 先创建请求等待Promise，再执行点击操作
  const shareRequest = page.waitForRequest(req => 
    req.url().includes('/abcd/sax/') && req.url().includes('SHARE')
  );
  await page.locator('[data-auto-id="btn1"]').click();
  // 等待请求完成后断言
  const request = await shareRequest;
  expect(request.url()).toContain('SHARE');
});

test('SIZE CHANGE EVENT', async ({ page }) => {
  const sizeRequest = page.waitForRequest(req => 
    req.url().includes('/abcd/sax/') && req.url().includes('SIZE')
  );
  await page.locator('[data-auto-id="BTN2"]').click();
  const request = await sizeRequest;
  expect(request.url()).toContain('SIZE');
});

额外优化建议 #

• 避免全局状态共享：每个测试用例独立处理请求捕获，彻底杜绝跨用例的状态污染。
• 精准匹配请求：在waitForRequest的回调中增加更多匹配条件（比如请求方法req.method() === 'POST'），避免误捕获无关请求。
• 清理未完成请求：如果测试后仍有残留请求，可在afterEach中添加page.waitForLoadState('networkidle')，确保每个测试用例结束后网络状态干净。

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