Configuraciones avanzadas

Para configurar el STELA INSPECTOR se muestran dos secciones:

Ajustes al comportamiento de STELA INSPECTOR #

Para acceder a las «Configuraciones avanzadas» se debe hacer clic derecho sobre el icono de STELA Inspector, desde esta ventana puedes modificar algunas características de la herramienta.

• Resaltar elementos: Esta función permite que se resalte con una “sombra” el elemento que se está inspeccionado.

Ejemplo: Elemento “STELA STORE”. En la primera imagen se puede ver el elemento resaltado mientras que en la segunda no.

• Seleccionar elemento sin hacer clic: Permite que al posicionar el mouse (sin hacer clic) sobre el elemento que se desea inspeccionar, y devuelva las propiedades. Si esta opción se desactiva, es necesario hacer clic sobre el elemento para que se visualicen las mismas.

Ejemplo: En la primera imagen se puede ver que al posicionar el mouse se muestran las propiedades del elemento. En la segunda imagen el mouse es posicionado sobre el elemento, pero al no realizar clic estas no aparecen (opción desactivada)

• Generar ID cortos: Al activar esta casilla, el inspector optimizará las propiedades capturadas utilizando identificadores simplificados.

Ejemplo: En el ejemplo se puede contrastar la diferencia en la longitud del atributo: la primera captura muestra la estructura de un ID corto, mientras que la segunda muestra un ID largo (en caso de desactivar la casilla)

• Posición del aviso del resultado de la inspección: Esta opción permite determinar dónde se ubica el resultado de la inspección a través de cuatro opciones (inferior izquierda, inferior derecha, superior izquierda, superior derecha).

Ejemplo: en las imágenes se observa que se selecciona Posición Superior derecha e Inferior derecha.

• Color de fondo del mensaje de resultado: permite seleccionar el color de fondo de las propiedades del elemento.  Están disponibles 3 opciones (Verde, rojo o azul)

Propiedades incluidas al resultado de STELA INSPECTOR #

Este panel de configuración funciona como un filtro avanzado. Su objetivo principal es indicarle a la extensión qué atributos priorizar, incluir o ignorar al momento de capturar un elemento (tales como className, type, value, text, tagName, href, el contexto del DOM o estructuras de frames).

Además, permite activar o desactivar la captura de las propiedades id y name en caso de que la aplicación las genere de manera dinámica. Una característica clave es su capacidad para reconocer componentes encapsulados mediante la selección de propiedades del Shadow DOM (inShadowDom, shadowDepth, rootType, cssLocal)

A continuación, se mostrarán ejemplos seleccionando cada una de estas propiedades en las configuraciones avanzadas del STELA INSPECTOR

• Atributos de Automatización: son etiquetas especiales que los desarrolladores añaden al código HTML de una página web con un único propósito: facilitar la vida al equipo de QA y a los robots de automatización. Al usar atributos de automatización, se separa por completo el diseño de la automatización. Miremos este ejemplo en código de cómo se ve un botón de inicio de sesión. Ejemplo:

<button class=»btn btn-primary login-style-v2″ id=»btn-8394″>Ingresar</button>

<button class=»btn btn-primary login-style-v2″ id=»btn-8394″ data-testid=»boton-login»>Ingresar</button>

Si luego los desarrolladores cambian la clase a btn-dark y el ID cambia a btn-9000, el robot de STELA no fallará, porque seguirá buscando el elemento que tenga data-testid=»boton-login». Ese valor nunca cambia.

• Atributos de accesibilidad (role, aria-label): son etiquetas especiales que se introducen en el código HTML de una página web para que las tecnologías asistidas (como los lectores de pantalla que utilizan las personas con discapacidad visual) puedan comprender qué es un elemento y qué hace. Ejemplo: <button aria-label=»Eliminar registro»><i class=»icon-trash»></i></button>
• Atributos de formularios (placeholder, type y value): son propiedades fundamentales que se le asignan a las etiquetas de entrada de datos en HTML (como <input>, <textarea> o <select>).  Al marcar esta casilla en la configuración de la extensión, el inspector recopilará estas tres propiedades de manera automática cada vez que des clic sobre una caja de texto. Ejemplo: <input type=»text» placeholder=»Ej: Juan Pérez»>
• Atributos de navegación y multimedia (href y src): son las propiedades que utiliza el código HTML para establecer conexiones y rutas hacia recursos externos o internos dentro de una página web.Final del formulario. Ejemplo: <a href=»https://store.stela.ai»></a>

• Selectores estructurales (CSS, XPath) son las  «direcciones postales» que utiliza un robot de automatización para navegar a través del código fuente de una página web (el DOM) y localizar con precisión milimétrica el elemento exacto con el que debe interactuar.

Ejemplo

• Contexto DOM (ancestors, className, tag, attributes, dataset, class) es una función avanzada de inspección que analiza el entorno completo de un elemento web dentro del código de la página (el árbol del DOM). Para entenderlo mejor, cuando el inspector de STELA activa esta casilla, no se limita a mirar el botón o el campo de texto de forma aislada, en su lugar, recorre su árbol genealógico y su estructura completo.

Ejemplo:

• Texto visible (text): mientras que los IDs, las clases de CSS o los atributos data- están ocultos en el código fuente para el consumo de los navegadores y programadores, el Texto Visible es la capa humana de la aplicación. Es lo que dice un botón («Guardar»), lo que muestra un encabezado («Mi Cuenta») o el mensaje que aparece en una alerta de error («Contraseña incorrecta»).

Ejemplo:

• Contexto Shadow DOM (ShadowHosts, inShadowDom, shadowDepth, rootType, cssLocal): es una función de inspección avanzada en STELA diseñada para lidiar con el desarrollo web moderno basado en Web Components y elementos encapsulados.  El Shadow DOM actúa como una «habitación privada» o un DOM oculto dentro de la página principal.

Cuando activas esta casilla en el STELA INSPECTOR, le das al robot la capacidad de escanear esa estructura oculta para poder automatizar los elementos internos sin errores.

Guardar configuración #

Luego de seleccionar las configuraciones que se requieran, se dá clic en el botón “Guardar” y cerrar «x»