Lección 5 de 6 · 2 min
Accesibilidad y regresión visual
Accesibilidad automatizada con cypress-axe
La accesibilidad dejó de ser opcional (y en varios mercados, legal). Lo mejor: el 30–40% de los problemas se detecta automático, y cuesta tres líneas:
// npm i -D cypress-axe axe-core
import 'cypress-axe';
it('la home no tiene violaciones a11y críticas', () => {
cy.visit('/');
cy.injectAxe();
cy.checkA11y(null, {
includedImpacts: ['critical', 'serious'],
});
});
El reporte lista cada violación con el elemento exacto y el link a la regla WCAG. Contraste insuficiente, botones sin nombre accesible, imágenes sin alt, formularios sin label — todo eso cae gratis.
El patrón: a11y por página, en el flujo que ya tienes
En vez de una suite a11y separada que nadie mantiene, inyecta el chequeo en los tests de flujo existentes en el momento clave:
it('flujo de reserva accesible de punta a punta', () => {
cy.visit('/reservas');
cy.injectAxe();
cy.checkA11y(); // estado inicial
cy.getByCy('servicio').select('Corte');
cy.getByCy('continuar').click();
cy.checkA11y(); // el paso 2 también
cy.getByCy('confirmar').click();
cy.checkA11y(); // y la confirmación
});
Los estados intermedios (modales, errores de validación, spinners) son donde viven las violaciones que un audit de página estática nunca ve.
Regresión visual con criterio
// cypress-image-snapshot u otro plugin de comparación
it('la card de servicio no cambió visualmente', () => {
cy.visit('/');
cy.getByCy('service-card').first().matchImageSnapshot('service-card');
});
Las mismas reglas que en cualquier herramienta:
- Sí: componentes de librería interna, páginas de marketing, emails renderizados.
- No: pantallas con datos vivos, animaciones, fechas — o tendrás falsos rojos hasta que el equipo ignore la suite.
- Congela lo variable:
cy.clock()para el tiempo, fixtures para los datos,blackoutpara lo inevitable. - Baselines en CI: los screenshots difieren entre macOS y Linux; genera las referencias donde corren.
Ejercicio
Agrega cypress-axe a tu suite del curso y corre checkA11y en tus 3 tests de smoke. Arregla (o reporta con severidad correcta) las violaciones críticas que aparezcan — en un sitio real casi siempre aparece alguna.