Automatización de Páginas Web con BotCity Inspector¶
Una práctica común en el desarrollo de automatizaciones web es el uso de selectores específicos para interactuar con los elementos de la página, como una alternativa a la visión por computadora.
Esta estrategia se vuelve especialmente interesante cuando queremos construir un código más resiliente y evitar problemas de resolución. Podemos simplemente interactuar con la estructura de la página a través de las propiedades de los elementos.
Este tutorial le guiará a través del proceso de creación de una automatización sencilla que interactúa con los elementos de una página web.
Creando un nuevo proyecto¶
El primer paso es crear un proyecto para una automatización web. Puede seguir los mismos pasos descritos en las secciones anteriores.
Consulte cómo crear un Proyecto Bot Web utilizando la plantilla del proyecto.
Inspeccionando páginas web¶
Los atributos y propiedades de un elemento se pueden visualizar al inspeccionar la página que se está automatizando.
Generalmente, este procedimiento se realiza de forma manual, donde las propiedades de cada elemento se recogen individualmente y se utilizan en el código como selectores.
Para abordar este escenario, BotCity proporciona una herramienta enfocada en la inspección de páginas web y en la generación de código Python integrado con el framework de desarrollo, simplificando y haciendo más intuitivo el uso de estos recursos al construir automatizaciones.
BotCity Web Inspector¶
Para utilizar BotCity Web Inspector, solo necesita instalar el complemento para BotCity Studio en Visual Studio Code.
Después de instalar la extensión y cargar un proyecto Python, tendrá acceso a la herramienta para comenzar a inspeccionar páginas web.
A continuación, verá más detalles sobre el uso de esta función y las mejores prácticas al inspeccionar páginas y generar código.
Interactuando con el navegador¶
Para este ejemplo sencillo, utilizaremos la página Practice Test Automation.
Podemos pasar la URL de la página al Web Inspector para iniciar el navegador y comenzar a mapear los elementos con los que deseamos interactuar.
Mapeando los elementos iniciales¶
Para este proceso, supongamos que el objetivo es introducir los datos del usuario en el formulario y validar al final si el inicio de sesión fue exitoso.
Podemos, por ejemplo, mapear los campos de texto Username y Password, así como el botón Submit.
Consejo
Para mapear cualquier elemento utilizando el Web Inspector, simplemente pase el ratón por el área del elemento y haga clic con el botón izquierdo, o use el atajo de teclado: Alt+C.
Funciones de Web Inspector¶
Elementos Mapeados:
Cada elemento mapeado dentro del contexto de una página se agrega a la lista de elementos mapeados.
Desde esta lista, puede hacer clic en un elemento para ver sus propiedades o eliminar un elemento con el que ya no desea interactuar.
Tabla de Propiedades:
El BotCity Web Inspector también muestra las principales propiedades de un elemento mapeado.
Los valores de esta tabla se pueden usar como selectores en el código al localizar estos elementos.
Consejo
Simplemente haga clic en el elemento mapeado para mostrar la tabla de propiedades correspondiente.
Generando código a partir de los elementos mapeados¶
Con los elementos iniciales mapeados, ya es posible generar el código Python que servirá como base para la automatización.
En esta sección, podemos definir qué navegador se utilizará para acceder y también los fragmentos de código apropiados para el contexto actual.
-
Generate code with browser setup: Genera el fragmento de código responsable de configurar el navegador a utilizar.
-
Generate code to start the browser: Genera el fragmento de código responsable de iniciar el navegador y acceder a la página utilizando la URL proporcionada. Esta opción puede desmarcarse si ya tiene este fragmento en su automatización y solo está mapeando nuevos elementos.
El código para localizar elementos se generará automáticamente en función de la lista de elementos mapeados.
Después de configurar el código a generar, simplemente haga clic en el botón Generate Code para que el BotCity Web Inspector genere el código directamente en el archivo .py.
Finalizando el proceso¶
Como último paso de la automatización, mapearemos el mensaje de éxito que se muestra en la página después del inicio de sesión. Podemos seguir usando la misma estrategia que antes.
Consejo
Puede usar el botón Reset en el Web Inspector siempre que desee limpiar los elementos mapeados o reiniciar la inspección.
Recuerde generar el código antes de reiniciar el Web Inspector para evitar perder las referencias de los elementos ya mapeados.
Dado que el código base ya ha sido generado, podemos dejar las demás opciones desmarcadas para que solo se genere el código del nuevo elemento mapeado.
Ajustes finales y ejecución del código¶
Con el código base generado por BotCity Web Inspector, podemos refactorizar y hacer los ajustes necesarios para el proceso.
En este caso, simplemente incluiremos el contenido que se ingresará en los campos de texto y validaremos el mensaje final.
Importante
Recuerde también ajustar la ruta del WebDriver para el navegador que está utilizando.
En el fragmento donde se configura el navegador, puede pasar la ruta binaria a la propiedad driver_path o usar otra biblioteca que maneje esto automáticamente.
Más detalles aquí.
Insertar contenido de texto en la entrada:
Simplemente podemos ajustar el método send_keys de los elementos referentes a entradas de texto, pasando una cadena con el contenido como parámetro.
Identifique la sección de su código donde se están manipulando estos elementos y realice la siguiente modificación:
...
element = bot.find_element(selector='username', by=By.ID)
## Insert text content in the element
element.send_keys("student")
element = bot.find_element(selector='password', by=By.ID)
## Insert text content in the element
element.send_keys("Password123")
Incluyendo lógica para mostrar el mensaje de éxito:
Para validar si se mostró el mensaje de éxito después de hacer clic en el botón Submit, podemos verificar la existencia del elemento en la página.
Identifique la sección de su código donde se está manipulando el elemento referente al mensaje y realice la siguiente modificación:
...
element = bot.find_element(selector='//h1[@class="post-title"]', by=By.XPATH)
if element:
# Getting text property
print(element.text)
else:
print("Login Failed!")
Explorando el código generado por el Inspector¶
Al ejecutar el código final después de los ajustes, el bot realizará automáticamente las siguientes acciones:
- Abrir el navegador y acceder a la página Practice Test Automation.
- Introducir los datos del usuario y la contraseña y hacer clic en el botón de inicio de sesión.
- Verificar el mensaje de éxito después de completar el inicio de sesión.
Como se mencionó anteriormente, el código generado por el Web Inspector se basa en el framework de desarrollo web de BotCity.
De forma predeterminada, el BotCity Web Inspector siempre intentará generar un código lo más completo posible. Sin embargo, pueden ser necesarios ajustes y tratamientos ocasionales para garantizar que el proceso funcione como se espera.
Buscando elementos¶
El Web Inspector utiliza algunos selectores de claves en el código que se genera para buscar un determinado elemento.
Si desea reemplazar un parámetro generado por el Inspector, o desea realizar un procesamiento más complejo, simplemente use la tabla de propiedades como referencia para obtener la información de cada elemento.
Con estos valores en la mano, simplemente pase el selector como parámetro al método find y use la clase By para definir el tipo de selector.
Realizar acciones con elementos¶
Para ciertos tipos de elementos, como botones y campos de texto, el Web Inspector también generará, junto con el código, algunas sugerencias de acciones que se pueden realizar con ese elemento.
Consejo
Si la acción sugerida que se generó no es exactamente lo que necesita, puede verificar otras acciones disponibles a través del objeto WebElement y ajustar según sea necesario.
Buenas prácticas al usar BotCity Web Inspector¶
A continuación, se presentan algunos consejos y puntos importantes que pueden facilitar el uso del Web Inspector durante el desarrollo de sus automatizaciones.
Asegúrese de que este sea el mejor enfoque para su proceso
El funcionamiento de BotCity Web Inspector está directamente relacionado con el comportamiento de la página web que se está automatizando.
Por lo tanto, es importante identificar si esta estrategia realmente es la mejor para su caso de uso.
Si la página que estás automatizando dificulta la inspección de los elementos o presenta cierta resistencia al acceso automatizado, intenta considerar otras opciones, como el uso de computer vision o incluso un enfoque utilizando un Desktop Bot.
Mapea y prueba tu código en partes
Para garantizar que las referencias de elementos no se pierdan al cambiar el contexto, intente mapear pequeños conjuntos de elementos y generar el código correspondiente antes de cerrar el navegador o pasar a un paso posterior del proceso.
Es importante que también valides en el código si el acceso a la página se está realizando correctamente (recuerda utilizar el navegador y webdriver adecuados) y si los elementos se están encontrando correctamente.
Al hacer esto, se asegura de que al final del proceso, todas las acciones se estén llevando a cabo como se esperaba.
Validar las interacciones que aceptan los elementos mapeados
En algunos casos, la interacción con un determinado elemento se puede realizar de varias formas.
Dependiendo de la página, la acción de un botón se puede realizar mediante un click() o incluso mediante un script JS inyectado en la página.
Si tiene dificultades para utilizar una determinada acción, recuerde probar otras opciones disponibles y validar cuál funciona mejor en su contexto.
Si tienes dudas o quieres ver más sobre este tipo de contenido, siéntete libre de explorar los canales de la comunidad BotCity.