Cómo usar Firebug para crear Scripts de Selenium – Tutorial de Selenium #4
En el tutorial anterior, aprendimos cómo crear scripts de prueba automatizados usando Selenium IDE y su función de grabación. También revisamos las características populosas del IDE de Selenio. Nuestro objetivo era albergar al lector con las características y comandos más vitales de Selenium IDE.
Solo un recordatorio: este es nuestro 4º tutorial de la serie de entrenamiento de Selenio gratis.
Ahora que está acostumbrado y es capaz de crear scripts automatizados utilizando el modo de grabación de Selenium IDE, avancemos con otra herramienta que juega un papel muy importante para ayudarnos a crear scripts de prueba efectivos conocidos como «Firebug». Firebug nos ayuda a inspeccionar las propiedades de los elementos web y las páginas web.
Por lo tanto, este tutorial se compone de la instalación de Firebug y su usabilidad.
Tome nota de que el contenido de este tutorial no solo es aplicable en el contexto de Selenium IDE; más bien se puede aplicar a todas y cada una de las herramientas de Selenium suite. Por lo tanto, preferiblemente usaría el término Selenio en lugar del IDE de Selenio.
En este tutorial, aprendamos a usar el complemento Firebug para crear scripts de Selenium. En el proceso, también aprenderemos a instalar Firebug.
Introducción a Firebug
Firebug es un complemento de Mozilla Firefox. Esta herramienta nos ayuda a identificar o a ser más particulares inspeccionando elementos HTML, CSS y JavaScript en una página web. Nos ayuda a identificar los elementos de forma única en una página web. Los elementos se pueden encontrar de forma única en función de sus tipos de localizador, de los que hablaremos más adelante en este tutorial.
¿Cómo instalar Firebug?
Para facilitar la comprensión, bifurcaríamos el proceso de instalación en los siguientes pasos.
Paso -1: Inicie el navegador Mozilla Firefox y vaya a esta página de descarga de complementos Firebug. La URL nos lleva a la sección de complementos de Firefox.
Paso -2: Haga clic en el botón» Agregar a Firefox » presente en la página web. Consulte la siguiente figura para lo mismo.
Paso 3: Tan pronto como hagamos clic en el botón» Agregar a Firefox», aparecerá un cuadro de alerta de seguridad, haga clic en el botón» Permitir » ahora.
Paso 4: Ahora Firefox descarga el complemento en el fondo y se muestra una barra de progreso.
Paso 5: Tan pronto como se complete el proceso, aparecerá la ventana de instalación del software. Ahora haga clic en el botón» Instalar ahora».
Paso 6: Tan pronto como se complete la instalación, aparecerá una ventana emergente que indica que firebug se ha instalado correctamente. Ahora elige cerrar esta ventana emergente.
Nota: A diferencia de Selenium IDE, no estamos obligados a reiniciar Firefox para reflejar la instalación de firebug, sino que viene fácilmente.
Paso 7: Ahora para iniciar firebug, podemos optar por cualquiera de las siguientes formas:
- Pulse F12
- Haga clic en el icono Firebug presente en la esquina superior derecha extrema de la ventana de Firefox.
- haga Clic en Firefox barra de menú -> Desarrollador Web -> firebug -> Abrir Firebug.
Paso-8: Ahora el firebug se puede ver en la parte inferior de la ventana de Firefox.
Ahora que hemos descargado e instalado firebug, sigamos adelante con los tipos de localizadores que crearíamos usando firebug.
Crear script de Selenium usando Firebug
A diferencia del IDE de Selenium, En Firebug, creamos scripts de prueba automatizados manualmente agregando varios pasos de prueba para formar un script de prueba lógico y consistente.
Sigamos un enfoque progresivo y entendamos el proceso paso a paso.
Escenario:
- Abrir «https://accounts.google.com».
- Afirmar el título de la aplicación
- Introduzca un nombre de usuario y una contraseña no válidos y envíe los detalles para iniciar sesión.
Paso 1: Inicie Firefox y abra Selenium IDE desde la barra de menús.
Paso 2: Ingrese la dirección de la aplicación en prueba («https://accounts.google.com») dentro del cuadro de texto URL base.
Paso 3: De forma predeterminada, el botón Grabar está en estado ON. Recuerde sintonizarlo en estado APAGADO para desactivar el modo de grabación. Tenga en cuenta que si el modo de grabación está en el estado ON, puede resultar en la grabación de nuestras interacciones con el navegador web.
Paso 4 – Abra la aplicación bajo prueba (https://accounts.google.com) en el Firefox.
Paso 5-Inicie Firebug en el navegador web.
Paso 6: Seleccione el paso de prueba vacío dentro del Editor.
Paso 7: Escriba «abrir» en el cuadro de texto comando presente en el Panel Editor. El comando «abrir» abre la URL especificada en el navegador web.
Recomendación: Al escribir comandos en el cuadro de texto comando, el usuario puede aprovechar la función de selección automática. Por lo tanto, tan pronto como el usuario escriba una secuencia de caracteres, las sugerencias coincidentes se rellenarán automáticamente.
El usuario también puede hacer clic en el menú desplegable disponible dentro del cuadro de texto comando para ver todos los comandos proporcionados por Selenium IDE.
Paso 8-Ahora, muévete hacia la sección Firebug dentro del navegador web, expande la sección «head» del código HTML. Observe la etiqueta HTML < title>. Por lo tanto, para afirmar el título de la página web, necesitaríamos el valor de la etiqueta <title>.
Copie el título de la página web que es «Iniciar sesión – Cuentas de Google» en nuestro caso.
Paso 9: Seleccione el segundo paso de prueba vacío dentro del Editor.
Paso 10: Escriba «assertTitle» en el cuadro de texto comando presente en el Panel Editor. El comando» assertTitle » devuelve el título de la página actual y lo compara con el título especificado.
Paso 11: Pegue el título copiado en el paso 8 en el campo de destino del segundo.
Paso 12 – Ahora seleccione el tercer paso de prueba vacío en el Panel Editor
Paso 13 – Escriba el comando «type» dentro del cuadro de texto comando. El comando» type » introduce un valor en el elemento web especificado en la interfaz gráfica de usuario.
Paso 14-Ahora cambie al navegador web, lleve el cursor del ratón al cuadro de texto» Correo electrónico » dentro del formulario de inicio de sesión y presione un clic derecho.
Elija la opción «Inspeccionar elemento con Firebug». Observe que el Firebug resalta automáticamente el código HTML correspondiente para el elemento web, es decir, «Cuadro de texto de correo electrónico».
Paso 15: El código HTML de la ilustración anterior manifiesta los atributos de propiedad distintos que pertenecen al cuadro de texto» Correo electrónico». Observe que hay cuatro propiedades (ID, tipo, marcador de posición y nombre) que identifican de forma única el elemento web de la página web. Por lo tanto, depende del usuario elegir una o más propiedades para identificar el elemento web.
Por lo tanto, en este caso, elegimos ID como localizador. Copie el valor ID y péguelo en el campo de destino del tercer paso de prueba con el prefijo «id=» para indicar que Selenium IDE busca un elemento web que tenga ID como «Correo electrónico».
(Haga clic para ver la imagen ampliada)
Tome nota de que el IDE de Selenio distingue entre mayúsculas y minúsculas, por lo que escriba el valor del atributo con cuidado y precisión igual que se muestra en el código HTML.
Paso 16: Haga clic en el botón Buscar para verificar si el localizador seleccionado encuentra y localiza el elemento de interfaz de usuario designado en la página web.
Paso 17-Ahora, el siguiente paso es ingresar los datos de prueba en el cuadro de texto Valor del tercer paso de prueba dentro del Panel Editor. Escriba «InvalidEmailID» en el cuadro de texto Valor. El usuario puede modificar los datos de prueba cuando lo desee.
Paso 18 – Ahora seleccione el cuarto paso de prueba vacío en el Panel Editor
Paso 19 – Escriba el comando «type» dentro del cuadro de texto comando.
Paso 20-Ahora cambie al navegador web, lleve el cursor del ratón al cuadro de texto» Contraseña » dentro del formulario de inicio de sesión y presione un clic derecho.
Elija la opción «Inspeccionar elemento con Firebug».
Paso 21: El código HTML a continuación manifiesta los atributos de propiedad distintos que pertenecen al cuadro de texto «Contraseña». Observe que hay cuatro propiedades (ID, tipo, marcador de posición y nombre) que identifican de forma única el elemento web de la página web. Por lo tanto, depende del usuario elegir una o más propiedades para identificar el elemento web.
Por lo tanto, en este caso, elegimos ID como localizador. Copie el valor ID y péguelo en el campo de destino del tercer paso de prueba con el prefijo «id=».
(Haga clic para ver la imagen ampliada)
Paso 22: Haga clic en el botón Buscar para verificar si la pestaña localizador encuentra y localiza el elemento de interfaz de usuario designado en la página web.
Paso 23-Ahora, el siguiente paso es ingresar los datos de prueba en el cuadro de texto Valor del cuarto paso de prueba dentro del Panel Editor. Introduzca «InvalidPassword» en el cuadro de texto Valor. El usuario puede modificar los datos de prueba cuando lo desee.
Paso 24 – Ahora seleccione el quinto paso de prueba vacío en el Panel Editor
Paso 25 – Escriba el comando «haga clic» dentro del cuadro de texto comando. El comando «clic» hace clic en un elemento web especificado dentro de la página web.
Paso 26-Ahora cambie al navegador web, lleve el cursor del ratón al botón» Iniciar sesión » dentro del formulario de inicio de sesión y presione un clic derecho.
Elija la opción «Inspeccionar elemento con Firebug».
Paso 27: El código HTML a continuación manifiesta los atributos de propiedad distintos que pertenecen al botón «Iniciar sesión».
Elija ID como localizador. Copie el valor ID y péguelo en el campo de destino del tercer paso de prueba con el prefijo «id=».
(Haga clic para ver la imagen ampliada)
Paso 28: Haga clic en el botón Buscar para verificar si el localizador seleccionado encuentra y localiza el elemento de interfaz de usuario designado en la página web.
El script de prueba se ha completado ahora. Consulte la siguiente ilustración para ver el script de prueba terminado.
Paso 29 – Reproduce el script de prueba creado y Guárdalo de la misma manera que lo hicimos en el tutorial anterior.
Conclusión
En este tutorial, presentamos otra herramienta de creación de scripts, o más bien una herramienta que ayuda a la creación de scripts.
Firebug sorprendentemente tiene un gran potencial para localizar elementos web en una página web. De este modo, el usuario puede aprovechar las capacidades de la herramienta para crear scripts de prueba de automatización eficaces y eficientes manualmente.
Siguiente tutorial # 5: Avanzando en el siguiente tutorial, echaríamos un vistazo a los diversos tipos de localizadores en Selenium y su técnica de accesibilidad para construir scripts de prueba. Mientras tanto, el lector puede comenzar a construir sus scripts de prueba de automatización utilizando Firebug.