Skip to main content

isDisplayedInViewport

Return true if the selected DOM-element found by given selector is partially displayed and within the viewport.

Usage
$(selector).isDisplayedInViewport()
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');
isDisplayedInViewport = await elem.isDisplayedInViewport();
console.log(isDisplayedInViewport); // outputs: false

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

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

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

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

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

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

Welcome! How can I help?

WebdriverIO AI Copilot