isDisplayed

Retorna verdadeiro se o elemento DOM selecionado está exibido (mesmo quando o elemento está fora da viewport). Ele utiliza o método checkVisibility fornecido pelo navegador para determinar se um elemento está sendo exibido ou não. Como o WebdriverIO age como um usuário real, os valores padrão para as flags contentVisibilityAuto, opacityProperty e visibilityProperty são definidos como true para um comportamento mais rigoroso por padrão. Isso significa que o comando verificará se o elemento está visível devido ao valor de suas propriedades content-visibility, opacity e visibility.

Se você também quiser verificar se o elemento está dentro da viewport, forneça a flag withinViewport ao comando.

informação

Ao contrário de outros comandos de elemento, o WebdriverIO não esperará que o elemento exista para executar este comando.

O WebdriverIO, ao conduzir testes de navegador, utiliza um script personalizado especificamente projetado para avaliar a visibilidade dos elementos. Este script é fundamental para determinar se um elemento está exibido na página. Por outro lado, para cenários de testes móveis nativos com Appium, o WebdriverIO recorre ao comando isElementDisplayed fornecido pelo Appium. Este comando avalia a visibilidade dos elementos usando critérios estabelecidos pelo driver Appium subjacente, garantindo avaliações precisas e específicas do driver para aplicações móveis.

Uso

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

Parâmetros

Nome	Tipo	Detalhes
withinViewport=false opcional	Boolean	true para verificar se o elemento está dentro da viewport. false por padrão.
contentVisibilityAuto=true opcional	Boolean	true para verificar se a propriedade content-visibility do elemento tem (ou herda) o valor auto, e está atualmente pulando sua renderização. true por padrão.
opacityProperty=true opcional	Boolean	true para verificar se a propriedade opacity do elemento tem (ou herda) um valor de 0. true por padrão.
visibilityProperty=true opcional	Boolean	true para verificar se o elemento está invisível devido ao valor de sua propriedade visibility. true por padrão.

Exemplos

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

Retorna

• <Boolean> return: true se o elemento está exibido