My 'waits' don't work properly in webdriverIO

Question

describe("Purge all", function() {    
    it('Purge all', () => {      
        CachePurgePage.open(PARTNER_ID, ACCOUNT_ID, CONFIGURATION_ID);
        const label = $('[class = "css-1av0y7f-SidebarLinkTitle ezsph7p1"]');

        browser.waitUntil(function(){
            return label.isClickable()
        }, 6000, "Element is not clickable");
        label.click();

        browser.waitUntil(function(){
            return $$('[class ="css-1rqefwa-LabelOutput e9gmw1r4"]')[1].isDisplayed();
        }, 6000, "Element is not displayed")
        $$('[class ="css-1rqefwa-LabelOutput e9gmw1r4"]')[1].click();

        browser.waitUntil(function(){
            return $$('[class *= "Row-StyledTableRow"]')[1].isDisplayed();
        }, 6000, "Element is not clickable")

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

Hi all! My first WDIO test and it's not hard to understand I am new in it. So I came across an interesting problem. The test is working fine when I use browser.pause() but if I only try to implement $element.waitForClickable().click() everething is going wrong. The test doesn't wait for conditions and try to find an element anyway and then click it. Of course he doesn't find anything because the needed page hasn't been downloaded and just click "undefine" element that results in ending the test with error. So I tried browser.waitUntil() and some unexpected steps was going on. First the browser searches for "label = $('[class = "css-1av0y7f-SidebarLinkTitle ezsph7p1"]')" and then click it. The terminal output says that everything is OK. Then starts searching for "$$('[class ="css-1rqefwa-LabelOutput e9gmw1r4"]')[1]" and can't locate it cause IRL the click() on the previous element didn't happen. I can't understand why it's working this way. I have 94 chromedriver, 7.14 wdio and 14 node.js and tried it on 85 chromedriver, 6.7 wdio and 12 node.js there are no any differences

Answer 1

Check the examples here: https://webdriver.io/docs/api/browser/waitUntil/

You will notice that you are missing async/await notations.

Basically browser.waitUntil returns a Promise() which you are just ignoring.

since NodeJs v16 sync. mode is deprecated:

---

Try this:

describe("Purge all", function() {    
    it('Purge all', async () => {      
        CachePurgePage.open(PARTNER_ID, ACCOUNT_ID, CONFIGURATION_ID);
        const label = $('[class = "css-1av0y7f-SidebarLinkTitle ezsph7p1"]');

        await browser.waitUntil(function(){
            return label.isClickable()
        }, 6000, "Element is not clickable");
        label.click();

        await browser.waitUntil(function(){
            return $$('[class ="css-1rqefwa-LabelOutput e9gmw1r4"]')[1].isDisplayed();
        }, 6000, "Element is not displayed")
        $$('[class ="css-1rqefwa-LabelOutput e9gmw1r4"]')[1].click();

        await browser.waitUntil(function(){
            return $$('[class *= "Row-StyledTableRow"]')[1].isDisplayed();
        }, 6000, "Element is not clickable")

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