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	true表示检查元素的content-visibility属性是否具有（或继承）值auto，并且当前正跳过其渲染。默认为true。
opacityProperty=true 可选	Boolean	true表示检查元素的opacity属性是否具有（或继承）值0。默认为true。
visibilityProperty=true 可选	Boolean	true表示检查元素是否因其visibility属性的值而不可见。默认为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