isDisplayed

Return true if the selected DOM-element is displayed (even when the element is outside the viewport). If you want to verify that the element is also not within the viewport, use the isDisplayedInViewport command.

info

As opposed to other element commands WebdriverIO will not wait for the element to exist to execute this command.

WebdriverIO, when conducting browser tests, utilizes a custom script specifically designed to assess the visibility of elements. This script is key in determining whether an element is displayed on the page. Conversely, for native mobile testing scenarios with Appium, WebdriverIO defers to the isElementDisplayed command provided by Appium. This command evaluates the visibility of elements using criteria established by the underlying Appium driver, ensuring accurate and driver-specific assessments for mobile applications.

Usage

$(selector).isDisplayed()

Examples

index.html

<div id="noSize"></div>
<div id="noSizeWithContent">Hello World!</div>
<div id="notDisplayed" style="width: 10px; height: 10px; display: none"></div>
<div id="notVisible" style="width: 10px; height: 10px; visibility: hidden"></div>
<div id="zeroOpacity" style="width: 10px; height: 10px; opacity: 0"></div>
<div id="notInViewport" style="width: 10px; height: 10px; position:fixed; top: 999999; left: 999999"></div>

isDisplayed.js

it('should detect if an element is displayed', async () => {
    elem = await $('#notExisting');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    let elem = await $('#noSize');
    let isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    let elem = await $('#noSizeWithContent');
    let isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: true

    let elem = await $('#notDisplayed');
    let isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    elem = await $('#notVisible');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    elem = await $('#zeroOpacity');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: false

    elem = await $('#notInViewport');
    isDisplayed = await elem.isDisplayed();
    console.log(isDisplayed); // outputs: true
});