isDisplayed

選択されたDOM要素が表示されている場合（要素がビューポートの外にある場合でも）、trueを返します。要素がビューポート内にもないことを確認したい場合は、isDisplayedInViewportコマンドを使用してください。

情報

他の要素コマンドとは異なり、WebdriverIOはこのコマンドを実行するために要素が存在するのを待機しません。

WebdriverIOは、ブラウザテストの実施時に、要素の可視性を評価するために特別に設計されたカスタムスクリプトを使用します。このスクリプトは、ページに要素が表示されているかどうかを判断する上で重要です。逆に、Appiumを使用したネイティブモバイルテストシナリオの場合、WebdriverIOはAppiumが提供するisElementDisplayedコマンドに委譲します。このコマンドは、基盤となるAppiumドライバによって確立された基準を使用して要素の可視性を評価し、モバイルアプリケーションに対して正確でドライバ固有の評価を保証します。

使用方法

$(selector).isDisplayed([isWithinViewport=false])

パラメータ

名前	型	詳細
[isWithinViewport=false] オプション	ブール値	要素がビューポート内にあるかどうかを確認するには、trueに設定します。

例

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
});