Error: Argument of type 'ChainablePromiseElement' is not assignable to parameter of type 'Element'. Types of property 'parent' are incompatible. Type 'Promise<Browser | Element | MultiRemoteBrowser>' is not assignable to type 'Browser | Element'

[Dharmishta12]

I have set up the webdriver version 9.
In my previous version code everything was working fine here I am getting error when I upgraded it.

This is my isDisplayed function code :

async isDisplayed(element : WebdriverIO.Element) {
const flag = await element.isDisplayed()
return flag
}

Now this is being using into my different method given below:

async isCepDisplayed(cepCode: string){
const cepCodeRow = $('.//td[contains(text(),'+cepCode+')]/..')
await browser.pause(3000)
let isRowDisplayed= await homePage.isDisplayed(cepCodeRow);
return isRowDisplayed;
}

Now here error is coming over argument passed "cepCodeRow" this error:
Argument of type 'ChainablePromiseElement' is not assignable to parameter of type 'Element'.
Types of property 'parent' are incompatible.
Type 'Promise<Browser | Element | MultiRemoteBrowser>' is not assignable to type 'Browser | Element'.

So to resolve this error I have updated my code by updating the element type from WebdriverIO.Element to ChainablePromiseElement

This is how my updated code looked like:
async isDisplayed(element : ChainablePromiesElement ) {
const flag = await element.isDisplayed()
return flag
}

By changing its type the error got resolved but when I run the script then it was not recognizing the isDisplayed() function.
and inside node modules isDisplayed function was implicitly defined as this: WebdriverIO.Element

Kindly suggest me a suitable solution.

[christian-bromann]

How about:

async isDisplayed(element: WebdriverIO.Element | ChainablePromiseElement) {
  const flag = await element.isDisplayed()
  return flag
}

I honestly would call isDisplayed directly on the element instead of the page object since there is not much logic except returning the value for it.

[Dharmishta12]

Hello Christian,

Thankyou for replying!

I have tried this :
async isDisplayed(element: WebdriverIO.Element | ChainablePromiseElement) {
const flag = await element.isDisplayed()
return flag
}

then I am getting error over element which is :
The 'this' context of type 'Element | ChainablePromiseElement' is not assignable to method's 'this' of type 'Element'.
Type 'ChainablePromiseElement' is not assignable to type 'Element'.
Types of property 'parent' are incompatible.
Type 'Promise<Element | Browser | MultiRemoteBrowser>' is not assignable to type 'Element | Browser'.ts(2684)
(parameter) element: WebdriverIO.Element | ChainablePromiseElement
: web element

@param element — : web element

And as you have suggested to directly call isDisplayed on the element then still it is showing same error when I run the script which was coming earlier:
Error: WebDriver Bidi command "script.callFunction" failed with error: invalid argument - Invalid input in "arguments"/0.

Is this happening because of version 9 upgradation?

[christian-bromann]

Can you maybe provide a minimal reproducible example?

[Dharmishta12]

Sure,

This is my step definition scenario code where I am validating that element is displaying or not :

When(/^User validates that the (.) displayed is (.)$/, async (ElementName: string, Flag : string) => {
await browser.pause(3000)
if(Flag.includes("true"))
await expect(await AdvanceSearchPage.isCepDisplayed(ElementName)).toEqual(true)
else
await expect(await AdvanceSearchPage.isCepDisplayed(ElementName)).toEqual(false)
});

And this isCepDisplayed function is define in my page.ts:

async isCepDisplayed(cepCode: string){
const cepCodeRow = $('./mylocator+')]/..')
await browser.pause(3000)
// let isRowDisplayed= await homePage.isDisplayed(cepCodeRow);
let isRowDisplayed= await cepCodeRow.isDisplayed()
return isRowDisplayed; }

As you suggested I have directly called the isDisplayed function here you can see the comment out portion where I was using the function I declared from main page.ts displayed function which is this 👍

async isDisplayed(element : WebdriverIO.Element )
{
const flag = await element.isDisplayed ()
return flag
}

And this my error coming while I am running the file :
Error: WebDriver Bidi command "script.callFunction" failed with error: invalid argument - Invalid input in "arguments"/0.

[christian-bromann]

@Dharmishta12 can you create a small project that I can checkout and investigate?

[stefanheinze]

just as a comment. we are facing exacly the same issue while trying to update wdio from version 8 to version 9. therefore we are also interested in the root cause of that. For all our selectors we get the error that instead of an Element we are getting a ChainablePromiseElement and we can not run our tests.