Skip to content

1-Seletores.md

Latest commit

 

History

History
102 lines (70 loc) · 2.44 KB

1-Seletores.md

File metadata and controls

102 lines (70 loc) · 2.44 KB
Raw

3.1 - Seletores

Para interagir com elementos da página, o Cypress precisa encontrá-los primeiro. O comando principal para isso é o cy.get(), que aceita seletores CSS.

cy.get()

// Por atributo data-cy (recomendado)
cy.get('[data-cy="botao-login"]')

// Por ID
cy.get('#meu-id')

// Por classe
cy.get('.minha-classe')

// Por tag
cy.get('button')

// Por atributo genérico
cy.get('[type="submit"]')
cy.get('[placeholder="Digite seu email"]')

// Combinando seletores
cy.get('form [data-cy="email"]')
cy.get('.card:first-child button')

cy.contains()

Encontra um elemento pelo seu texto visível:

// Encontra qualquer elemento que contenha exatamente "Entrar"
cy.contains('Entrar')

// Encontra um <button> que contenha "Entrar"
cy.contains('button', 'Entrar')

// Usando regex
cy.contains(/Bem-vindo/i)

Nota: cy.contains() é útil para textos dinâmicos, mas prefira data-cy quando possível pois o texto pode mudar com traduções ou refatorações.

cy.get() + .find()

Use .find() para buscar dentro de um elemento já selecionado:

cy.get('.formulario-login')
  .find('[data-cy="email"]')
  .type('user@example.com')

cy.get('.lista-itens')
  .find('li')
  .should('have.length', 5)

cy.get() + .eq()

Para selecionar um elemento específico dentro de uma lista:

// Primeiro item (índice 0)
cy.get('li').eq(0)

// Último item
cy.get('li').last()

// Primeiro item
cy.get('li').first()

Inspecionando elementos

Para descobrir como selecionar um elemento:

  1. Abra o cy.open (interface do Cypress)
  2. Clique no ícone de mira (selector playground) no canto superior esquerdo
  3. Passe o mouse sobre o elemento desejado na aplicação
  4. O Cypress vai sugerir um seletor automaticamente

Você também pode usar o DevTools do navegador (F12 → Elements) para inspecionar o HTML.

Hierarquia de preferência para seletores

Do mais recomendado ao menos recomendado:

Prioridade Seletor Exemplo
✅ Melhor data-cy [data-cy="submit"]
✅ Bom data-testid [data-testid="submit"]
✅ Bom id único #submit-btn
⚠️ Cuidado aria-label [aria-label="Enviar"]
⚠️ Cuidado Classe CSS .btn-primary
❌ Evite XPath n/a (Cypress não usa nativamente)
❌ Evite Seletores muito específicos div > div:nth-child(2) > span

Ir para: 3.2 Comandos básicos