Encontrar el elemento correcto en una página web puede ser un dolor de cabeza cuando varios coinciden con el mismo selector. En Cypress existen comandos como contains, parents y find que permiten delimitar la búsqueda en el DOM sin recurrir a XPath, ideales para QA Automation que trabajan con interfaces complejas o sin identificadores claros.

Esto importa porque te ahorra plugins externos, hace tus pruebas más legibles y resuelve un problema real: cuando el desarrollador no agregó un id o una clase al elemento que necesitas automatizar.

¿Cómo funciona el comando contains en Cypress?

El comando contains busca un elemento que tenga cierto texto dentro del DOM. A diferencia de Selenium o Puppeteer, Cypress no soporta XPath de forma nativa, aunque existe un plugin opcional. En la mayoría de los casos no lo necesitas porque contains cubre el escenario [01:00].

Si en tu página tienes un elemento con el texto reading y quieres seleccionarlo directamente, en lugar de usar cy.get, escribes:

javascript cy.contains('reading')

Cypress navega el DOM y devuelve el elemento que coincide. Simple y directo.

¿Cypress soporta XPath? No de forma nativa. Puedes instalar un plugin, pero comandos como contains, find y parents resuelven casi todos los escenarios sin necesidad de XPath.

¿Cómo combinar contains con un selector para precisar la búsqueda?

A veces un selector de clase devuelve varios elementos. Por ejemplo, la clase header-wrapper puede aparecer en ocho lugares distintos. Para delimitar, contains acepta dos parámetros: el selector y el texto [02:30].

javascript cy.contains('.header-wrapper', 'Widgets')

Así Cypress busca solo el elemento que tenga esa clase y ese texto. En XPath tendrías que recurrir a normalize-text o sintaxis más enredada. Aquí lo resuelves en una línea.

¿Cuándo usar parents y parent en Cypress?

Hay momentos en los que no quieres el input, sino el contenedor que lo envuelve. Cypress ofrece dos comandos para subir en el DOM: parent y parents [03:40].

• parent: obtiene el elemento padre directo, un solo nivel arriba.
• parents: obtiene todos los ancestros del elemento, hasta el tope del DOM.

Si haces:

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

Cypress te devuelve el div que contiene ese input. En cambio, si usas .parents(), te regresa los 11 elementos que envuelven al input hasta la raíz. Útil, pero demasiado amplio si solo quieres uno.

¿Cómo filtrar los ancestros con find?

Aquí entra find, que significa encontrar y permite buscar dentro de los elementos ya seleccionados [05:10]. Si tienes los parents y solo quieres los label, encadenas:

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

Este patrón resuelve un escenario muy común: un div contiene un label y un input, pero el input no tiene id ni clase. Localizas el label por su texto, subes al padre y bajas al input. Navegas el DOM con flexibilidad total.

¿Cuál es la diferencia entre parent y parents en Cypress? parent devuelve solo el elemento padre inmediato. parents devuelve todos los ancestros hasta la raíz del DOM.

¿Cuál es la forma correcta de encadenar find en Cypress?

La práctica más limpia es ir del padre al hijo. Por ejemplo, si quieres los label dentro de un formulario [06:30]:

javascript cy.get('form').find('label')

Esto tiene más sentido semántico: tomas el contenedor y bajas al hijo. La sintaxis encadenada es la firma de Cypress.

¿Por qué find no funciona solo?

Un error frecuente es escribir cy.find('label') directamente. Esto falla porque find necesita un elemento previo del DOM para operar. find siempre va concatenado después de un comando como get, parent o parents que devuelva un elemento. No es un comando independiente.

javascript // Incorrecto cy.find('label')

// Correcto cy.get('form').find('label')

¿Cuándo usar find en lugar de get? Usa find cuando ya tienes un elemento seleccionado y quieres buscar dentro de sus descendientes. Usa get para empezar una búsqueda nueva desde la raíz del documento.

Con contains, parent, parents y find tienes el kit básico para localizar cualquier elemento, incluso los que no tienen identificador propio. Si te ha pasado que un desarrollador no quiere agregar ids a los inputs, cuéntame en los comentarios cómo resolviste tu caso.