Gerador de Cypress test skeleton

Cypress: testes E2E rodando dentro do navegador

O Cypress é um framework de testes end-to-end criado em 2014 por Brian Mann e a equipe da cypress.io. Seu diferencial — o que explodiu sua popularidade — é que o código de teste roda dentro do navegador, no mesmo event loop JavaScript da aplicação, em vez de controlar o browser remotamente via WebDriver (modelo do Selenium). Isso libera acesso direto ao DOM, controle síncrono sobre requisições de rede, time-travel debugging no runner gráfico e uma experiência de desenvolvimento muito mais agradável.

Um spec típico segue uma estrutura BDD familiar: describe('fluxo', () => { it('faz X', () => { ... }) }). Dentro do it você encadeia comandos no objeto global cy: visita uma URL, consulta elementos, interage e checa o resultado. O skeleton gerado nesta página segue essa estrutura para você começar a escrever specs reais imediatamente.

Comandos centrais do dia a dia

• cy.visit('/login') — carrega uma página.
• cy.get('seletor') — busca por seletor CSS.
• cy.contains('texto') — encontra elemento pelo conteúdo textual.
• cy.click(), cy.type('oi'), cy.check(), cy.select('opcao') — interações.
• cy.url().should('include', '/dashboard') — asserções de URL.
• Asserções: should('be.visible'), should('contain', 'X'), should('have.class', 'active'), should('have.length', 5).

Os comandos são chainable: cada um retorna um Subject que o próximo consome, parecido com jQuery. Detalhe importante: as asserções têm retry-ability embutida — elas reavaliam automaticamente até a condição passar ou estourar o timeout (4 segundos por padrão), reduzindo drasticamente flakiness causado por animação ou dados assíncronos.

Controle de rede, fixtures e sessões

Mockar rede é um dos pontos fortes do Cypress. cy.intercept('GET', '/api/users', { fixture: 'users.json' }) substitui uma chamada real por dado determinístico; cy.intercept('POST', '/api/login').as('login') dá um alias que você espera com cy.wait('@login'). cy.fixture('users.json') carrega dados de stub, e cy.request chama APIs diretamente — perfeito para semear estado antes do teste. cy.session(id, setup) persiste o estado de login entre testes, evitando que você logue do zero a cada execução.

Component testing, Cypress Cloud e limitações

A partir da versão 10, o Cypress unificou E2E e component testing: você sobe componentes React, Vue, Svelte ou Angular isoladamente, com a mesma API e o mesmo runner. Cypress Cloud é o SaaS pago que agrega runs, libera paralelização, screenshots/vídeos e detecção de flaky tests no CI. Limitações importantes: o Cypress só roda navegadores Chromium e Firefox (não tem Safari/WebKit); navegação cross-origin exige configuração explícita; suporte a abas e iframes é limitado; e a falta de multi-context (versus Playwright) torna alguns cenários mais trabalhosos.

Cypress vs Playwright

A alternativa mais comum hoje é o Playwright, da Microsoft. O Cypress costuma ganhar em experiência do desenvolvedor — runner interativo, time travel, API mais simples. O Playwright ganha em cobertura cross-browser (Chromium + Firefox + WebKit), multi-context nativo para sessões paralelas, geralmente mais rápido no CI e autowait mais forte. Em projetos greenfield com requisito cross-browser o Playwright costuma ser a aposta mais segura; em times já investidos no Cypress com preferência pelo UX, o Cypress segue uma escolha sólida.

Perguntas frequentes

Dá para gravar testes em vez de escrever? Sim — o Cypress Studio permite interagir com a aplicação e exporta os comandos correspondentes. É ótimo para prototipar; para manter no longo prazo, specs escritos à mão ainda são preferíveis.

Meus testes ficam flaky no CI. O que faço? Use cy.session para login, mocke chamadas de rede com cy.intercept em vez de depender de backend real, prefira asserções com retry em vez de cy.wait(ms) e considere a detecção de flaky do Cypress Cloud.

O Cypress testa mobile? Ele redimensiona o viewport com cy.viewport('iphone-x'), mas não roda em devices iOS/Android reais nem em emuladores. Para teste em device real, olhe Appium ou Playwright com contextos de emulação mobile.

Posso chamar APIs sem passar pela UI? Sim — cy.request('POST', '/api/users', payload) bate direto no backend, perfeito para semear dados e verificar o comportamento do servidor.

O gerador envia meu código para algum lugar? Não — o skeleton do spec é gerado inteiramente no seu navegador. Nada é enviado.