Trabajar con date pickers en pruebas automatizadas suele generar dudas porque parecen componentes complejos, pero con Cypress puedes interactuar con ellos como si fueran un input cualquiera. Aquí verás cómo seleccionar una fecha, manejar formatos y resolver el caso en que el campo está bloqueado hasta hacer clic en el ícono del calendario.

¿Qué es un date picker y por qué se complica al automatizarlo?

Un date picker es ese componente que despliega un calendario al hacer clic y te permite escoger una fecha. Aparece en formularios de reservas, registros y filtros, y suele construirse con frameworks como Material Angular, lo que genera clases dinámicas difíciles de seleccionar.

¿Qué es un date picker en pruebas automatizadas? Es un input que recibe una fecha como texto y, en muchos casos, abre un calendario visual. Puedes interactuar con él escribiendo directamente o haciendo clic en el ícono del calendario.

La mayoría de personas asume que debe abrir el calendario, navegar entre meses y hacer clic en el día exacto. La realidad es más simple: al final del día sigue siendo un input que acepta texto.

¿Cómo seleccionar el input de un date picker en Cypress?

Cuando inspeccionas el elemento, te encuentras con clases generadas automáticamente que cambian entre builds. Por eso conviene apoyarse en un identificador estable, como un atributo del componente padre, en lugar de pelear con selectores frágiles.

En el ejemplo se usa el componente datepicker-overview-example de Material Angular y, dentro de él, se busca el input.

javascript cy.get('datepicker-overview-example') .find('input') .eq(0) .type('11/03/2022')

Aquí lo importante es:

• Localizar el contenedor con un selector estable.
• Usar find para bajar al input dentro del componente.
• Aplicar eq(0) cuando hay varios inputs y necesitas el primero.
• Escribir la fecha con type, igual que en cualquier campo de texto.

¿Por qué importa el formato de fecha que escribes?

La fecha 11/03/2022 puede leerse como 11 de marzo o como 3 de noviembre según la configuración regional. En el ejemplo, el componente la interpretó en formato estadounidense y mostró noviembre 3. Antes de escribir una prueba, valida qué formato espera el sistema para evitar falsos negativos.

¿Cómo manejar un date picker que está deshabilitado?

Algunos formularios bloquean el input hasta que el usuario hace clic en el ícono del calendario. En esos casos, escribir directamente con type no funciona y necesitas disparar primero la apertura del componente.

Los íconos suelen renderizarse como elementos SVG, así que puedes seleccionarlos con find('svg') y darles clic antes de interactuar con el input.

javascript cy.get('datepicker-overview-example') .find('svg') .click()

Una vez abierto el calendario, el input queda habilitado y puedes escribir la fecha con normalidad.

¿Tengo que hacer clic día por día en el calendario? No. La mayoría de date pickers aceptan texto en el input. Solo necesitas escribir la fecha en el formato correcto y, si está bloqueado, hacer clic primero en el ícono del calendario.

¿Qué buenas prácticas seguir al automatizar date pickers?

Más allá del código, hay decisiones que hacen la diferencia entre una prueba estable y una que falla cada semana.

• Prefiere selectores basados en componentes o atributos data-* antes que clases generadas.
• Verifica el formato de fecha esperado por el backend o por la librería del front.
• Comprueba si el input está habilitado por defecto o requiere abrir el calendario.
• Después de escribir la fecha, valida que el valor renderizado coincida con lo esperado.
• Reutiliza comandos personalizados de Cypress si vas a interactuar con date pickers en varias pruebas.

El panel de Cypress te muestra cada petición y cada interacción en tiempo real, así que aprovéchalo para depurar cuando una fecha no se registre como esperabas.

¿Cómo has resuelto tú la automatización de date pickers? Cuéntanos en los comentarios si conoces otra técnica o si te has topado con un componente que no se deja domar tan fácil.