Testcafe：测试页面失败XHR是否影响UI加载？如何忽略此类请求？

1. 失败的XHR是否是Testcafe页面加载不全的原因？ #

是的，大概率是这个失败的XHR导致的。

Testcafe默认会等待页面所有pending的XHR/fetch请求完成后才继续执行测试逻辑；如果这个失败的XHR带有前端自动重试机制，Testcafe会一直处于等待状态，进而卡住页面后续UI元素的渲染。而手动访问浏览器时，不会因单个请求失败就停止渲染其他元素，因此出现了两种场景的差异。

2. 在Testcafe中如何处理这类XHR请求？ #

有两种常用方案，可根据实际情况选择：

方案一：用RequestMock模拟成功响应 #

通过模拟该请求的成功返回，让Testcafe认为请求已完成，从而不再等待：

import { RequestMock } from 'testcafe';

// 创建请求mock，匹配目标XHR的URL规则
const failedXHRMock = RequestMock()
    .onRequestTo(/your-failed-xhr-url-regex/) // 替换为实际的请求URL匹配规则
    .respond({ /* 模拟后端返回的成功数据 */ }, 200, { 'Content-Type': 'application/json' });

fixture`测试用例集`
    .page`你的页面URL`
    .requestHooks(failedXHRMock); // 启用mock

test('测试页面加载', async t => {
    // 你的测试逻辑
});

方案二：用RequestHook直接拦截中止请求 #

如果不需要该请求返回任何数据，可以直接中止它，避免Testcafe等待：

import { RequestHook } from 'testcafe';

class SkipFailedXHR extends RequestHook {
    constructor(requestFilterRules) {
        super(requestFilterRules, { includeBody: true });
    }

    async onRequest(event) {
        // 直接中止请求
        event.request.abort();
    }
}

// 实例化钩子，匹配目标XHR
const skipXHR = new SkipFailedXHR(/your-failed-xhr-url-regex/);

fixture`测试用例集`
    .page`你的页面URL`
    .requestHooks(skipXHR);

test('测试页面加载', async t => {
    // 你的测试逻辑
});

另外，如果是请求超时导致的等待，也可以调整Testcafe的全局等待超时时间（通过命令行参数--ajax-request-timeout或配置文件设置），但这种方法不如拦截请求精准。

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