UI Discover

Zoan UI Discover es la herramienta que captura selectores apuntando con el mouse, sin escribir nada. Es la forma normal —y recomendada— de decirle al bot en qué elemento actuar: abres la pantalla que quieres automatizar, haces clic en el elemento, y Zoan genera un selector robusto por ti.

Cuándo aparece

Cualquier actividad que necesite un elemento —Click, Fill Field, Get Text, las de Desktop…— tiene un parámetro de tipo selector en su panel de Propiedades. Ese parámetro muestra un botón Capturar (o el resumen del selector ya capturado, con opción a recapturar).

panel de propiedades de una actividad con el parámetro selector y el botón Capturar.

Al pulsarlo se abre la ventana de Zoan UI Discover. Según la actividad, trabaja en uno de dos modos:

Navegador — para páginas web (necesita la extensión de Chrome/Edge).
Escritorio — para aplicaciones de Windows (integrado, no necesita nada extra).

Modo navegador

Paso 0: instala la extensión (una sola vez)

La captura en el navegador funciona con una pequeña extensión que hace de puente entre la página y el Designer. Si no está instalada, el panel te lo indica con “Extensión no instalada”. Para instalarla:

Abre chrome://extensions (o edge://extensions en Edge). El botón Abrir Extensiones del panel lo hace por ti.
Activa el Modo desarrollador (interruptor arriba a la derecha).
Haz clic en Cargar sin empaquetar.
Selecciona la carpeta chrome-extension (incluida con la instalación del Designer).

Cuando la extensión esté activa y el Designer abierto, el panel mostrará en verde ● Extensión conectada.

panel de UI Discover mostrando el estado Extensión conectada.

Paso 1: captura el elemento

Abre, en Chrome o Edge, la página que quieres automatizar y déjala en el estado correcto (logueado, en la pantalla adecuada).
En el panel, pulsa ⊙ Capturar. El Designer se minimiza y el navegador pasa al frente.
Mueve el mouse: el elemento bajo el cursor se resalta. Haz clic sobre el que quieres capturar.
¿Te equivocaste de pantalla? Pulsa Escape para cancelar.

El panel vuelve al frente mostrando el resultado: una captura del elemento, su editor de atributos, el CSS de respaldo y el JSON del selector.

panel de UI Discover con un elemento capturado: captura, atributos y JSON.

Paso 2: revisa y depura el selector

El editor de atributos muestra una tarjeta por cada nivel del selector:

La tarjeta • elemento es el objetivo.
Las tarjetas • contexto son sus ancestros (dan contexto para ubicarlo sin ambigüedad).

En cada tarjeta puedes:

Editar el valor de un atributo (por ejemplo, cambiar un texto fijo por un comodín: Pedido 1024 → Pedido *).
Quitar un atributo con la × (menos atributos = más robusto).
Añadir un atributo de los Disponibles: Zoan captura todos los atributos del elemento y te ofrece los que no están en uso como chips + id, + name, etc. Un clic los añade.

Debajo, el bloque JSON — editable muestra el selector completo. Lo que edites en los atributos se refleja en el JSON y viceversa; normalmente no necesitas tocarlo, pero está ahí para ajustes finos.

Paso 3: valida

Pulsa ⊙ Validar: la extensión busca el elemento en la página real y te dice por qué vía lo encontró, con un color:

🟢 Verde — encontrado por la vía semántica. Robusto. Es lo que buscas.
🟠 Naranja — encontrado solo por CSS. Frágil; conviene mejorar el selector.
🟣 Morado — encontrado solo por XPath. Muy frágil; recaptura.
🔴 Rojo — no encontrado. Revisa que la página esté cargada y en la pantalla correcta.

El significado de cada color y cómo conseguir el verde está detallado en Selectores › Orden de resolución.

Paso 4: confirma

Cuando estés conforme, pulsa ✓ Confirmar. El selector se guarda en el parámetro de la actividad y la ventana se cierra. También puedes ↺ Recapturar (volver a apuntar) o Copiar JSON / CSS para reutilizarlo.

Anclas: referencias espaciales

Si el elemento no tiene atributos únicos (un campo en blanco junto a una etiqueta), usa un ancla: un elemento de referencia cercano que sí es identificable.

En el panel, en la sección anclas:

Pulsa ⊕ Capturar ancla y haz clic sobre el elemento de referencia (por ejemplo, la etiqueta Apellido). Vuelves al panel sin perder el selector principal.
Elige la relación (right_of, left_of, below, above, nearest) — por ejemplo, “el objetivo está a la derecha del ancla”.
Ajusta la distancia máxima en píxeles si hace falta.

Puedes añadir varias anclas; el bot las usa para filtrar entre candidatos cuando hay varios elementos parecidos.

Modo escritorio

Para las actividades de Desktop, UI Discover usa un selector de pantalla integrado basado en UI Automation de Windows — no necesita extensión.

Al capturar, aparece una superposición a pantalla completa y una pequeña barra arriba a la derecha.
Mueve el mouse sobre la aplicación: el control bajo el cursor se resalta (botón, campo, celda…).
Haz clic para capturarlo. Pulsa Escape para cancelar.
Si necesitas interactuar con la app sin capturar (abrir un menú, cambiar de pestaña), pulsa ⏸ Pausar en la barra; vuelve a ▶ Reanudar cuando quieras seguir señalando.

El resultado se edita igual que en el modo navegador (atributos controlType, automationId, name…). Para controles sin nombre propio, el panel sugiere anclas a partir de las etiquetas cercanas: aparecen como chips Añadir como ancla.

Aplicaciones Java

UI Discover también captura controles de aplicaciones Java de escritorio (Swing/AWT) mediante el Java Access Bridge:

Al apuntar a una app Java por primera vez, Zoan intenta activar el bridge automáticamente (la barra muestra “Conectando Java…”).
Si el bridge se acaba de habilitar, las apps Java ya abiertas deben reiniciarse para que sus controles sean detectables.
Si no está disponible, instala un JDK compatible y ejecuta jabswitch -enable una vez.

Consejos

Deja la pantalla lista antes de capturar: logueado y en la vista correcta. Capturas lo que ves.
Persigue el verde al validar; el naranja y el morado avisan de que el selector se romperá pronto.
Simplifica: quita atributos sobrantes y cambia los textos variables por comodines.
La captura del elemento que guarda el panel te ayuda luego a recordar, de un vistazo, qué selecciona cada actividad.

Siguientes pasos

Selectores — entender qué capturas y cómo hacerlo robusto.
Browser y Desktop — las actividades que usan estos selectores.