Jest + Puppeteer端到端测试用例实际通过却被误报失败的异常问题

问题现象 #

• 编写覆盖用户注册到账号删除全流程的E2E测试用例，实际执行时Puppeteer可顺利完成账号创建、删除全流程操作，业务运行逻辑完全符合预期
• 测试结果中存在1条无任何错误详情的失败用例，测试结果截图如下：
  
• 所有用例按顺序串行执行，后续用例强依赖前序用例执行完成，被标记为失败的用例名为click to settings link
• 该用例实际并未出现逻辑执行失败：如果该用例真的执行中断，后续所有依赖跳转后页面的用例不可能全部运行成功；主动跳过该用例时，后续所有用例都会执行失败
• 先后两次调整该用例的实现逻辑，依然会被标记为失败，两版代码如下：
  第一版实现：

test('click to settings link', async () => {
  const linkSelector = '#navbar-link-settings';
  await page.waitForSelector(linkSelector);

  await page.click(linkSelector);
  await expect(page).toMatch('Account');
});

第二版调整后的实现：

test('click to settings link', async () => {
  const linkSelector = '#navbar-link-settings';
  await page.waitForSelector(linkSelector);

  await expect(page).toClick(linkSelector);
});

问题原因 #

该异常是Jest默认用例超时机制+点击跳转逻辑缺失导航等待共同导致的：

• 点击设置链接后页面会触发路由跳转，但两版用例代码中都没有等待导航完成的逻辑，点击操作触发后就直接进入断言或结束流程
• 页面跳转的异步资源加载过程中，Jest默认的单用例超时阈值（默认5秒）触发，此时既没有出现元素不存在、断言不匹配这类可捕获的显式错误，Jest会直接标记用例失败，且不会输出具体错误详情
• 后续用例可正常执行的原因是：Jest标记超时失败后，Puppeteer的页面实例不会被销毁重置，等后续用例开始执行时，页面已经完成跳转加载，因此后续操作都能正常运行，才会出现「用例标记失败但全流程跑通」的矛盾表现；主动跳过该用例时，点击跳转操作没有触发，后续用例自然会因为停留在原页面执行失败。

修复方案 #

点击会触发页面跳转的元素时，必须搭配waitForNavigation等待导航完成，注意点击动作和等待导航需要用Promise.all包裹，避免点击触发后导航事件漏监听，修正后的代码如下：

test('click to settings link', async () => {
  const linkSelector = '#navbar-link-settings';
  await page.waitForSelector(linkSelector);

  await Promise.all([
    // 等待策略可根据业务场景调整，domcontentloaded表示DOM解析完成即返回，也可选择networkidle0等待网络完全空闲
    page.waitForNavigation({ waitUntil: 'domcontentloaded' }),
    page.click(linkSelector)
  ]);
  await expect(page).toMatch('Account');
});

如果单条用例确实需要更长加载时间，可以给该用例单独设置超时阈值，示例如下：

test('click to settings link', async () => {
  // 上述业务逻辑
}, 10000); // 将单用例超时时间设置为10秒

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