cy.get e cy.contains

Oi, Isabella! Tudo bem?

Podemos tentar compreender sobre quando usar cy.get e cy.contains da seguinte forma:

cy.get

O comando cy.get é usado para selecionar elementos com base em seletores CSS e é muito útil quando você sabe exatamente o seletor do elemento que deseja interagir, por exemplo:

// Seleciona um botão com a classe 'submit-btn'
cy.get('.submit-btn').click();

cy.contains

O comando cy.contains é usado para selecionar elementos que contêm um texto específico e ele é útil quando você quer encontrar um elemento pelo texto que ele exibe, independentemente do seletor CSS, por exemplo:

// Seleciona um botão que contém o texto 'Enviar'
cy.contains('Enviar').click();

Quando usar cada um?

• Devemos usar cy.get quando temos um seletor CSS específico para o elemento, o que é comum quando estamos testando a estrutura HTML e sabemos exatamente quais classes, IDs ou atributos usar.
• Devemos usar cy.contains quando queremos selecionar um elemento pelo texto que ele contém, o que é especialmente útil quando o texto é único ou facilmente identificável, como em botões ou links.

Exemplo prático

Vamos aplicar isso ao seu exemplo:

1. Se quisermos clicar em um link <a> que contém o texto "Ver pets disponíveis para adoção", podemoa usar cy.contains porque estamos procurando pelo texto:

cy.contains('a', 'Ver pets disponíveis para adoção').click();

1. Se quisermos selecionar um elemento com uma classe específica, como um botão no header, podemos usar cy.get:

cy.get('.header-button').click();

Espero que isso ajude a esclarecer a diferença entre cy.get e cy.contains e quando usar cada um!

Um forte abraço e bons estudos!