如何在Testcafe中等待元素变为可点击状态？

Testcafe本身自带自动等待机制，默认会等待元素处于可见、启用且可交互的状态，所以大多数情况下直接调用click()方法即可，无需额外等待：

import { t } from 'testcafe';

await t.click('.--departure');

如果元素暂时不可点击，Testcafe会自动等待直到元素满足条件，超时后才会抛出错误。

若你需要显式实现类似WebdriverIO的waitUntil/waitForClickable逻辑，可以通过以下方式实现：

方式一：使用ClientFunction检查元素可点击状态 #

先定义一个客户端函数，用于判断元素是否真正可点击（包括可见、无遮挡）：

import { ClientFunction, t } from 'testcafe';

const isElementClickable = ClientFunction(selector => {
    const element = document.querySelector(selector);
    if (!element) return false;
    
    const rect = element.getBoundingClientRect();
    // 验证元素尺寸有效、可见，且点击位置没有被其他元素遮挡
    return rect.width > 0 && rect.height > 0 && 
           document.elementFromPoint(rect.left + rect.width/2, rect.top + rect.height/2) === element;
});

// 等待元素可点击，超时设为5秒
await t.wait(async () => await isElementClickable('.--departure'), { timeout: 5000 });
await t.click('.--departure');

方式二：结合断言分步验证 #

通过断言依次检查元素的存在性、可见性和启用状态，确保元素可点击：

import { Selector, t } from 'testcafe';

const depInput = Selector('.--departure');

await t
    .expect(depInput.exists).ok('元素不存在')
    .expect(depInput.visible).ok('元素不可见')
    .expect(depInput.enabled).ok('元素未启用')
    .click(depInput);

Testcafe没有提供与WebdriverIO完全对应的waitForClickable方法，但上述两种方式可以实现相同的等待逻辑。优先推荐直接使用click()方法，Testcafe的自动等待已经能覆盖绝大多数场景。

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