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.

La analogía rápida

Si conoces UiPath: el ZoanSelector de Zoan es el equivalente a su selector XML. La idea es idéntica —una jerarquía de elementos con atributos— solo que en Zoan se guarda como datos estructurados y se edita en un panel visual.

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)	app, 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 editor de UI Discover 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
app	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.

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	Empezando por =	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 ser 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 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”. ¿Cómo distinguirlo de los otros diez campos vacíos de la pantalla?

Con un ancla: localizas el objetivo en relación a un elemento de referencia que sí es identificable. “El campo que está a la derecha de la etiqueta Apellido”.

Relación	El objetivo está…
right_of	a la derecha del ancla
left_of	a la izquierda del ancla
below	debajo del ancla
above	encima del ancla
nearest	el más cercano al ancla (sin dirección)

Cada ancla tiene una distancia máxima (en píxeles, 250 por defecto): si no hay ningún candidato dentro de ese radio en la relación indicada, el ancla no se aplica. Capturas y configuras las anclas desde UI Discover.

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.

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. Usa anclas, no posiciones. Antes de fijar idx, busca un texto cercano estable.
6. Valida en la página real. Pulsa Validar y persigue el verde. El naranja y el morado son avisos de que se romperá pronto.
7. Recaptura tras un rediseño. Si la aplicación objetivo se actualiza, vuelve a capturar los selectores afectados; es más rápido que depurar fallos.

Siguientes pasos

• UI Discover — la herramienta para capturar selectores apuntando con el mouse.
• 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.