Selectores

Un selector es la forma en que le dices al bot en qué elemento actuar: este botón, aquel campo, esa celda. Es el concepto más importante de la automatización de navegador (Browser) y de escritorio (Desktop): sin un buen selector, la actividad no sabe dónde hacer clic o qué leer, y el bot falla.

La buena noticia es que casi nunca escribes un selector a mano: lo capturas apuntando con el mouse con UI Discover. Esta página explica qué es un selector y cómo está hecho, para que entiendas lo que capturas, sepas ajustarlo cuando una página cambia y construyas selectores que no se rompan con el tiempo.

Qué problema resuelve

Una página web o una ventana no tienen “coordenadas fijas”: un botón cambia de posición si la ventana se agranda, si aparece un aviso arriba o si la app se actualiza. Apuntar por coordenadas (clic en el píxel 320,540) es frágil: a la primera que algo se mueve, el bot pincha en el lugar equivocado.

Un selector, en cambio, identifica el elemento por lo que es, no por dónde está: “el botón cuyo texto es Guardar”, “el campo cuyo id es usuario”. Así el bot lo encuentra aunque se haya movido.

Anatomía de un selector

Un selector es una jerarquía de nodos, desde la ventana o el navegador (la raíz) hasta el elemento concreto con el que quieres interactuar (la hoja). Cada nodo es un nivel de esa jerarquía y tiene un tipo y unos atributos.

Tipo de nodo	Representa	Ejemplo de atributos
wnd	Una ventana del sistema operativo (la app, el navegador)	process, title, cls
webctrl	Un elemento web (dentro del navegador)	tag, id, aaname, name, type, idx
frame	Un iframe (página incrustada dentro de otra)	src, name, idx
ctrl	Un control nativo de escritorio (botón, campo, lista…)	controlType, automationId, name, idx

En el Explorador de selectores ves esos nodos como tarjetas: la última (el elemento) es el objetivo, y las anteriores (contexto) son sus ancestros, que ayudan a ubicarlo sin ambigüedad.

Un selector también guarda dos datos auxiliares que se capturan automáticamente y sirven de red de seguridad (los explicamos en Cómo encuentra el elemento):

• CSS de respaldo — un selector CSS del elemento.
• XPath — la ruta absoluta del elemento en el documento.

Los atributos

Un atributo es una pista para identificar el elemento. No necesitas todos: cuantos menos y más estables, mejor. Estos son los que un selector puede usar:

Atributo	Significado	Contexto
process	Ejecutable de la ventana (chrome.exe, notepad.exe)	ventana
title	Título de la ventana o de la página	ventana
cls	Clase CSS (web) o clase de ventana Win32	ambos
tag	Etiqueta HTML (BUTTON, INPUT, TABLE, TR, TD…)	web
id	Atributo id del elemento HTML — el más estable	web
aaname	Accessible name: el texto visible o la aria-label del elemento	web
name	Atributo name del HTML (muy estable en formularios)	web
type	Atributo type (submit, text, checkbox…)	web
href	Destino de un enlace	web
src	Origen de un frame o imagen	web
idx	Índice 1-based entre hermanos del mismo tipo (desempate)	ambos
controlType	Tipo de control UIA (Button, Edit, List…)	escritorio
automationId	AutomationId del control — el más estable en escritorio	escritorio
name	Nombre accesible del control de escritorio	escritorio

La regla de oro

Prefiere siempre los atributos estables y únicos: id (web) y automationId (escritorio). Si no existen, usa name, aaname o aria-label. Deja idx (la posición) y el XPath como último recurso: son los primeros en romperse cuando la página cambia.

Modos de coincidencia: el valor de un atributo

Aquí está la parte que hace a un selector robusto o frágil. El valor de cualquier atributo puede escribirse de cuatro formas, y elegir bien es lo que evita que el bot se rompa cuando el texto cambia. En el Explorador de selectores eliges la forma con una lista (es igual a, contiene, empieza por, comodín, expresión regular) en vez de escribir la notación.

Modo	Cómo se escribe	Coincide con…	Ejemplo
Literal	El texto tal cual	Coincidencia exacta (sin distinguir mayúsculas)	usuario
Comodín	Con * al inicio, final o ambos	Cualquier texto en la posición del *	Pedido * coincide con Pedido 1024
Expresión	{{ expresión }} dentro del valor	Lo que devuelva la expresión al ejecutar	fila-{{ indice }}
Regex	Entre barras /patrón/	El patrón de expresión regular	/^Order-\d+$/

Esto se entiende mejor con un caso real:

• Una factura cuyo título es “Pedido 1024” hoy y “Pedido 1025” mañana. Si capturas el literal Pedido 1024, el selector funciona una vez y falla al día siguiente. Cambia el valor a Pedido * y funcionará siempre.
• En un bucle que recorre filas, el atributo idx puede llevar una expresión: {{ fila + 1 }}. Así la misma actividad apunta a la fila 1, 2, 3… según avanza el bucle. Esto es lo que convierte un selector estático en uno dinámico.

Los selectores dinámicos son muy potentes

Como el valor admite expresiones, un único selector puede recorrer una tabla, abrir el enésimo resultado de una búsqueda o seleccionar un elemento cuyo nombre depende de una variable. Combínalo con un For Loop y un solo flujo procesa decenas de elementos. Ver Expresiones.

Cómo encuentra el elemento (orden de resolución)

Cuando la actividad se ejecuta, Zoan Automation intenta localizar el elemento probando estrategias de la más estable a la más frágil, y se queda con la primera que funcione. Conocer este orden te ayuda a entender por qué un selector es bueno o malo — y es exactamente lo que mide el botón Validar de UI Discover.

En el navegador, el orden por cada nodo es:

1. id → lo más estable.
2. data-testid → estable en apps modernas.
3. name → muy estable en formularios.
4. aria-label → preciso e independiente del idioma.
5. placeholder → para campos sin etiqueta.
6. aaname (texto / nombre accesible).
7. CSS del nodo (tag + cls + type).
8. CSS de respaldo (la red de seguridad capturada al apuntar).
9. XPath absoluto → último recurso, frágil ante cambios de estructura.

Qué significan los colores de Validar

Cuando validas un selector en UI Discover, el resultado te dice por qué vía se encontró el elemento — y eso predice su fiabilidad:

• 🟢 Verde — encontrado por la vía semántica (id, name, aria-label, texto…). Es el mismo resultado que tendrás al ejecutar. Robusto.
• 🟠 Naranja — encontrado solo por CSS. Funciona, pero puede fallar si cambian las clases. Conviene recapturar.
• 🟣 Morado — encontrado solo por XPath. Es la red de último recurso; es frágil. Recaptura buscando atributos más estables.
• 🔴 Rojo — no encontrado. La página no está cargada, cambió, o el selector quedó mal.

Apunta siempre a tener selectores verdes.

En el escritorio la lógica es paralela, priorizando automationId y name del control sobre la posición.

Anclas: cuando el elemento no tiene nada propio

A veces el elemento objetivo no tiene atributos únicos: un campo sin id, sin nombre, sin etiqueta — solo una casilla en blanco junto al texto “Apellido”. O hay varios iguales, como el botón Editar de cada fila de una tabla. ¿Cómo decirle al bot cuál es?

Con un ancla: localizas el objetivo en relación a un elemento de referencia que sí es identificable. “El campo junto a la etiqueta Apellido”, “el Editar de la fila que dice ventas@empresa.com”.

Al capturar un ancla, el Designer guarda dónde estaba respecto al objetivo. Al ejecutar, el robot busca el ancla y elige, entre los candidatos, el que está en esa misma posición respecto a ella. Una celda o una fila se usan como ancla por su texto, en la fila o posición que esté, y ese texto puede venir de una variable con {{ }}.

Cada ancla tiene una distancia máxima en píxeles: si no hay ningún candidato dentro de ese radio, el ancla no se aplica. Capturas y ajustas las anclas en el Explorador de selectores, nodo a nodo como el objetivo.

Relaciones fijas

Un ancla también admite una relación fija en su JSON (right_of, left_of, below, above, nearest) en lugar de la posición capturada. Es útil cuando escribes el selector a mano; al capturar no hace falta.

Consejo

Las anclas son la herramienta para formularios sin etiquetas asociadas y tablas donde las celdas no tienen identificador. Antes de recurrir a idx (posición pura), pregúntate si hay un texto cercano y estable que puedas usar como ancla.

Avisos de selector frágil

No tienes que esperar a que el robot falle en otra máquina para saber que un selector es frágil. Mientras diseñas, el panel Problemas marca con el aviso «Selector frágil: puede fallar en otra máquina» los selectores que dependen de algo que cambia de un equipo o de una ejecución a otra, y te dice qué hacer en cada caso:

El selector depende de…	Sugerencia
La posición en pantalla (un control de escritorio sin id ni nombre)	Agrégale un ancla (un texto cercano) en el editor del selector.
Un id que la página genera sola	Vuelve a capturarlo, o usa su texto, etiqueta o nombre en vez del id.
Un texto que parece un dato (una fecha, un importe, un correo)	Cambia la parte que varía por * (por ejemplo Pedido *).
Una clase de estilo que cambia entre versiones o estados	Vuelve a capturarlo o agrégale un ancla.
Su posición entre otros iguales	Agrégale un ancla.
Un XPath absoluto	Vuelve a capturarlo para que se identifique por su texto, etiqueta o nombre.
En SAP, el número de conexión y de sesión o una fila visible de una tabla	Sigue la sugerencia del aviso.

Los avisos no impiden ejecutar ni publicar. Un clic en el aviso te lleva a la actividad y al campo del selector.

Buenas prácticas para selectores robustos

1. Captura, no escribas. Usa UI Discover: apunta y haz clic. Solo ajusta a mano lo necesario.
2. Menos es más. Quita los atributos que no aporten unicidad. Un id único basta; añadir cls, idx y posición solo lo hace más frágil.
3. Prioriza lo estable: id / automationId > name / aria-label / aaname > clases > idx / XPath.
4. Usa comodines para texto que cambia. Cualquier número, fecha o folio en un valor → conviértelo en * o regex.
5. Atiende los avisos de Problemas. Un selector frágil funciona en tu equipo y falla en el del robot.
6. Usa anclas, no posiciones. Antes de fijar idx, busca un texto cercano estable.
7. Comprueba en la pantalla real. El Explorador de selectores te dice cuántos elementos encuentra el selector; persigue 1 coincidencia o que el ancla decida.
8. Repara tras un rediseño. Si la aplicación objetivo se actualiza, Ver qué cambió te dice qué atributo cambió y lo repara conservando tus ajustes.

Siguientes pasos

• UI Discover — la herramienta para capturar selectores apuntando con el mouse.
• Explorador de selectores — para ajustar y reparar selectores con la pantalla a la vista.
• Browser — actividades que usan selectores en páginas web.
• Desktop — actividades que usan selectores en aplicaciones de Windows.
• Expresiones — para construir valores de atributo dinámicos.