¿Cómo haces estables las pruebas UI?

Respuesta directa

Qué debe cubrir una buena respuesta

Cómo funciona

Las pruebas de interfaz estables localizan elementos como los perciben los usuarios, por rol y nombre accesible, y no por rutas CSS o clases generadas que cambian en cada build. Controlan los datos y el reloj para que la pantalla sea la misma en cada ejecución, y esperan a la condición que vería el usuario, como un botón que se activa o un total que se actualiza, en lugar de duraciones fijas. Cada prueba parte de su propio estado y no depende de que otra haya corrido. Al fallar se capturan trazas, capturas y logs de red para que una ejecución en rojo sea diagnosticable. Las afirmaciones que no necesitan interfaz, como reglas de negocio, se bajan a pruebas de API o unitarias donde son más baratas y fiables.

Ejemplo

Una prueba de checkout usa getByRole('button', { name: 'Place order' }) y espera al encabezado de confirmación; crea su propio carrito por API antes de abrir la página y congela el reloj para que la lógica de fecha de entrega sea determinista. Cuando el sistema de diseño renombró todas las clases CSS, la prueba siguió pasando. Veinte combinaciones de precios que antes corrían en el navegador pasaron a una prueba de API parametrizada, y la suite de interfaz restante bajó del 4 por ciento de inestabilidad a menos del 0,5.

Errores frecuentes

• Localizar por nth-child o clases generadas automáticamente.
• Dormir un tiempo fijo en lugar de esperar una condición visible.
• Encadenar pruebas, de modo que un fallo en una se propaga al resto.

Una estructura útil para responder

Responde desde tu propia experiencia.

No memorices un guion: usa solo ejemplos que puedas explicar con honestidad en preguntas posteriores.