WebdriverIO等待功能异常：waitUntil与waitForClickable不生效问题咨询

排查与解决步骤 #

• 修正元素查询时机，避免提前捕获失效引用
  你现有代码中在页面刚打开时就执行const label = $('xxx')捕获元素，此时DOM尚未加载完成，该变量指向的是初始空DOM的无效引用，后续waitUntil判断的一直是这个失效元素的状态，自然会出现判断通过但实际元素不存在、点击不生效的问题。需要将元素查询放到waitUntil的回调函数中，每次判断都重新查询最新DOM中的元素。如果你想用更简便的waitForClickable写法，直接执行$('选择器').waitForClickable({ timeout: 6000 }).click()即可，不要提前把元素赋值给变量，就能避免引用失效的问题。
• 更换更稳定的类选择器写法
  使用[class="完整类名"]的全匹配写法容错率极低，只要CSS类的顺序变化、动态增减类、类名间空格数量变化都会导致匹配失败。建议改用多类选择器写法，例如.css-1av0y7f-SidebarLinkTitle.ezsph7p1，只要元素同时包含这两个类就能匹配成功。
• 补充$$选择器的长度校验
  你直接对$$('xxx')[1]调用方法，当查询结果不足2个时会直接抛出undefined调用方法的错误，需要在判断元素显示状态前先校验数组长度是否符合预期。
• 解决点击不生效的问题
  若确认元素已存在但点击无响应，可先将元素滚动到视口内再执行点击，常规点击无效时可改用JS注入的方式强制触发点击。

修正后的代码示例 #

describe("Purge all", function() {    
    it('Purge all', () => {      
        CachePurgePage.open(PARTNER_ID, ACCOUNT_ID, CONFIGURATION_ID);

        // 等待侧边栏元素可点击后再点击
        browser.waitUntil(function(){
            const label = $('.css-1av0y7f-SidebarLinkTitle.ezsph7p1');
            return label.isClickable()
        }, 6000, "Sidebar link is not clickable");
        // 点击前先滚动到元素位置
        $('.css-1av0y7f-SidebarLinkTitle.ezsph7p1').scrollIntoView().click();

        // 等待目标标签显示
        browser.waitUntil(function(){
            const labels = $$('.css-1rqefwa-LabelOutput.e9gmw1r4');
            return labels.length >=2 && labels[1].isDisplayed();
        }, 6000, "Target label is not displayed");
        $$('.css-1rqefwa-LabelOutput.e9gmw1r4')[1].scrollIntoView().click();

        // 等待表格行加载
        browser.waitUntil(function(){
            const rows = $$('[class*="Row-StyledTableRow"]');
            return rows.length >=2 && rows[1].isDisplayed();
        }, 6000, "Table row is not displayed");

        const firstTR = CachePurgePage.tableTasksInfo[0];
        const internalTDs = firstTR.$$('.css-zr137n-Cell.eveacmn0');
        expect(internalTDs[1]).toHaveText('2');
    });
});

额外验证方案 #

如果修改后仍然存在点击不生效的问题，可在点击前加100ms左右的短暂停（远小于全流程的硬暂停时长，不会影响执行效率），或是将click()替换为browser.execute("arguments[0].click()", 元素变量)用JS强制触发点击。

内容的提问来源于stack exchange，提问作者Павел Родин