如何在Playwright中等待请求响应并超时后忽略以测试降级模式？

核心思路是用Promise.race()将waitForResponse与一个超时Promise结合，这样即使请求超时未响应，测试也不会终止，而是继续执行后续逻辑验证降级模式。

基础封装工具函数 #

先封装一个可选等待响应的工具函数，统一处理超时逻辑：

async function waitForResponseOptional(page, matchCondition, timeoutMs = 3000) {
  try {
    return await Promise.race([
      page.waitForResponse(matchCondition),
      new Promise(resolve => setTimeout(() => resolve(null), timeoutMs))
    ]);
  } catch (e) {
    // 捕获请求过程中可能出现的异常，返回null表示未获取到有效响应
    return null;
  }
}

测试降级模式的完整示例 #

在测试中调用这个函数，触发操作后可选等待响应，再验证降级行为：

test('验证接口超时后的降级展示', async ({ page }) => {
  // 导航到目标页面
  await page.goto('/target-page');

  // 触发可能发起请求的操作（比如点击数据加载按钮）
  await page.click('#load-data-btn');

  // 可选等待响应，超时时间设为2秒
  const response = await waitForResponseOptional(
    page, 
    res => res.url().includes('/api/get-data') && res.status() === 200,
    2000
  );

  // 根据响应是否存在判断逻辑分支
  if (!response) {
    // 验证降级UI是否正常显示
    await expect(page.locator('.fallback-content')).toBeVisible();
    await expect(page.locator('.fallback-content')).toHaveText('数据加载失败，请稍后重试');
    // 其他降级逻辑验证（比如本地缓存数据展示等）
  } else {
    // 可选：验证正常响应下的UI表现（如果需要覆盖双场景测试）
    await expect(page.locator('.normal-content')).toBeVisible();
  }
});

关键细节说明 #

• 可以通过matchCondition回调精确匹配请求：比如指定请求方法、状态码、请求体等，确保只等待目标请求
• 超时时间需根据实际场景调整：既要给正常响应留足时间，又要避免过长等待拖慢测试效率
• 若请求可能根本不会发起，这种方式依然有效，超时后会返回null，不影响后续测试流程

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