Elementos y selectores en el navegador
Elementos y selectores en el navegador
Cuando tu robot tiene que trabajar con una página web —hacer clic en un botón, rellenar un campo, leer un texto— necesita saber exactamente dónde actuar en la página. Para eso están los elementos y los selectores.
¿Qué es un elemento?
Piensa en una página web como un formulario que rellenar. Cada parte visible de ella es un elemento: el botón «Enviar», el campo del documento, el menú de opciones, la imagen de cabecera, un enlace de texto. Todo lo que ves y con lo que interactúas en pantalla es un elemento.
Algunos habituales:
- Un botón — «Entrar», «Confirmar», «Descargar»
- Un campo de texto — correo, contraseña, un número de documento
- Un enlace — «¿Olvidaste tu contraseña?», «Saber más»
- Una fila de tabla — un registro de una lista de resultados
- Una imagen, un icono, un menú desplegable
En resumen: si puedes hacer clic, escribir o leer algo en una página, eso es un elemento.
¿Qué es un selector?
Una página web puede tener decenas de botones, campos y enlaces. ¿Cómo sabe el robot en cuál hacer clic?
Un selector: un fragmento de código que identifica de forma única un elemento concreto de la página, como si fuera su dirección exacta.
Imagina una oficina con cientos de archivos. Para pedirle a alguien un documento concreto le dices: «Carpeta azul, tercer estante, segundo documento por la izquierda.» Un selector funciona igual: una descripción precisa que lleva al robot al elemento correcto, sin margen de error.
Un selector tiene aspecto técnico (button#btnConfirmar, por ejemplo), pero no tienes que escribirlo a mano. La extensión de Roberty para Chrome lo captura por ti en un par de clics.
Capturar un selector
La forma más simple —y la recomendada— de obtener el selector de un elemento es la extensión de Roberty para Chrome:
- Abre en Chrome la página con el elemento que quieras.
- Haz clic derecho sobre el elemento.
- En el menú, elige Roberty Automation → Seleccionar elemento.
- Haz clic en el elemento. El selector se copia al portapapeles automáticamente.
Consulta La extensión de Roberty para Chrome: instalarla lleva menos de un minuto.
Usar el selector en una acción de navegador
Con el selector copiado, pégalo en el campo Selector del elemento de la acción que quieras en el Designer.
Así con la acción Hacer clic en el navegador:
- Añade Hacer clic en el navegador al flujo.
- En Selecciona la acción, elige Por navegador.
- En ID de la página o navegador, elige la acción que abrió el navegador.
- En Selector del elemento, pega el selector (
Ctrl + V).
El robot localizará y hará clic exactamente en el elemento que capturaste.
Acciones de navegador que usan selectores
La mayoría de las acciones de automatización web tienen un campo de selector para identificar el elemento objetivo. Las principales:
| Acción | Para qué sirve |
|---|---|
| Hacer clic en el navegador | Hacer clic en botones, enlaces y otros elementos |
| Rellenar un campo | Escribir texto en un campo de formulario |
| Obtener el texto de un elemento | Leer el contenido de texto de un elemento |
| Obtener el atributo de un elemento | Leer una propiedad concreta de un elemento |
| Verificar si un elemento existe | Comprobar si un elemento está visible en la página |
| Marcar/desmarcar una casilla | Activar y desactivar casillas de selección |
| Subir un archivo | Enviar archivos por campos de subida |
Cómo hacer los selectores más fiables
Mantenlos simples. Cuanto más corto y directo sea un selector, más estable es. Uno basado en el ID del elemento (#btnLogin) rara vez cambia; uno muy largo con muchos niveles se rompe en cuanto se actualiza la página.
Vuelve a capturarlo cuando deje de funcionar. Si el robot empieza a fallar en una acción de navegador, probablemente la página se actualizó y el selector cambió. Abre la extensión y captura el elemento de nuevo.
Pruébalo antes de terminar. Ejecuta el robot en modo de prueba para confirmar que la acción encuentra el elemento correcto antes de pasarlo a producción.
Siguientes pasos
- La extensión de Roberty para Chrome — instalar y usar la extensión para capturar selectores
- Catálogo de acciones — Navegador — todas las acciones disponibles para la automatización web