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.

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

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

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

    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!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s