Ir al contenido

Explorador de selectores

El Explorador de selectores es la ventana donde afinas un selector viendo en vivo lo que encuentra. Se abre con el lápiz del campo selector, con doble clic en el campo o al terminar una captura de UI Discover, y funciona igual para páginas web y para aplicaciones de Windows.

Es una ventana propia: puedes dejarla abierta junto a la página o la aplicación, moverla a otra pantalla y volver al Designer sin cerrarla.

Explorador de selectores con una página web: a la izquierda el árbol de la página, al centro el selector nodo a nodo, a la derecha las propiedades del elemento y abajo «1 coincidencia».

  • Árbol (izquierda): la estructura de la página o de la ventana, abierta hasta el elemento. La marca OBJETIVO señala el elemento que encontraría el robot y ANCLA sus anclas. Un clic en un nodo lo resalta en la pantalla y muestra sus propiedades; Usar como objetivo y Usar como ancla toman ese nodo para el selector.
  • Selector (centro): una pestaña para el objetivo y una por cada ancla. Cada nodo de la ruta es una tarjeta con sus atributos.
  • Propiedades (derecha): todo lo que tiene el nodo elegido en el árbol (texto, id, clase, columna de la tabla, valor…) y su estado: visible, habilitado, posición y tamaño. El + de una propiedad la agrega al nodo del selector que corresponde.

En cada tarjeta:

  • La casilla del nodo decide si ese nivel cuenta. Desmarcar un contenedor que no aporta hace el selector más tolerante a cambios de estructura. El último nodo (el elemento) siempre cuenta.
  • La casilla de cada atributo decide si se compara. Lo desmarcado no se guarda.
  • La comparación de cada atributo: es igual a, contiene, empieza por, comodín (* en cualquier parte) o expresión regular. Así Pedido 1024 pasa a ser «empieza por Pedido» y sirve para todos los pedidos.
  • El valor admite {{ expresión }}: el robot lo resuelve al ejecutar. Por ejemplo, el texto de la fila puede ser {{ correo }}.
  • Los chips + atributo ofrecen lo que el elemento tiene y aún no está en el selector, incluido su texto visible.

Lo que guardas es el mismo selector de siempre: las comparaciones se escriben con la notación que el motor ya entiende (* y /…/), así que un selector ajustado aquí funciona en cualquier versión del robot que ya lo soportara.

Abajo, el explorador dice cuántos elementos encuentra el selector con cada cambio que haces y los resalta numerados en la pantalla: el elegido en cian, los demás en ámbar y las anclas en azul. Las flechas recorren las coincidencias y abren el árbol en cada una.

EstadoQué significa
1 coincidencia (verde)El selector encuentra un solo elemento: el robot actuará sobre él.
N coincidencias · usa la n.º X (verde)Hay varios iguales y el ancla dice cuál es: el robot usa esa.
N coincidencias (ámbar)Hay varios y nada decide entre ellos: agrega un ancla o un atributo que los distinga.
Solo lo encuentra el CSS de respaldo (ámbar)La ruta ya no coincide y solo responde la red de seguridad: mira qué cambió.
Ninguna coincidencia (rojo)No hay elemento con ese selector en la pantalla abierta.

Resaltar en la página apaga o enciende el resaltado; Recargar árbol vuelve a leer la pantalla si cambió.

Cuando hay varios elementos iguales —el botón Editar de cada fila de una tabla— el ancla dice cuál: «el Editar de la fila que dice ventas@empresa.com».

  1. Busca o elige en el árbol la celda (o la fila) con el texto y pulsa Usar como ancla, o usa Capturar ancla para señalarla en la pantalla.
  2. El ancla se identifica por su texto, en la fila o posición que esté: sus índices quedan desmarcados.
  3. El explorador guarda dónde estaba el ancla respecto al objetivo. Al ejecutar, el robot elige el objetivo que está en esa misma posición respecto al ancla.

El texto del ancla puede venir de una variable: {{ correo }}. Así el mismo selector sirve para cualquier fila.

Pestaña de un ancla: «Posición guardada al capturar», los nodos de la celda con su texto y, en el árbol, las marcas OBJETIVO y ANCLA.

Si cambias o reparas el objetivo, las anclas vuelven a medir su posición con los dos a la vista.

La caja Buscar por texto, id o nombre… encuentra en la pantalla abierta los elementos cuyo texto, etiqueta accesible, id o nombre contienen lo que escribes, con el contenedor donde está cada uno. Un clic en un resultado abre el árbol hasta él y lo resalta. Esc vuelve al árbol.

Búsqueda «soporte» en el árbol: un resultado, la celda soporte@empresa.com en la fila 3.

Si el selector usa {{ expresiones }}, aparece la tarjeta Probar con valores: escribe el valor que tendrá cada expresión al ejecutar y el explorador cuenta las coincidencias con ese valor. Vacío equivale a cualquier texto. Los valores de prueba no se guardan en el selector.

Tarjeta Probar con valores con {{ accion }} = Editar y el estado «1 coincidencia · probado con tus valores».

Durante la depuración, al detenerte en un punto de interrupción puedes abrir el explorador desde el lápiz del selector: las expresiones se llenan con los valores reales de la ejecución. Si el explorador ya estaba abierto, se llenan al pausar. En pausa el selector se prueba pero no se guarda: detén la ejecución para guardar.

Explorador abierto en pausa: Probar con valores llenó {{ condicion }} con CREDITO 60 DIAS, el valor de la variable en la ejecución.

Cuando la aplicación cambia y el selector deja de encontrar el elemento, pulsa Ver qué cambió. El explorador recorre la ruta nivel por nivel hasta el primero que ya no coincide, prueba cada atributo de ese nivel y te muestra:

  • el nivel y el atributo que cambiaron, marcados en rojo;
  • el valor que tiene ahora el elemento, tomado del que lleva al objetivo o, si hay varios, del más parecido a lo que buscabas.

Ver qué cambió: «Deja de coincidir en el nivel 4 (td): cambió class», con el valor actual «acciones» y los botones para repararlo.

Para repararlo:

  • Usar el valor actual reemplaza el valor del atributo por el de ahora.
  • Desmarcar deja de comparar ese atributo.
  • Capturar de nuevo o Usar el nodo del árbol toman el elemento como está ahora conservando tus ajustes: las casillas desmarcadas, las comparaciones que siguen valiendo y los valores {{ }}.

Con un selector de escritorio, el árbol es el de la ventana de la aplicación (UI Automation de Windows) y los nodos llevan controlType, name, automationId, clase… El explorador se abre al lado de la ventana de la aplicación si cabe en la pantalla y la trae al frente, para que el resaltado caiga sobre el elemento. Al elegir un nodo del árbol o ir a una coincidencia, la aplicación vuelve a pasar delante sin quitarle el foco al explorador.

Explorador junto a una aplicación de Windows: el elemento CREDITO 60 DIAS de la lista resaltado con el número 1 y marcado OBJETIVO en el árbol.

Las coincidencias de escritorio se cuentan con el mismo criterio que usa el robot al ejecutar.

Guardar selector (o Ctrl+S) deja el selector en la actividad; Cancelar o Esc cierran sin cambiar nada. JSON y CSS muestra el selector completo (solo lectura, con Copiar JSON) y el CSS de respaldo, que sí se puede editar.

  • Selectores: qué es un selector y cómo hacerlo robusto.
  • UI Discover: capturar elementos apuntando con el mouse.
  • Depuración: puntos de interrupción y valores de las variables.