Los plugins en Cypress amplían funcionalidades que la herramienta no trae por defecto, y uno de los más útiles es Cypress XPath, que permite escribir localizadores más legibles cuando los CSS selectors se quedan cortos. Si automatizas pruebas y necesitas seleccionar elementos de forma relativa o por contenido, este recurso te ahorra tiempo y mejora el mantenimiento del código.

¿Qué son los plugins en Cypress y para qué sirven?

Los plugins son extensiones creadas por la comunidad que agregan capacidades a Cypress. Como Cypress no integra todo de forma nativa, estos paquetes permiten cubrir necesidades específicas, desde manejar XPath hasta funciones personalizadas que tú mismo podrías construir.

¿Qué es un plugin en Cypress? Es un paquete externo que extiende los comandos y funciones de Cypress. Se instala con npm y se importa en el archivo de soporte para que Cypress reconozca los nuevos comandos.

En la clase se trabaja con uno muy puntual: Cypress XPath, pensado para quienes ya entienden la utilidad de los XPath en automatización.

¿Cómo instalar y configurar Cypress XPath?

El flujo de instalación es directo y se resume en dos pasos: instalar el paquete y luego registrarlo dentro del archivo de soporte de Cypress [01:00].

• Instala el plugin Cypress XPath desde npm.
• Abre el archivo support y agrega un import que cargue Cypress XPath.
• Crea tu archivo de prueba, por ejemplo xpath.cy.js, con su bloque describe.

Con esa importación, Cypress reconoce el comando cy.xpath() y queda listo para ejecutar tus pruebas.

¿Cuál es la diferencia entre CSS selector y XPath en Cypress?

Para verlo claro, el ejemplo de la clase parte de visitar una página y seleccionar un elemento H1 que contenga el texto Bulbasaur [02:00].

Selección con CSS selector

Al inspeccionar el elemento y usar copy selector, el resultado es una cadena larga que recorre desde el root, pasando por el div container y todos sus hijos, hasta llegar al H1. Funciona, pero es poco legible.

javascript cy.visit('/'); cy.get('div.container > div > ... > h1').contains('Bulbasaur');

Selección con XPath

Con Cypress XPath, la misma lógica se expresa de forma mucho más natural:

javascript cy.visit('/'); cy.xpath("//h1[contains(text(), 'Bulbasaur')]");

Aquí le dices a Cypress: selecciona cualquier H1 que contenga el texto Bulbasaur. Punto. La función contains combinada con text() describe la intención de forma directa.

¿Cuándo conviene usar XPath en Cypress? Cuando necesitas localizar elementos por su contenido, posición relativa o relaciones jerárquicas que un CSS selector no puede expresar con claridad.

¿Cypress necesita XPath o ya trae alternativas nativas?

La realidad es que Cypress ofrece una alternativa nativa muy potente: el comando contains. Con él, el mismo caso anterior se resuelve sin instalar ningún plugin [03:30].

javascript cy.visit('/'); cy.contains('Bulbasaur').should('be.visible');

Esta forma es legible, corta y aprovecha lo que Cypress ya trae. Por eso, en la mayoría de los casos no vas a necesitar XPath. Aun así, hay escenarios donde XPath sigue siendo la mejor herramienta, sobre todo cuando heredas suites de pruebas o trabajas con DOMs complejos.

XPath es todo un lenguaje con funciones propias y curva de aprendizaje, así que vale la pena dedicarle tiempo si tu proyecto lo requiere.

¿Por qué los plugins importan en tu estrategia de testing?

Los plugins representan la posibilidad de extender Cypress según las necesidades reales de tu equipo. Si te falta una funcionalidad, lo más probable es que alguien en la comunidad ya la haya construido, y si no, puedes crear la tuya.

Usar XPath a través de Cypress XPath mejora dos cosas concretas:

• La legibilidad de tus localizadores, porque expresan intención en lugar de rutas.
• El mantenimiento del código, porque los selectores no se rompen ante cambios menores en la jerarquía del DOM.

Cuéntame en los comentarios qué plugins de Cypress usas, cuáles te han salvado en proyectos reales y si tuviste que hacer algún paso adicional para instalarlos.