Cypress moderno: buenas prácticas y anti-patrones que debes abandonar
Cypress sigue siendo una de las herramientas más usadas para e2e en equipos frontend. Su documentación de buenas prácticas es excelente — y aún así estos anti-patrones aparecen en casi toda suite heredada que auditamos.
Anti-patrón 1: asignar resultados de comandos
Los comandos de Cypress son asíncronos y encolados; no devuelven el elemento:
// ❌ button es un Chainable, no un elemento
const button = cy.get('button');
button.click();
// ✅ Encadena, o usa .then() cuando necesites el valor
cy.get('button').click();
cy.get('.total').then(($el) => {
expect($el.text()).to.include('$');
});
Anti-patrón 2: cy.wait(ms)
El clásico. Cada espera fija hace la suite más lenta y más frágil a la vez. Espera la request, no el reloj:
// ❌
cy.wait(4000);
// ✅ Intercepta y espera esa respuesta específica
cy.intercept('POST', '/api/contact').as('sendContact');
cy.get('form').submit();
cy.wait('@sendContact').its('response.statusCode').should('eq', 200);
Anti-patrón 3: selectores acoplados al CSS
Las clases cambian con cada refactor visual. Usa atributos dedicados:
// ❌ Se rompe con el próximo rediseño
cy.get('.card > .btn.btn-primary');
// ✅ Contrato explícito entre app y tests
cy.get('[data-cy="submit-booking"]');
En nuestro caso, el rediseño completo de paleta de este sitio no rompió ni un test — precisamente porque ningún selector dependía de estilos.
Anti-patrón 4: tests que dependen entre sí
Si el test B necesita lo que dejó el test A, no puedes paralelizar, no puedes reintentar, y un fallo en A esconde el estado real de B. Cada test prepara lo suyo — idealmente por API, no por UI:
// Setup por API: rápido y determinista
cy.request('POST', '/api/test/seed', { user: 'demo' });
Anti-patrón 5: login por interfaz en cada test
Loguearse por UI 200 veces agrega minutos de suite sin probar nada nuevo. Prueba el login una vez, y en el resto usa cy.session():
cy.session('admin', () => {
cy.request('POST', '/api/login', { user, pass }).then(({ body }) => {
window.localStorage.setItem('token', body.token);
});
});
Lo que Cypress hace muy bien
No todo es advertencia: el time-travel debugging, la recarga automática y el runner interactivo siguen siendo la mejor experiencia de desarrollo de tests del mercado para equipos que viven en JavaScript.
¿Cypress o Playwright en 2026?
Depende del equipo: Cypress gana en DX para frontends puros; Playwright en velocidad, multi-navegador real y paralelismo nativo. Lo importante es dominar los fundamentos — que son los mismos.
Sigue aprendiendo: el curso gratuito de Cypress moderno parte desde cero y llega hasta component testing.