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.

3 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/

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