Cómo escribir y limpiar inputs en Cypress

Resumen

Trabajar con formularios es una de las tareas más comunes al automatizar pruebas, y Cypress ofrece comandos específicos para escribir, limpiar y manipular inputs de tipo texto. Aquí aprenderás a usar type, clear y combinaciones de teclas para validar formularios sin que el texto se concatene o ensucie tus test cases.

¿Cómo se escribe texto en un input con Cypress?

El comando principal para llenar campos de texto es type, que recibe como argumento la cadena que quieres escribir. Antes de usarlo, necesitas obtener el elemento con cy.get() apuntando a un identificador único, idealmente un id.

En el formulario de práctica de demo QA, el flujo se ve así: seleccionas el campo first name por su ID, encadenas type y le pasas el valor, luego repites la lógica con last name. El resultado en pantalla muestra el nombre completo escrito tal como lo haría un usuario real [01:20].

¿Qué hace el comando type en Cypress? Escribe texto dentro de un input previamente seleccionado con cy.get(). Simula la escritura tecla por tecla, igual que un usuario.

Por qué los IDs únicos importan en testing

Una recomendación clave para ti como tester: insiste a tu equipo de desarrollo en que cada elemento interactivo tenga un identificador único. Esto vuelve los selectores más estables, claros y resistentes a cambios visuales del frontend. Sin IDs, terminas dependiendo de clases CSS o estructuras del DOM que se rompen con cualquier rediseño.

¿Qué pasa si repites el comando type sobre el mismo input?

Aquí viene un detalle importante. Si ejecutas type dos veces sobre el mismo campo, el texto se concatena en lugar de reemplazarse. Es decir, si escribes "Javier" y vuelves a correr la instrucción, terminarás con "JavierJavier" dentro del input [02:15].

Este comportamiento puede romper tus pruebas cuando quieres validar diferentes combinaciones de datos en un mismo formulario, como longitudes de nombre, caracteres especiales o reglas de negocio.

¿Cómo limpiar un input antes de escribir nuevo texto?

Cypress te da dos caminos para borrar el contenido de un campo y empezar de cero.

Opción 1: combinaciones de teclas dentro de type

Puedes pasarle a type comandos especiales encerrados entre llaves {}. Los más útiles para limpiar son:

  • {selectall}: selecciona todo el texto del input.
  • {backspace}: elimina lo seleccionado.

Encadenando ambos en una sola instrucción, dejas el campo vacío y listo para recibir un nuevo valor [03:05].

Opción 2: el comando clear

La alternativa más directa es clear, un comando dedicado que vacía el input sin necesidad de simular teclas. La sintaxis es más limpia y se lee mejor en pruebas largas.

¿Cuál es la diferencia entre clear y selectall backspace? clear es un comando nativo de Cypress diseñado para vaciar campos. {selectall}{backspace} simula el comportamiento del usuario. Ambos funcionan; elige según legibilidad.

Cuándo conviene cada método para limpiar inputs

La decisión depende de qué tan fiel quieres ser al comportamiento humano y de la sintaxis con la que te sientas más cómodo.

  • Usa clear cuando solo quieras resetear el campo de forma rápida y legible.
  • Usa {selectall}{backspace} cuando necesites validar que las combinaciones de teclas funcionan correctamente.
  • Combina ambos enfoques en pruebas distintas para cubrir más escenarios.

Dominar estos comandos te prepara para trabajar con radio buttons y checkboxes, que tienen su propia lógica de interacción. Cuéntame en los comentarios cuál método prefieres para limpiar campos en tus pruebas.