Como identificar um elemento por seu texto com Cypress

Na “pitada de Cypress” de hoje, aprenda como identificar elementos por seu texto

Quando criamos scripts de testes automatizados, nem sempre conseguimos identificar elementos por um seletor CSS único.

Mas e se conseguíssemos identificá-los por seu texto?

Vou te mostrar três exemplos.

No primeiro exemplo, não importa o tipo do elemento, desde que o mesmo possua um texto que o identifica.

Tal abordagem é útil em casos onde sabemos que somente um elemento na tela possuirá o texto que esperamos, caso contrário, corremos o risco de identificar o elemento errado.

A implementação é bem simples.

cy.contains('Um texto qualquer')

E se quiséssemos, podíamos até mesmo rodar uma verificação de que o elemento está visível, por exemplo.

cy.contains('Um texto qualquer').should('be.visible')

Já no segundo exemplo, sabemos que o texto estará presente em um determinado elemento HTML.

Digamos que o elemento seja o seguinte.

<a href="https://udemy.com/user/walmyr/">Cursos</a>

Neste caso, queremos identificar que um elemento do tipo anchor contenha o texto Cursos, e que o mesmo está visível.

A implementação seria a seguinte:

cy.get('a:contains(Cursos)').should('be.visible')

Diferente do primeiro exemplo, neste caso usamos o cy.get(), porém, em vez de passarmos somente um seletor CSS, passamos um seletor em conjunto com a funcionalidade :contains do jQuery.

E se houver um elemento do tipo anchor (<a>) com o texto Cursos, a verificação de que o elemento está visível deve passar.

No último exemplo, voltaremos ao uso do cy.contains(), onde vamos identificar o mesmo elemento do exemplo anteriror e verificar que tal elemento está visível.

cy.contains('a', 'Cursos').should('be.visible')

Como você pode perceber, com o cy.contains, podemos passar um seletor como primeiro argumento e um texto como segundo argumento, dessa forma, garantindo não só que o elemento possui o texto certo, mas também que tal texto está contido no elemento correto.

Era isso!

E aí, gostou?

Aguardo teu feedback.

Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.

Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.