isDisplayed

Gibt true zurück, wenn das ausgewählte DOM-Element angezeigt wird (auch wenn das Element außerhalb des Viewports liegt). Es verwendet die checkVisibility Methode des Browsers, um zu bestimmen, ob ein Element angezeigt wird oder nicht. Da WebdriverIO wie ein echter Benutzer agiert, sind die Standardwerte für die Flags contentVisibilityAuto, opacityProperty und visibilityProperty auf true gesetzt, um ein strengeres Verhalten zu bevorzugen. Das bedeutet, dass der Befehl prüft, ob das Element aufgrund des Wertes seiner Eigenschaften content-visibility, opacity und visibility sichtbar ist.

Wenn Sie auch überprüfen möchten, ob sich das Element innerhalb des Viewports befindet, geben Sie das Flag withinViewport an den Befehl.

Info

Im Gegensatz zu anderen Element-Befehlen wartet WebdriverIO nicht darauf, dass das Element existiert, um diesen Befehl auszuführen.

WebdriverIO verwendet bei Browser-Tests ein benutzerdefiniertes Skript, das speziell entwickelt wurde, um die Sichtbarkeit von Elementen zu bewerten. Dieses Skript ist entscheidend, um festzustellen, ob ein Element auf der Seite angezeigt wird. Bei nativen mobilen Tests mit Appium verlässt sich WebdriverIO hingegen auf den isElementDisplayed Befehl von Appium. Dieser Befehl bewertet die Sichtbarkeit von Elementen anhand von Kriterien, die vom zugrunde liegenden Appium-Treiber festgelegt wurden, um genaue und treiberspezifische Bewertungen für mobile Anwendungen zu gewährleisten.

Usage

$(selector).isDisplayed(withinViewport, contentVisibilityAuto, opacityProperty, visibilityProperty)

Parameters

Name	Type	Details
withinViewport=false optional	Boolean	true to check if the element is within the viewport. false by default.
contentVisibilityAuto=true optional	Boolean	true to check if the element content-visibility property has (or inherits) the value auto, and it is currently skipping its rendering. true by default.
opacityProperty=true optional	Boolean	true to check if the element opacity property has (or inherits) a value of 0. true by default.
visibilityProperty=true optional	Boolean	true to check if the element is invisible due to the value of its visibility property. true by default.

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
});
isDisplayedWithinViewport.js
it('should detect if an element is visible within the viewport', async () => {
    let isDisplayedInViewport = await $('#notDisplayed').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#notVisible').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#notExisting').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#notInViewport').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false

    isDisplayedInViewport = await $('#zeroOpacity').isDisplayed({ withinViewport: true });
    console.log(isDisplayedInViewport); // outputs: false
});

Returns

• <Boolean> return: true if element is displayed