如何在TestCafe客户端脚本中实现阻塞式await完成REST调用

推荐方案：TestCafe侧完成REST调用，传参到客户端脚本 #

这种方式避开客户端跨域、异步阻塞的问题，步骤清晰：

• 步骤1：在测试代码中执行REST请求
  用TestCafe内置的t.request方法（或Node.js的请求库）获取接口数据。
• 步骤2：将结果传入客户端脚本
  通过clientScripts的args参数传递数据，同时开启injectImmediately: true确保脚本在页面其他JS前执行。
• 步骤3：客户端脚本应用结果
  接收传入的数据，提前修改全局变量、DOM等，供后续页面JS使用。

示例代码：

import { Selector } from 'testcafe';

fixture`Pre-apply REST Data`
    .clientScripts({
        content: `
            // 接收TestCafe传入的接口数据
            const restData = window.testCafeClientScriptArgs.restData;
            // 在页面JS执行前注入全局数据
            window.pageInitConfig = restData;
        `,
        args: { restData: null }, // 占位，测试代码中动态赋值
        injectImmediately: true // 核心：确保脚本优先执行
    });

test('Inject REST data before page loads', async t => {
    // 1. 调用接口获取数据
    const apiResponse = await t.request('https://your-api-domain.com/get-init-data');
    const restData = apiResponse.body;

    // 2. 更新客户端脚本的参数
    await t.setClientScriptOptions({ args: { restData } });

    // 3. 导航到目标页面，此时数据已提前注入
    await t.navigateTo('https://your-target-page.com');

    // 验证数据是否生效
    const injectedData = await t.eval(() => window.pageInitConfig);
    await t.expect(injectedData).eql(restData);
});

备选方案：客户端脚本内实现阻塞式请求（不推荐） #

如果必须在客户端侧发请求，可通过同步XMLHttpRequest实现阻塞（但该方式已被浏览器标记为不推荐，会阻塞主线程）：

fixture`Client-side Blocking Request`
    .clientScripts({
        content: `
            // 同步XHR实现阻塞调用
            function syncGet(url) {
                const xhr = new XMLHttpRequest();
                xhr.open('GET', url, false); // false开启同步模式
                xhr.send();
                if (xhr.status === 200) return JSON.parse(xhr.responseText);
                throw new Error('Request failed with status ' + xhr.status);
            }

            // 在页面JS执行前获取并应用数据
            const restData = syncGet('https://your-api-domain.com/get-init-data');
            window.pageInitConfig = restData;
        `,
        injectImmediately: true
    });

test('Test client-side blocking logic', async t => {
    await t.navigateTo('https://your-target-page.com');
    const injectedData = await t.eval(() => window.pageInitConfig);
    await t.expect(injectedData).ok();
});

核心注意事项 #

• injectImmediately: true是必须项，否则客户端脚本会在DOM加载完成后才执行，无法优先于页面其他JS。
• 推荐方案中，务必先完成接口请求、设置参数，再导航到目标页面，确保数据在页面加载前注入。
• 若客户端脚本是外部文件，将content替换为path: './your-script.js'即可，args传参逻辑不变。

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