Playwright E2E测试：关闭重开标签页后Fetch API返回null问题

问题背景 #

使用Playwright编写E2E测试模拟关闭并重新打开标签页恢复答题会话时，发现重开标签页后localStorage数据保留正常，但Fetch API获取题目列表返回null，导致无法恢复到正确的答题位置。测试场景为：初始化localStorage后回答2道题（进入第3题），关闭标签页重新打开，预期应用通过API获取全部题目并根据localStorage的currentQuestion值渲染对应题目。

疑问解答与修复建议 #

1. 为何localStorage数据正确，但重开标签页后Fetch API返回null？ #

大概率是应用初始化逻辑的时机问题：

• 应用可能在读取localStorage后，未等待API请求完成就尝试渲染题目，此时API还未返回数据，临时用null填充；
• 或者重开标签页时，应用错误地认为已有localStorage数据就无需发起API请求，直接尝试使用不存在的题目数据；
• 也可能是页面加载时API请求发起过早，遇到网络延迟或页面状态未就绪导致请求失败，应用捕获错误后返回null。

2. 该问题是否与重开标签页后的API调用方式有关？或是Playwright的浏览器上下文处理存在特殊点？ #

Playwright的browserContext会共享localStorage、cookie等存储，因此同一个context下的新页面能正常读取之前的localStorage数据，上下文处理本身没有问题。问题更可能出在：

• 应用的API调用逻辑：比如首次加载和重加载时的API触发条件不一致；
• 测试中的等待逻辑：使用固定时长的waitForTimeout无法保证API请求完成，导致提前检查页面状态时API还未返回数据。

3. 如何确保Fetch调用能正确获取全部题目，使应用恢复到正确的答题位置？ #

可以从测试逻辑优化和应用代码检查两方面入手：

测试逻辑优化

• 替换固定等待为请求/元素等待：
  去掉不可靠的waitForTimeout，改为等待API请求完成或目标元素加载：

  page = await context.newPage();
  // 监听获取题目的API请求，等待其成功返回
  const questionsResponse = page.waitForResponse(response => 
    response.url().includes('/api/questions') && response.ok()
  );
  await page.goto('http://localhost:5173');
  await questionsResponse; // 等待API请求完成
  
  // 再检查页面状态
  await expect(page.locator('[data-testid="current-question"]')).toHaveText('3/5');
  

• 验证API响应数据：
  在测试中直接获取API响应，确认数据正常：

  const questionsResponse = page.waitForResponse(response => 
    response.url().includes('/api/questions') && response.ok()
  );
  await page.goto('http://localhost:5173');
  const response = await questionsResponse;
  const questions = await response.json();
  expect(questions).toBeInstanceOf(Array);
  expect(questions.length).toBeGreaterThan(0);
  

• 捕获控制台错误：
  监听页面控制台输出，排查应用是否有报错：

  page.on('console', msg => {
    if (msg.type() === 'error') console.log('应用报错:', msg.text());
  });
  

应用代码检查

• 确保重加载时必发起API请求：
  无论localStorage是否存在currentQuestion，应用初始化时都要先发起API请求获取完整题目列表，再根据currentQuestion定位到对应题目，避免依赖localStorage直接渲染不存在的数据。
• 调整API请求时机：
  确保API请求在页面初始化的正确生命周期钩子中发起（比如React的useEffect、Vue的onMounted），且在请求完成前显示加载状态，避免提前渲染。
• 检查会话过期逻辑：
  如果应用有expirationTime判断，确认重开标签页时该时间未过期，避免因会话过期导致API请求被拦截。

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