Cypress desde cero: tu primer test en 20 minutos

Cypress es una de las herramientas de automatización más accesibles para empezar en testing end-to-end. En este artículo vamos a instalarlo, escribir el primer test y entender la estructura básica — todo en menos de 20 minutos.

No necesitas saber JavaScript de antemano. Lo que necesitas es tener Node.js instalado y ganas de ensuciarte las manos.

Instalación

Primero crea un proyecto nuevo o entra a uno existente. Luego instala Cypress como dependencia de desarrollo:

npm install cypress --save-dev

Una vez instalado, ábrelo por primera vez con:

npx cypress open

Esto abre el Launchpad de Cypress. Te va a preguntar qué tipo de testing quieres configurar. Elige E2E Testing y acepta los archivos de configuración que genera automáticamente.

Tu primer test

Crea un archivo en la carpeta cypress/e2e/ con el nombre que quieras, por ejemplo mi-primer-test.cy.js:

describe('Mi primer test', () => {
  it('visita la página principal', () => {
    cy.visit('https://example.com')
    cy.contains('Example Domain').should('be.visible')
  })
})

Así de simple. describe agrupa los tests, it define un caso individual, cy.visit navega a una URL y cy.contains busca un texto en la página.

Los comandos que más vas a usar

Cypress tiene una API muy legible. Estos son los comandos esenciales para empezar:

• cy.visit(url) — navega a una URL
• cy.get(selector) — selecciona un elemento por CSS o data-testid
• cy.contains(texto) — busca un elemento que contenga ese texto
• cy.click() — hace clic en un elemento
• cy.type('texto') — escribe en un input
• cy.should('be.visible') — assertion: el elemento debe estar visible
• cy.should('have.text', 'valor') — assertion: el texto debe ser exacto

Un test más completo: formulario de login

describe('Login', () => {
  beforeEach(() => {
    cy.visit('/login')
  })

  it('hace login con credenciales válidas', () => {
    cy.get('[data-testid="email"]').type('usuario@test.com')
    cy.get('[data-testid="password"]').type('mi-contraseña')
    cy.get('[data-testid="btn-login"]').click()
    cy.url().should('include', '/dashboard')
  })

  it('muestra error con credenciales inválidas', () => {
    cy.get('[data-testid="email"]').type('mal@email.com')
    cy.get('[data-testid="password"]').type('contraseña-incorrecta')
    cy.get('[data-testid="btn-login"]').click()
    cy.contains('Credenciales incorrectas').should('be.visible')
  })
})

El secreto de los buenos selectores

El error más común cuando empiezas con Cypress es usar selectores frágiles como clases CSS o XPaths complicados. La mejor práctica es usar atributos data-testid en tu HTML:

<button data-testid="btn-enviar">Enviar</button>

Así tus tests no se rompen si cambia el diseño o los estilos. Los data-testid son contratos entre el frontend y el equipo de QA.

Próximos pasos

Con esto ya tienes lo suficiente para empezar a escribir tests reales. Los siguientes temas para explorar son:

• cy.intercept() — para mockear llamadas a APIs
• fixtures — para manejar datos de prueba
• Custom commands — para reutilizar lógica de login y otras acciones comunes
• GitHub Actions — para correr los tests automáticamente en CI

Si tienes dudas o te quedas trancada en algún paso, cuéntame en el newsletter — respondo todos los emails.