@luminati-io/webdriverio8/build/commands/element/isDisplayedInViewport.js

Next-gen browser and mobile automation test framework for Node.js

import { ELEMENT_KEY } from '../../constants.js';
import { getBrowserObject } from '../../utils/index.js';
import isElementInViewportScript from '../../scripts/isElementInViewport.js';
/**
 *
 * Return true if the selected DOM-element found by given selector is partially displayed and within the viewport.
 *
 * <example>
    :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>
    :isDisplayedInViewport.js
    :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
    });
 * </example>
 *
 * @alias element.isDisplayedInViewport
 * @return {Boolean}            true if element(s)* [is|are] displayed
 * @uses protocol/selectorExecute, protocol/timeoutsAsyncScript
 * @type state
 *
 */
export async function isDisplayedInViewport() {
    if (!await this.isDisplayed()) {
        return false;
    }
    const browser = getBrowserObject(this);
    return browser.execute(isElementInViewportScript, {
        [ELEMENT_KEY]: this.elementId, // w3c compatible
        ELEMENT: this.elementId // jsonwp compatible
    });
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaXNEaXNwbGF5ZWRJblZpZXdwb3J0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2NvbW1hbmRzL2VsZW1lbnQvaXNEaXNwbGF5ZWRJblZpZXdwb3J0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQTtBQUNoRCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQTtBQUN2RCxPQUFPLHlCQUF5QixNQUFNLHNDQUFzQyxDQUFBO0FBRTVFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtERztBQUNILE1BQU0sQ0FBQyxLQUFLLFVBQVUscUJBQXFCO0lBQ3ZDLElBQUksQ0FBQyxNQUFNLElBQUksQ0FBQyxXQUFXLEVBQUUsRUFBRSxDQUFDO1FBQzVCLE9BQU8sS0FBSyxDQUFBO0lBQ2hCLENBQUM7SUFFRCxNQUFNLE9BQU8sR0FBRyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsQ0FBQTtJQUN0QyxPQUFPLE9BQU8sQ0FBQyxPQUFPLENBQUMseUJBQXlCLEVBQUU7UUFDOUMsQ0FBQyxXQUFXLENBQUMsRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLGlCQUFpQjtRQUNoRCxPQUFPLEVBQUUsSUFBSSxDQUFDLFNBQVMsQ0FBQyxvQkFBb0I7S0FDekIsQ0FBQyxDQUFBO0FBQzVCLENBQUMifQ==