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 mostra-los dois exemplos.

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

Tal abordagem é útil em casos onde sabemos que somente um elemento na tela possuirá o texto que esperamos.

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 esteja visível.

A implementação seria a seguinte:

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

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

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.

Era isso!

E aí, gostou?

Aguardo teu feedback.

Este foi 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.