1
ViniQA
3 min de leitura ·

Seu primeiro teste automatizado com Cypress, explicado pra quem nunca programou

Muita gente que trabalha com teste manual trava na hora de começar a automatizar. Parece que precisa saber programar antes. Não precisa: um teste automatizado é só uma lista de passos, igual ao que você já faz na mão.

Vou mostrar o caminho mais curto até ver um teste rodando sozinho.

Todo teste é feito de 3 coisas

  1. Seletor: como o robô acha o elemento na tela (o campo, o botão)
  2. Ação: o que ele faz com o elemento (clicar, digitar)
  3. Conferência: como ele sabe que deu certo

Sem a conferência, não é teste: é só um robô clicando.

Instalando

Com o Node instalado, numa pasta vazia:

npm init -y
npm install cypress --save-dev
npx cypress open

O Cypress abre uma janela e cria a estrutura de pastas sozinho. Escolha E2E Testing e um navegador.

O teste

Crie o arquivo cypress/e2e/login.cy.js. Vou usar o Sauce Demo, um site feito para treinar automação:

describe('Login', () => {
  it('entra com usuário e senha', () => {
    cy.visit('https://www.saucedemo.com')
    cy.get('[data-test="username"]').type('standard_user')
    cy.get('[data-test="password"]').type('secret_sauce')
    cy.get('[data-test="login-button"]').click()
    cy.get('[data-test="title"]').should('have.text', 'Products')
  })
})

Lendo em português:

  • describe('Login'): junte numa caixa chamada Login
  • it('entra com usuário e senha'): um teste, e o nome diz o que ele confere
  • cy.visit: abre o site
  • cy.get('[data-test="username"]'): o seletor, acha o campo de usuário
  • .type(...) e .click(): as ações
  • .should('have.text', 'Products'): a conferência, entrou mesmo na página de produtos?

De onde vem o seletor?

Clique com o botão direito no campo, depois em Inspecionar. O DevTools mostra o HTML do elemento. Se ele tiver um atributo data-test, use esse: ele existe justamente para teste e não muda quando alguém troca a cor ou o texto do botão.

Duas dicas que evitam dor de cabeça

Não use cy.wait(3000). Esperar um tempo fixo deixa o teste lento, e se o site demorar 4 segundos ele quebra igual. O should já tenta de novo sozinho por até 4 segundos até o elemento aparecer.

Teste também o que dá errado. Senha errada mostra a mensagem de erro? Campo vazio avisa? É nesse cenário negativo que mais aparece bug, e quase ninguém testa:

it('mostra erro com senha errada', () => {
  cy.visit('https://www.saucedemo.com')
  cy.get('[data-test="username"]').type('standard_user')
  cy.get('[data-test="password"]').type('errada')
  cy.get('[data-test="login-button"]').click()
  cy.get('[data-test="error"]').should('contain', 'do not match')
})

Próximos passos

Daqui o caminho natural é: tirar a URL repetida para o baseUrl do cypress.config.js, criar comandos reutilizáveis (cy.login()) e fazer o teste rodar sozinho a cada push no GitHub Actions.

Eu gravei esse caminho todo, do VS Code até o teste rodando no GitHub Actions, num curso curto na Udemy (nota 4,8). Se ajudar alguém, até 3/12 ele sai por R$ 24,90 com o cupom LANCAMENTO: https://www.udemy.com/course/cypress-para-leigos-testes-automatizados-do-zero/?couponCode=LANCAMENTO

Se tiver dúvida sobre por onde começar em testes, comenta aí que eu respondo.

Carregando publicação patrocinada...