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.
uma dica, é que conheçam a testing library, para o cypress tem alguns recursos interessantes, entre eles. Uma função chamada findByText, que encontra um elemento pelo texto. E dá para encadear com outras funções, enfim uso bastante e recomendo.
https://testing-library.com/
Boa Leandro, a testing library é muito show mesmo. Obrigado pela dica!