*
* Returns true if element exists in the DOM.
*
* :::info
*
* As opposed to other element commands WebdriverIO will not wait for the element
* to exist to execute this command.
*
* :::
*
* <example>
:index.html
<div id="notDisplayed" style="display: none"></div>
<div id="notVisible" style="visibility: hidden"></div>
<div id="notInViewport" style="position:absolute; left: 9999999"></div>
<div id="zeroOpacity" style="opacity: 0"></div>
:isExisting.js
it('should detect if elements are existing', async () => {
let elem = await $('#someRandomNonExistingElement')
let isExisting = await elem.isExisting()
console.log(isExisting); // outputs: false
elem = await $('#notDisplayed')
isExisting = await elem.isExisting()
console.log(isExisting); // outputs: true
elem = await $('#notVisible')
isExisting = await elem.isExisting()
console.log(isExisting); // outputs: true
elem = await $('#notInViewport')
isExisting = await elem.isExisting()
console.log(isExisting); // outputs: true
elem = await $('#zeroOpacity')
isExisting = await elem.isExisting()
console.log(isExisting); // outputs: true
});
* </example>
*
* @alias element.isExisting
* @return {Boolean} true if element(s)* [is|are] existing
* @uses protocol/elements
* @type state
*
*/
export async function isExisting (this: WebdriverIO.Element) {
* if an element was composed via `const elem = $({ 'element-6066-11e4-a52e-4f735466cecf': <elementId> })`
* we don't have any selector information. Therefore we can only check existance
* by calling a command with the element id to check if it is successful or not.
* Using `getElementTagName` to validate the element existance works as it is
* a command that should be available for desktop and mobile and fails with a
* stale element exeception if element is not existing.
*/
if (!this.selector) {
return this.getElementTagName(this.elementId).then(
() => true,
() => false
)
}
const command = this.isReactElement
? this.parent.react$$.bind(this.parent)
: this.isShadowElement
? this.shadow$$.bind(this.parent)
: this.parent.$$.bind(this.parent)
return command(this.selector as string)
.getElements()
.then((res) => res.length > 0)
}
