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.

Ficou curioso(a) e quer aprender mais sobre automação de testes com Cypress? Conheça meus cursos no Udemy.

Bons testes! 🎉

Publicado por Walmyr

I'm a software engineer that loves testing. I'm also a clean coder, blogger, YouTuber, Cypress.io 🌲 ambassador, writer, online instructor, mentor, consultant, speaker, an active member of the testing automation and JavaScript communities, and a fan of good music, tattoos, vegan 🌱 food, and skateboarding.

7 comentários em “Como identificar um elemento por seu texto com Cypress”

  1. Pingback: Por que você deve usar Cypress para automação de testes – TALKING ABOUT TESTING

  2. 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/

    Responder

  3. professor estou fazendo teste automatizado com o cypress, e nisso to tentado testa o select e nele não se tem o id para pode selecionar, como eu faço quando não se tem o id para pode selecionar algo?

    Responder

    1. Oi Emylli, recomendo estudar seletores CSS para não depender só de elementos com IDs.
      No canal Talking About Testing no YouTube tem uma playlist chamada Seletores CSS para QAs
      Aqui vai o link:

      Espero que goste!

      Responder

  4. Boa tarde Walmyr, tudo bem?
    Estou com dificuldade na validação de um toast contendo uma mensagem de erro. Já utilizei cy.get(‘.toast-error’).should(‘have.text’, ‘xpto-mensagem de erro’).should(‘be.visible’), também utilizei contains, mas não funcionou, pois o toast some rapidamente da tela e não encontra o elemento. Sabe se há alguma forma de contornar essa situação? Desde já, agradeço.

    Responder

Deixe um comentário