Ejecutar tests en aplicaciones utilizando un Shadow DOM
La API del Shadow Objeto de documento de objeto (DOM) es un componente web que permite adjuntar un árbol del DOM encapsulado a un elemento de HTML. El DOM de sombra es autónomo y permanece aislado del DOM del documento principal.
Puedes utilizar un DOM de sombra para los siguientes casos de uso:
- Formularios y componentes de bibliotecas de terceros
- Contenido incrustado (como vídeo o una imagen)
- Integraciones de chats emergentes
En función del modo de encapsulación y del objetivo del paso, aprovecha las acciones de tests del navegador para configurar un test que interactúe y valide elementos representados en un DOM de sombra. En esta guía se destacan estas acciones y tipos de aserción.
Modo abierto
En el modo open, las aserciones normales no están disponibles. Puedes utilizar las aserciones de JavaScript para interactuar y validar elementos representados en un DOM de sombra con la propiedad Element.shadowRoot.
Aserción de la presencia de texto
Para validar que el texto “TODO” aparece en una página, consulta la propiedad innerHTML directamente desde el elemento <body> del documento principal.
devolver document.querySelector("body").innerHTML.includes("TODO")
Validar texto representado
Para validar que el texto está representado en un elemento dado representado en un DOM de sombra, utiliza la propiedad shadowRoot para acceder al elemento respectivo y las propiedades innerHTML o textContent para validar que el texto está representado.
Por ejemplo, el siguiente fragmento de código valida el texto “TODO” representado en una etiqueta (tag) <h3>:
// encontrar el elemento al que se adjunta el Shadow DOM:
si el elemento = document.querySelector("body > editable-list")
// utilizar la propiedad shadowRoot para localizar el elemento <h3> en el Shadow DOM:
si shadowDomElement = element.shadowRoot.querySelector("div > h3")
// check el textContent del elemento Shadow DOM:
devolver shadowDomElement.textContent.includes("TODO")
Introducir texto en los campos de entrada
Cuando los campos de entrada de texto se representan en el árbol de DOM del documento principal, el grabador de tests del navegador Datadog graba automáticamente los valores introducidos y crea un paso de test Escribir texto.
Cuando se trabaja con campos de entrada representados en un DOM de sombra, es posible que el grabador no pueda capturar un conjunto completo de puntos de referencia al elemento, lo que provoca que el paso falle en las ejecuciones de tests. Como solución para introducir texto en un campo de entrada de texto representado en un DOM de sombra, añade una aserción JavaScript que localice el elemento <input> respectivo y configure el campo value.
Por ejemplo, el siguiente fragmento de código añade el texto “elemento añadido con aserción JS” en el campo de entrada:
// encontrar el elemento al que se adjunta el Shadow DOM:
let element = document.querySelector("body > editable-list")
// utilizar la propiedad shadowRoot para localizar el elemento <input> en el Shadow DOM:
si shadowDomInput = element.shadowRoot.querySelector("input")
// configurar la propiedad de valor del elemento <input>:
shadowDomInput.value = "Elemento añadido con aserción JS"
devolver true
Haz clic en un elemento
Para activar un clic en un elemento representado en un DOM de sombra, localiza el elemento respectivo y ejecuta .click() sobre él.
Por ejemplo, el siguiente fragmento de código activa un clic en un elemento de botón.
// encontrar elemento al que se adjunta el Shadow DOM:
si el elemento = document.querySelector("body > editable-list")
// utilizar la propiedad shadowRoot para localizar el elemento <button> en el Shadow DOM:
si shadowDomButton = element.shadowRoot.querySelector("button.editable-list-add-item")
// activar un clic en el botón:
shadowDomButton.click()
devolver true
Modo cerrado
En el modo closed, las aserciones normales no están disponibles. Además, los elementos representados en un DOM de sombra no son accesibles con JavaScript, por lo que no puedes utilizar aserciones JavaScript en tus tests de navegador.
Puedes utilizar la acción Press Key para seleccionar las opciones adecuadas. Por ejemplo, para ir a una página diferente seleccionando una opción de un menú de navegación y que el menú se represente en un DOM de sombra, utiliza la tecla tab para ir a la opción respectiva y haz clic en la tecla enter para seleccionar una opción.
Leer más
Más enlaces, artículos y documentación útiles:
