Localizar elementos en Cypress es la base de cualquier prueba automatizada. Si no sabes cómo encontrar un input, un botón o un campo de formulario, no podrás interactuar con la página ni validar comportamientos. Aquí aprenderás a usar el comando cy.get() con tags, IDs, clases y atributos, además de optimizar tus pruebas con una base URL.

¿Cómo configurar una base URL en Cypress?

Antes de localizar elementos, conviene evitar repetir la URL completa en cada prueba. Cypress permite declarar una base URL en el archivo de configuración cypress.json, lo que acorta tus visitas y hace el código más limpio.

La idea es simple: cuando trabajas para una empresa, tus pruebas suelen apuntar a un solo dominio. Si trabajas en Platzi, casi todas tus pruebas vivirán dentro de Platzi. Configurar la base URL refleja esa realidad.

¿Qué es la base URL en Cypress? Es una propiedad de configuración que define la dirección raíz de tu sitio. Una vez declarada, en cy.visit() solo pasas la ruta final, no la URL completa.

Para la práctica usaremos Demo QA y su formulario automation-practice-form, así que la base URL apuntará a ese sitio [01:30].

¿Cómo encontrar elementos por tag con cy.get()?

La forma más directa de obtener elementos es por su etiqueta HTML. Si quieres todos los inputs de la página, basta con escribir cy.get('input') y Cypress devolverá cada uno de ellos.

Lo interesante es que el test runner resalta visualmente los elementos encontrados a la derecha de la pantalla. Puedes incluso fijar el resultado con el pin para inspeccionar mientras navegas.

Esta estrategia funciona bien cuando hay pocos elementos del mismo tipo, pero pierde precisión en formularios largos donde hay decenas de inputs.

¿Cómo seleccionar elementos por atributo, ID y clase?

Cuando un tag devuelve demasiados resultados, los atributos son tu mejor aliado. Cypress usa una sintaxis muy parecida a los selectores CSS, así que la curva de aprendizaje es mínima.

Seleccionar por atributo

Si quieres el campo first name, puedes apoyarte en su atributo placeholder. La sintaxis es:

javascript cy.get('[placeholder="firstName"]')

Y si necesitas más precisión, combina el tag con el atributo:

javascript cy.get('input[placeholder="firstName"]')

Esto le dice a Cypress: busca un input cuyo placeholder sea exactamente firstName. Útil cuando varios elementos comparten atributos similares [05:40].

Seleccionar por ID

Los IDs son únicos por definición, así que son una opción confiable cuando existen. Las herramientas del navegador integradas en el test runner incluso te permiten copiar el selector al portapapeles con un clic.

La sintaxis usa el símbolo numeral, igual que en CSS:

javascript cy.get('#firstName')

¿Cuándo no debo usar IDs en Cypress? Cuando trabajas con frameworks como React o Angular, o con librerías como Styled Components, los IDs y clases suelen autogenerarse con hashes. En esos casos, los atributos personalizados son más estables.

Seleccionar por clase

Las clases requieren más cuidado. Si copias una clase compuesta directamente del DOM, por ejemplo mr-sm-2 form-control, y la pegas tal cual con un solo punto, Cypress fallará y lanzará un error de timeout tras los milisegundos por defecto.

El truco está en reemplazar el espacio por otro punto, indicando que son dos clases encadenadas:

javascript cy.get('.mr-sm-2.form-control')

Aun así, las clases suelen estar compartidas entre varios elementos del formulario, por lo que el selector puede devolver más de un resultado [09:50].

¿Por qué algunos selectores devuelven varios elementos?

Esta es la limitación principal de buscar por tag o por clase: la web moderna reutiliza estilos y estructuras. Un mismo input puede compartir clases con otros cinco campos del formulario, y eso obliga a refinar la búsqueda.

Las estrategias que aprendiste se pueden combinar: tag más atributo, atributo más valor exacto, o un ID cuando existe y es estable. Esa combinación es lo que separa una prueba frágil de una prueba mantenible.

¿Has tenido problemas localizando elementos con clases autogeneradas? Cuéntame en los comentarios qué framework usas y cómo lo resuelves.