isDisplayed（表示されているか）

選択されたDOM要素が表示されている場合（要素がビューポート外であっても）trueを返します。これはブラウザが提供する checkVisibility メソッドを使用して、要素が表示されているかどうかを判断します。WebdriverIOは実際のユーザーのように動作するため、 contentVisibilityAuto、opacityProperty、およびvisibilityPropertyフラグのデフォルト値はより厳格な動作になるようtrueに設定されています。つまり、このコマンドは要素のcontent-visibility、opacity、およびvisibilityプロパティの値によって要素が可視かどうかをチェックします。

要素がビューポート内にあるかどうかも確認したい場合は、コマンドにwithinViewportフラグを提供してください。

情報

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

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

使用方法

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

パラメータ

名前	型	詳細
`withinViewport=false` 省略可能	`Boolean`	要素がビューポート内にあるかどうかを確認するには`true`。デフォルトは`false`。
`contentVisibilityAuto=true` 省略可能	`Boolean`	要素のcontent-visibilityプロパティが（または継承している）autoの値を持ち、現在レンダリングをスキップしているかどうかを確認するには`true`。デフォルトは`true`。
`opacityProperty=true` 省略可能	`Boolean`	要素のopacityプロパティが（または継承している）0の値を持つかどうかを確認するには`true`。デフォルトは`true`。
`visibilityProperty=true` 省略可能	`Boolean`	要素がvisibilityプロパティの値により非表示になっているかどうかを確認するには`true`。デフォルトは`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
});

戻り値

<Boolean> return: 要素が表示されている場合はtrue

使用方法​

パラメータ​

例​

戻り値​

使用方法

パラメータ

例

戻り値