[Dúvida] Um detalhe não ficou muito claro para mim. | Cypress: automatizando testes E2E

Uma alternativa cita a seguinte justificativa:

"... A função cy.contains() procura por um elemento que contenha o texto especificado, independentemente do tipo de elemento..."

Ora, se a função procura por um texto especificado independente do tipo de elemento, por qual motivo ele não encontraria se o elemento fosse um h1? Senti a explicação um pouco confusa por esse motivo.

Ademais o que exatamente significa 'conter o texto especificado'? já que a alternativa correta além da óbvia que trata de um elemento com tag 'a' é a do elemento com a tag 'div', pois bem, a div em si não contém tal texto, como podemos ver no código da página ao inspecionar o elemento:

<div class="home__buttons">
    <a class="button" href="/home">Ver pets disponíveis para adoção</a>
<div>

mas contém a tag 'a' que essa sim contém o tal texto.

Então o que posso concluir com essa informação? Que 'conter o texto' significa inclusive conter dentro de todos os elementos filhos de um elemento específico? Ou talvez a tag 'a' esteja num "nível semântico de menor hierarquia" comparado a tag 'div' fazendo com que por causa disso o texto conton como pertecente a tag 'div' em si?

Desde já grato pela clarificação.

Oi Erike!

Entendi sua dúvida sobre o comando cy.contains(). Vamos tentar esclarecer alguns pontos.

A função cy.contains() do Cypress é realmente muito útil para encontrar elementos que contenham um texto específico, independentemente do tipo de elemento. No entanto, a forma como ela funciona pode gerar algumas confusões, especialmente quando consideramos a hierarquia dos elementos no HTML.

Quando falamos que a função cy.contains() procura por um texto especificado, isso significa que ela vai buscar por qualquer elemento que contenha aquele texto, seja diretamente ou dentro de seus elementos filhos. Por exemplo, se você tiver o seguinte HTML:

<div class="home__buttons">
    <a class="button" href="/home">Ver pets disponíveis para adoção</a>
</div>

Se você usar cy.contains('Ver pets disponíveis para adoção'), o Cypress vai encontrar o texto dentro do elemento <a>, mesmo que ele esteja dentro de uma <div>. Isso porque a função cy.contains() percorre a árvore de elementos em busca do texto.

Agora, se você especificar um seletor, como cy.contains('div', 'Ver pets disponíveis para adoção'), o Cypress vai procurar por uma <div> que contenha o texto diretamente ou dentro de seus elementos filhos. No seu caso, a <div> contém o <a> que, por sua vez, contém o texto. Por isso, a alternativa que usa cy.contains('div', 'Ver pets disponíveis para adoção') também está correta.

Por outro lado, se você usar cy.contains('h1', 'Ver pets disponíveis para adoção'), o Cypress vai procurar por um elemento <h1> que contenha o texto, mas como o texto está dentro de um <a>, ele não vai encontrar nada.

Portanto, a conclusão é que "conter o texto" significa que o texto pode estar em qualquer lugar dentro do elemento ou de seus filhos. No seu exemplo, a <div> contém o <a>, que contém o texto, então cy.contains('div', 'Ver pets disponíveis para adoção') funciona.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

Mergulhe em programação