Cypress popularizou testes E2E modernos. Developer experience excelente, debug fácil, time-travel. Milhões de testes rodados diariamente.
Conceitos Principais
Commands
cy.get(), cy.contains(), cy.click(). Chainable. Auto-retry até timeout. Simples e legível.
Assertions
should("be.visible"), should("have.text"). Chai + jQuery. Auto-retry em assertions. Falha clara.
Network Stubbing
cy.intercept() mocka APIs. Resposta customizada. Assert chamadas. Offline testing.
Time Travel
Test runner mostra cada step. Hover para ver DOM. Screenshots automáticos. Debug interativo.
Passo a Passo
- Setup Cypress: npm install --save-dev cypress. npx cypress open. Escolhe E2E testing. Cria estrutura e exemplos.
- Primeiro Teste: cypress/e2e/login.cy.js: cy.visit("/login"). cy.get("[data-cy=email]").type("user@test.com"). cy.get("button").click().
- Custom Commands: cypress/support/commands.js: Cypress.Commands.add("login", () => { /* login steps */ }). Reusa: cy.login().
- Mock API: cy.intercept("GET", "/api/users", { fixture: "users.json" }). Teste sem backend. Cenários edge-case.
- CI/CD: Cypress Cloud ou GitHub Actions. Parallel execution. Video recordings. Flake detection. Dashboard.
Boas Praticas
Recomendacoes
• data-cy attributes para seletores
• Custom commands para fluxos comuns
• Fixtures para dados mock
• baseUrl no cypress.config.js
• beforeEach para setup comum
Erros Comuns
Evite estes erros
• Usar cy.wait(5000) ao invés de auto-retry
• Testar múltiplas coisas em um spec
• Não usar cy.intercept (testes lentos)
• Seletores CSS frágeis
• Não executar em headless no CI
Checklist
- Cypress instalado
- Primeiro teste passando
- Custom commands criados
- API mocking configurado
- CI/CD executando testes
- Fluxos críticos cobertos