自动化React页面使用route.fetch()遇Test ended错误，求排查原因

问题描述 #

我在对React页面进行自动化测试时，使用route.fetch()函数运行测试遇到了以下错误：

Error: route.fetch: Test ended.
Call log:

• → GET /analytics?startDate=2024-02-11T13:00:00.000Z&endDate=2024-03-13T12:59:59.999Z
• user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.6167.57 Safari/537.36

测试代码如下：

await page.route("**/analytics?startDate=**", async (route) => {
    const response = await route.fetch();
    const result = await response.json();
    const respBody = JSON.parse(JSON.stringify(result));
    expect(response.status()).toBe(200);
    expect(respBody["own"]).not.toBeNull;
    expect(respBody).toHaveProperty(child1);

    return route.continue();
});

await PW.visit(route_dashboard_page, page);
await dashboard.awaitDashboardLoaded();

这段代码此前在非React页面中可正常运行，请问出现该错误的可能原因是什么？

可能的原因分析 #

• React异步渲染延迟了请求触发时机
  React页面依赖hydration过程完成组件渲染，可能会推迟/analytics请求的发起时间。当await dashboard.awaitDashboardLoaded()执行完成后，测试框架误以为测试已结束，但此时请求才刚触发，route.fetch()还没处理完就被终止，从而抛出"Test ended"错误。而非React页面一般是同步发起请求，测试能在结束前完成拦截处理。

• 测试超时设置过短
  React页面的渲染和数据请求都是异步的，如果测试的超时时间设置得太短，/analytics请求还没被route.fetch()处理完，测试就已经超时结束。非React页面请求触发早，能在超时前完成整个流程。

• 路由匹配规则在React环境下的适配问题
  React应用常用客户端路由，对URL的处理逻辑和静态页面不同，可能导致你的匹配规则**/analytics?startDate=**没有正确匹配到请求，或者匹配时机滞后。比如React路由切换时的状态变化，可能让请求触发时机和非React页面不一致，测试结束后请求才被匹配到，自然报错。

• awaitDashboardLoaded()的判断逻辑不全面
  这个方法可能只判断了DOM渲染完成，但没等待/analytics请求完成。非React页面中DOM加载完成后请求也处理完了，但React页面里DOM渲染完成后请求可能还在发送中，测试结束后route.fetch()才开始处理，就会出现这个错误。

• 请求处理的执行顺序问题
  React的调度机制可能导致请求并发处理，route.fetch()还没执行完，测试就已经走到了结束阶段。另外可以检查下return route.continue()的写法，虽然非React页面能跑通，但有些场景下直接调用route.continue()更稳妥，避免返回值导致的异步流程异常。

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