Reutilizar elementos en Cypress evita repetir la misma sintaxis una y otra vez en tus pruebas automatizadas. Aquí aprenderás a guardar referencias del DOM con .then, manejar elementos jQuery y reconvertirlos a Cypress con cy.wrap para escribir tests más limpios y mantenibles.

Si vienes de Selenium o Puppeteer, la lógica de asignar un elemento a una variable y reutilizarla parece natural. Pero en Cypress esa estrategia rompe en cuanto intentas hacer aserciones serias, y la propia documentación lo desaconseja.

¿Por qué no puedo guardar elementos de Cypress en una variable?

La tentación es escribir algo como const input = cy.get('input') y reutilizar input más adelante. Funciona en apariencia cuando solo navegas elementos padre, pero falla al ejecutar validaciones o aserciones complejas.

Cypress trabaja de forma asíncrona mediante una cola de comandos, no con valores de retorno directos. Por eso necesita un mecanismo distinto para exponerte el elemento ya resuelto.

¿Por qué Cypress no recomienda guardar elementos en variables? Porque sus comandos son asíncronos y encolados. Una variable no contiene el elemento real del DOM, sino una referencia al comando que aún no se ejecuta.

¿Cómo uso .then para acceder al elemento en Cypress?

El comando .then funciona como un callback similar a una promesa de JavaScript. Te entrega el elemento ya resuelto para que puedas trabajar con él dentro de ese bloque.

javascript cy.get('input').parents('form').then((form) => { const inputs = form.find('input') expect(inputs.length).to.equal(15) })

Dentro del callback puedes encadenar métodos como .find() para buscar etiquetas específicas dentro del contenedor. Por ejemplo, partiendo del form, puedes obtener todos los input, los div o los label que contiene.

¿Qué tipo de elemento devuelve .then?

El elemento que recibes dentro del callback es de tipo jQuery, no de Cypress. Cypress usa jQuery por debajo para acceder al DOM, así que muchos métodos como .find(), .parents() o .length funcionan igual.

La diferencia importante es que ciertos comandos exclusivos de Cypress no operan sobre objetos jQuery. Necesitas otra herramienta para recuperar esa sintaxis.

¿Cuándo debo usar cy.wrap en lugar de .then directo?

cy.wrap envuelve un elemento jQuery y lo convierte de vuelta en un elemento de Cypress. Eso te devuelve acceso completo a la sintaxis y aserciones propias del framework.

javascript cy.get('input').parents('form').then((form) => { const inputs = form.find('input') cy.wrap(inputs).should('have.length', 15) })

La validación es equivalente a usar expect(inputs.length).to.equal(15), pero con cy.wrap puedes aplicar aserciones tipo .should() que solo existen en Cypress.

¿Qué hace cy.wrap exactamente? Toma un objeto jQuery o cualquier valor y lo convierte en un sujeto de Cypress, permitiéndote encadenar comandos y aserciones del framework como .should() o .click().

Aserciones básicas para validar elementos guardados

Dentro del callback de .then puedes usar expect de Chai para validar propiedades del elemento jQuery. Es la forma más directa de comprobar cantidades o atributos.

• expect(inputs.length).to.equal(15) valida que existan exactamente 15 inputs.
• expect(divs.length).to.equal(70) confirma la cantidad de divs en el formulario.
• expect(labels.length).to.equal(16) verifica los labels presentes.

Si cambias el número esperado a uno incorrecto, la prueba falla con un mensaje claro indicando que el valor real no coincide con el esperado. Esa retroalimentación inmediata es lo que hace útil escribir aserciones antes de avanzar.

¿Por qué Cypress devuelve elementos jQuery?

jQuery sigue siendo una de las librerías más usadas para manipular el DOM en JavaScript. Cypress se apoya en ella internamente para localizar y operar sobre elementos de la página.

Eso explica por qué muchos comandos se ven idénticos a los de jQuery, pero también por qué necesitas cy.wrap cuando quieres regresar al ecosistema de Cypress puro.

Resumen práctico de los comandos clave

Al trabajar con elementos guardados conviene tener claro qué hace cada pieza:

1. .then(callback) entrega el elemento resuelto como objeto jQuery dentro del callback.
2. .find(selector) busca elementos hijos dentro de un contenedor jQuery.
3. .parents(selector) sube en el árbol del DOM hasta el ancestro indicado.
4. cy.wrap(elemento) convierte un objeto jQuery en sujeto de Cypress para usar su sintaxis completa.

Dominar este flujo te prepara para escribir tests más expresivos sin caer en repeticiones innecesarias. ¿Ya probaste combinar .then con cy.wrap en alguno de tus tests? Cuéntame cómo lo aplicaste en los comentarios.