Shadow DOM en Automatización de Pruebas con Cypress

Al probar aplicaciones web la estructura del DOM no siempre es tan directa como parece y el elemento que ves en DevTools puede no ser accesible para tu prueba porque está envuelto dentro de iframes o del Shadow DOM. En este artículo explico qué es el Shadow DOM por qué importa y cómo probarlo con Cypress.

Qué es Shadow DOM: Shadow DOM es una subrama encapsulada del DOM que vive dentro de un elemento host. Nació con la especificación de Web Components y se usa mucho en bibliotecas modernas de interfaz como Material UI Ionic Lit y componentes de Angular. Sus ventajas clave son que el CSS y el JS están aislados evitando fugas globales los componentes son reutilizables y la estructura queda oculta al DOM principal. Piensa en ello como un mini DOM dentro del DOM.

Beneficios principales: estilos y scripts scopeados sin fugas componentes reutilizables encapsulamiento que evita conflictos

Tipos de DOM y ejemplos: Normal DOM ejemplo <div id=login> <input id=username /> </div> con Cypress normalmente se haría cy.get(#username).type(hello)

Shadow DOM abierto ejemplo <my-login> #shadow-root (open) <input id=username /> </my-login> Opciones en Cypress: Opción A usar .shadow() cy.get(my-login).shadow().find(#username).type(hello) Opción B habilitarlo globalmente en cypress.config.js module.exports = { e2e: { includeShadowDom: true } }

Shadow DOM cerrado ejemplo <my-login> #shadow-root (closed) <input id=username /> </my-login> Los shadow roots cerrados no son accesibles con Cypress ni con selectores regulares porque están diseñados para ser privados. Como solución necesitarás pruebas a nivel de componente o que la aplicación exponga hooks para testing por ejemplo atributos o props.

Elementos slotted: a veces los elementos se proyectan dentro de un shadow DOM mediante slot ejemplo <my-login> #shadow-root (open) <slot name=email></slot> </my-login> fuera del componente <input slot=email id=email-input /> Para acceder a contenido slotted suele ser necesario tomar los nodos asignados del slot. Una implementación típica en Cypress podría definirse como un comando personalizado sin comillas por ejemplo Cypress.Commands.add(getSlottedElement selector => { return cy.get(selector).then($el => { return cy.wrap($el[0].assignedNodes()[0]) }) }) y usarlo como cy.getSlottedElement(#email-input).type(hello@qa.com)

Por qué el Shadow DOM importa en automatización: está presente en muchas SPA y Web Components tus pruebas pueden fallar con elemento no encontrado a menos que tengas en cuenta el Shadow DOM manejarlo correctamente hace las pruebas más estables y a prueba de futuro

Resumen práctico: el DOM no siempre significa elementos siempre accesibles. Las aplicaciones web pueden incluir DOM plano iframes Shadow DOM abierto o cerrado. Cypress soporta Shadow DOM abierto con .shadow() o con la propiedad includeShadowDom en la configuración. Para elementos slotted puede que necesites helpers personalizados y .shadow() no ve contenido slotted directamente porque ese contenido vive fuera del shadow root y se proyecta dentro. Para shadow DOM cerrado conviene colaborar con desarrolladores para añadir hooks de test.

Consejos para quien empieza en automatización: comienza experimentando con Cypress y un componente web sencillo para entender por qué manejar Shadow DOM es una habilidad imprescindible.

Sobre Q2BSTUDIO: en Q2BSTUDIO somos una empresa de desarrollo de software y aplicaciones a medida especializada en soluciones empresariales que abarcan software a medida, inteligencia artificial, ciberseguridad y servicios cloud. Ofrecemos desde desarrollo de aplicaciones personalizadas hasta servicios de seguridad y análisis de datos. Si buscas crear aplicaciones a medida visita Desarrollo de aplicaciones y software a medida y si necesitas infraestructura gestionada y migración en la nube revisa nuestros servicios cloud aws y azure. También trabajamos con servicios de inteligencia de negocio power bi ia para empresas agentes IA y ciberseguridad ofreciendo integraciones a medida y soluciones de automatización de procesos.

Si tu proyecto necesita pruebas robustas para componentes web o quieres que integremos buenas prácticas de testing con Cypress en una solución de software a medida contacta con Q2BSTUDIO para diseñar una estrategia que incluya testing componentes encapsulados seguridad y despliegue en cloud.