使用TestCafe自动化时，如何等待加载图标消失再执行操作？

核心思路 #

TestCafe自带基于条件的等待机制，完全可以替代硬编码的wait(ms)——直接通过断言等待加载图标元素不存在或不可见，比硬等待更灵活可靠，还能避免不必要的时间浪费。

具体实现方法 #

1. 基础实现：等待加载图标从DOM中移除

先定位你的加载图标元素（替换成项目里实际的选择器，比如类名、ID），然后用expect断言它不存在，同时设置超时时间防止无限等待：

import { Selector } from 'testcafe';

fixture '测试场景'
    .page '你的测试页面地址';

test('操作后等待加载完成', async t => {
    // 触发需要加载的操作（比如点击提交按钮）
    await t.click('#submit-btn');

    // 定义加载图标选择器
    const loadingIcon = Selector('.global-loading-spinner');

    // 等待加载图标消失（不存在），超时10秒
    await t.expect(loadingIcon.exists).notOk({ timeout: 10000 });

    // 加载完成后执行后续步骤
    await t.expect(Selector('#success-message').visible).ok();
});

2. 针对“隐藏而非移除”的加载图标

如果加载图标是通过CSS（比如display: none或visibility: hidden）隐藏、而非从DOM中移除的，就检查元素的可见性：

// 等待加载图标不可见
await t.expect(loadingIcon.visible).notOk({ timeout: 10000 });

3. 封装复用函数

如果多个测试用例都需要等待加载，可以封装成工具函数，减少重复代码：

// 封装等待加载完成的函数
async function waitForLoading(t, loadingSelector, timeout = 10000) {
    await t.expect(loadingSelector.exists).notOk({ timeout });
}

// 在测试中调用
test('复用加载等待逻辑', async t => {
    await t.click('#data-refresh-btn');
    const loadingSpinner = Selector('#table-loading');
    await waitForLoading(t, loadingSpinner);
    
    // 继续后续断言
    await t.expect(Selector('.table-row').count).gte(1);
});

注意事项 #

• 确保加载图标的选择器是唯一的，避免匹配到多个元素导致断言出错；
• 超时时间根据网站实际加载性能调整，一般设置8-15秒即可；
• 如果页面存在多个不同场景的加载图标（比如列表加载、弹窗加载），需要分别定义对应的选择器进行等待。

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