webdriverio element undefined inside arrow function

Question

I am working on webdriverio automation project. I have the following code.

waitUntilVisible(element, maxTimeOut) {
    console.log("********** PARAMETER ************" + element);

    const testelement = $('#identifierId');

    browser.waitUntil(testelement => {

        console.log("************** INSIDE *********" + testelement);

        return testelement.isDisplayed();

    }, maxTimeOut, 'Wait for element to be visible');
}

testelement is always returning undefined. Could some one suggest me what is going wrong.

Answer 1

Why don't use waitForDisplayed?

But if you want to use your own - you have problem with calling your function

waitUntilVisible(element, maxTimeOut) {
    console.log("********** PARAMETER ************" + element);
    //this is never called due same name of variable in fn waitUntil
    const testelement = $('#identifierId');

Possible fixes:

// if you want to pass selector 
waitUntilVisible(elementSelector, maxTimeOut) {
    console.log("********** PARAMETER ************" + elementSelector);
    browser.waitUntil(testelement => {
        console.log("************** INSIDE *********" + elementSelector);
        return $(elementSelector).isDisplayed();
    }, maxTimeOut, 'Wait for element to be visible');
}

// if you want to pass WebDriverIO object 
waitUntilVisible(element, maxTimeOut) {
    console.log("********** PARAMETER ************");
    browser.waitUntil( () => {
        console.log("************** INSIDE *********");
        return element.isDisplayed();
    }, maxTimeOut, 'Wait for element to be visible');
}