Pruebas automatizadas del navegador con la API WebDriver

 

 

 

  • SmashingConf Nueva York 2024
  • Taller de diseño conductual, con Susan y Guthrie Weinschenk

  • Índice
    1. API WebDriverJS
      1. Conducir el navegador a través de las API de WebDriver
    2. Pruebas de creación
      1. Configure su entorno de prueba de automatización básica
    3. Escritura de código de automatización
    4. Ejecución de pruebas en BrowserStack
    5. Probar valores con afirmaciones
    6. Automatización de pases de prueba con un ejecutor de pruebas
      1. Agregar código de ejecución de pruebas
      2. Ejecutando el código con NodeJS y MochaJS
      3. Otras lecturas

    Hacer clic manualmente en diferentes navegadores mientras ejecutan su código de desarrollo, ya sea local o remotamente, es una forma rápida de validar ese código. Sin embargo, no es una solución para probar toda la amplitud del código base de su sitio en la variedad de navegadores y tipos de dispositivos disponibles para sus clientes. Ahí es donde las pruebas automatizadas realmente cobran importancia. En este artículo, Jason McConnell proporciona una descripción general de los conceptos, tecnologías y técnicas de codificación relacionados con la ejecución automática de scripts de prueba en navegadores utilizando WebDriverJS en Windows 10 y Microsoft Edge.

     

    Este artículo proporciona una descripción general de los conceptos, tecnologías y técnicas de codificación relacionados con la ejecución automática de scripts de prueba en navegadores utilizando WebDriverJS en Windows 10 y Microsoft Edge.

    Hacer clic manualmente en diferentes navegadores mientras ejecutan su código de desarrollo, ya sea local o remotamente, es una forma rápida de validar ese código. Le permite inspeccionar visualmente que las cosas estén como esperaba desde el punto de vista del diseño y la funcionalidad. Sin embargo, no es una solución para probar toda la amplitud del código base de su sitio en la variedad de navegadores y tipos de dispositivos disponibles para sus clientes. Ahí es donde las pruebas automatizadas realmente cobran importancia.

     

    Encabezadas por el proyecto Selenium , las pruebas web automatizadas son un conjunto de herramientas para crear, administrar y ejecutar pruebas en navegadores en todas las plataformas.

    API WebDriverJS

    La API de WebDriver es un estándar que abstrae los enlaces específicos del dispositivo/navegador del desarrollador para que los scripts de prueba escritos en el idioma de su elección puedan escribirse una vez y ejecutarse en muchos navegadores diferentes a través de WebDriver. Algunos navegadores tienen capacidades WebDriver integradas, otros requieren que descargue un binario para su combinación de navegador/sistema operativo.

    Conducir el navegador a través de las API de WebDriver

    La especificación WebDriver del W3C documenta las API disponibles para que los desarrolladores controlen el navegador mediante programación. Este diagrama muestra una página de muestra con algunas de las API y colecciones generales de WebDriver que se pueden usar para obtener y configurar propiedades del navegador.

    Pruebas de creación

    Puede elegir entre idiomas según los enlaces de idiomas admitidos por WebDriver. Los lenguajes principales soportados por el proyecto principal Selenium/WebDriverJS incluyen:

    • C#
    • Java
    • JavaScript (a través de nodo)
    • Pitón
    • Rubí

    Las pruebas pueden variar desde verificar el diseño de la página, los valores devueltos por las llamadas del lado del servidor, el comportamiento esperado de la interacción del usuario hasta la verificación del flujo de trabajo, como garantizar que el flujo de trabajo del carrito de compras funcione como se espera.

    Con fines ilustrativos, supongamos que estamos probando la aplicación TODOMVC , una aplicación de demostración que se implementa en varios marcos JavaScript diferentes de control de vista y modelo. Esta sencilla aplicación proporciona una interfaz de usuario para ingresar elementos pendientes, editar, eliminar y marcar elementos como completos.

    Luego podremos demostrar la ejecución de las pruebas para el ejemplo de React con los ejemplos de Backbone.js y Vue.js simplemente cambiando la URL.

    • Resumen del archivo de ejemplo JS completo

    Para esta demostración, escribiremos pruebas en JavaScript ejecutándose en el nodo para:

    1. Agregue tres tareas pendientes y verifique que lo que escribimos se haya creado en una tarea pendiente.
    2. Modifique ese elemento haciendo doble clic, enviando comandos de teclado de retroceso y agregando más texto.
    3. Elimine ese elemento utilizando las API del mouse.
    4. Marque un elemento de la lista como completado.

    Configure su entorno de prueba de automatización básica

    Comencemos configurando nuestra máquina con Windows 10 para ejecutar WebDriver usando JavaScript. Las llamadas a WebDriver desde el nodo serán casi siempre asíncronas. Para que el código sea más fácil de leer, hemos utilizado async/await de ES2016 sobre promesas o devoluciones de llamada.

     

    Necesitará instalar node.js más reciente que v7.6 o usar Babel para realizar una compilación cruzada y tener soporte para la función async/await. Además, utilizamos Visual Studio Code para editar y depurar el nodo.

    WebDriverJS para Microsoft Edge

    Cada navegador tendrá un archivo binario que necesitará localmente para interactuar con el navegador. Su código llama a ese binario a través de las API de Selenium WebDriver. Puede encontrar las descargas y la documentación más recientes para Microsoft Edge WebDriver aquí .

    Tenga en cuenta que la versión de Edge con la que desea ejecutar las pruebas debe probarse con la versión correspondiente de MicrosoftWebDriver.exe. Usaremos la versión estable de Edge (16.16299) con el correspondiente MicrosoftWebDriver.exe versión 5.16299.

    Coloque el MicrosoftWebDriver.exeen su ruta o en la misma carpeta que ejecutará su script de prueba. Al ejecutar este ejecutable se iniciará una ventana de consola que le mostrará la URL y el número de puerto que WebDriverJS esperará para manejar las solicitudes que se enviarán.

    WebDriverJS para otros navegadores

    Puede decirle fácilmente a WebDriverJS que ejecute pruebas en un navegador diferente estableciendo una variable de configuración y teniendo instalado el controlador binario apropiado para el navegador respectivo. Usted puede encontrarlos aquí:

    • Apple Safari: incluido con Safari 10+
    • Google Chrome: controlador Chrome
    • Microsoft Internet Explorer: IEDriver del proyecto Selenium
    • Mozilla Firefox: Geckodriver
    • Ópera: OperaChromiumDriver

    Selenio WebDriverJS para JavaScript

    Para interactuar con el controlador binario que acaba de descargar a través de JavaScript, deberá instalar la biblioteca de automatización Selenium WebDriver para JavaScript. Esto se puede instalar fácilmente como un paquete de nodo usando:

    npm install selenium-webdriver

    Escritura de código de automatización

    Una vez que el binario del controlador específico de su navegador esté en la ruta de su sistema o en la carpeta local, y haya instalado Selenium WebDriver a través de npm, puede comenzar a automatizar el navegador mediante código.

    Dividamos nuestro código de ejemplo en los distintos pasos que necesitará.

    1. Cree una variable local para cargar e interactuar con la biblioteca.
      var webdriver = require('selenium-webdriver');
    2. De forma predeterminada, WebDriverJS asumirá que se está ejecutando localmente y que el archivo del controlador existe. Más adelante mostraremos cómo puede pasar información de configuración a la biblioteca al crear una instancia del navegador por primera vez. Se crea una instancia de WebDriverJS con una variable de configuración llamada "capacidades" para definir qué controlador de navegador desea utilizar.
      var capabilities = { 'browserName': 'MicrosoftEdge' }; var entrytoEdit = "Browser Stack";
    3. Luego crea una variable y llama a build() con la variable de configuración de capacidades para que WebDriverJS cree una instancia del navegador:
      var browser = new webdriver.Builder().withCapabilities(capabilities).build();
    4. Ahora que podemos interactuar con el navegador, le decimos que navegue a una URL usando el método "get". Este método es asíncrono, por lo que usamos `await` para esperar hasta que finalice.
      // Have the browser navigate to the TODO MVC example for React await browser.get('https://todomvc.com/examples/react/#');
    5. Para algunos navegadores y sistemas, es mejor darle algo de tiempo al binario WebDriverJS para navegar hasta la URL y cargar la página. Para nuestro ejemplo, esperamos 1 segundo (1000 ms) usando la función de administración de WebDriverJS:
      //Send a wait to the browser to account for script execution running await browser.manage().timeouts().implicitlyWait(1000);
    6. Ahora tiene un enlace programático en un navegador en ejecución a través de la variable del navegador. Tenga en cuenta el diagrama de colección anterior en este documento que muestra las colecciones de API de WebDriver. Usamos la colección Elements para obtener elementos específicos de la página. En este caso, buscamos el cuadro de entrada dentro del ejemplo TODOMVC para que podamos ingresar algunos elementos TODO. Le pedimos a WebDriverJS que busque elementos que coincidan con la regla de clase .new-todo, ya que sabemos que esa es la clase asignada a este campo. Declaramos una constante ya que no podemos cambiar los datos que regresan, simplemente consultarlos. Tenga en cuenta que esto encontrará el primer elemento en el DOM que coincida con el patrón CSS, lo cual está bien en nuestro caso, ya que sabemos que solo hay uno.
      const todoEntry = await browser.findElement(webdriver.By.css('.new-todo'));
    7. A continuación, enviamos pulsaciones de teclas al campo que acabamos de utilizar con la función sendKeys. Colocamos la tecla Intro escapada en su propia línea de espera para evitar condiciones de carrera. Usamos el for (x of y)patrón de iteración cuando tratamos con promesas. toDoTestItemses simplemente una matriz de 3 cadenas, una variable de cadena (que probaremos más adelante) y 2 literales. Debajo de las sábanas, WebDriverJS enviará caracteres individuales de la cadena uno a la vez, pero simplemente pasamos la variable de cadena completa a sendKeys:
      var toDoTestItems = [entrytoEdit, "Test Value1", "Test Value2"]; //Send keystrokes to the field we just found with the test strings and then send the Enter special character for (const item of toDoTestItems) { await todoEntry.sendKeys(item); await todoEntry.sendKeys("n"); }

    En este punto, ejecutemos el script con node y veamos si vemos un navegador que navega a la página e ingresa esos tres elementos TODO de prueba. Envuelva el código después de la primera declaración de variable en una asyncfunción como esta: Recetas para Cookeo

     

    async function run() {

    Cierre la función }al final del código, luego llame a esa función asíncrona con:

     

    run();

    Guarde su archivo JS. Vaya a la ventana de comando del nodo, navegue hasta la carpeta donde guardó el archivo JS y ejecutenode yourfile.js

    Debería ver aparecer una ventana del navegador y el texto enviado al archivo TODOMVC ingresarse como nuevas entradas TODO en la aplicación. Felicitaciones, ya está funcionando con WebDriverJS.

    Intente cambiar la URL que WebDriverJS carga en este ejemplo por uno de los otros ejemplos de TODOMVC y observe que el mismo código de prueba se puede ejecutar en diferentes marcos.

    await browser.get('https://todomvc.com/examples/vue/');

    Ejecución de pruebas en BrowserStack

    Hemos mostrado cómo se ejecuta esta prueba localmente en su máquina. La misma prueba se puede ejecutar con la misma facilidad utilizando servicios de prueba en línea como BrowserStack. Regístrese para obtener acceso gratuito al servicio BrowserStack para obtener acceso a los navegadores Microsoft Edge y realizar pruebas gratuitas en vivo y automatizadas. Una vez que haya iniciado sesión, vaya a la sección "Automatizar" y busque la configuración de su cuenta de prueba automatizada. Deberá pasarlos a la función WebDriverJS para iniciar sesión mediante código, nombrar su sesión de prueba y pasar su token de acceso.

    Luego simplemente agregue esos valores a la capabilities variable y vuelva a llamar al generador WebDriver.

    var capabilities = { 'browserName': MicrosoftEdge, 'browserstack.user': 'yourusername’, 'browserstack.key': 'yqniJ4quDL6s2Ak2EZpe', 'browserstack.debug': 'true', 'build': 'Name your test' }

    Puede obtener más información sobre las capabilitiesvariables y los valores que BrowserStack puede aceptar aquí .

    Luego llame a la builderfunción y pase la URL del servidor BrowserStack:

    var browser = new webdriver.Builder(). usingServer('https://hub-cloud.browserstack.com/wd/hub'). withCapabilities(capabilities). build();

    Finalmente, debe indicarle a WebDriverJS que cierre el navegador o, de lo contrario, seguirá ejecutándose y eventualmente expirará. Realice una llamada a la función de salida al final de su archivo de prueba.

    browser.quit();

    Ahora, cuando ejecute su archivo de prueba JS usando NodeJS, enviará las instrucciones de prueba a un navegador alojado en el servicio en la nube de BrowserStack. Puede ir a la sección "Automatizar" de BrowserStack y observar el inicio y la detención de los trabajos de prueba. Una vez completado, puede explorar los comandos de WebDriver que se enviaron, ver imágenes de la pantalla del navegador a intervalos durante la ejecución de prueba e incluso ver un video de la sesión del navegador.

    Una captura de pantalla de la función de registro visual de una prueba ejecutada en el servicio Automate de BrowserStack

    Probar valores con afirmaciones

    Al probar su sitio, está comparando los resultados reales con los resultados esperados. La mejor manera de hacerlo es mediante afirmaciones en las que se generará una excepción si no se cumple una condición de afirmación. En nuestro ejemplo, utilizamos una biblioteca de aserciones para expresar esas aserciones y ayudar a que el código sea más legible. Elegimos ChaiJS porque es lo suficientemente flexible como para usarse con cualquier biblioteca de JavaScript y es bastante popular al momento de escribir este artículo.

     

    Descarga e instala Chai como un paquete de nodo usando npm. En el código, debe solicitar chai:

    var expect = require('chai').expect;

    Decidimos utilizar la interfaz Expect para utilizar lenguaje natural para encadenar nuestras afirmaciones.

    Puede probar la longitud, la existencia, contener un valor y mucho más.

    expect(testElements).to.not.have.lengthOf(0); //make sure that we're comparing the right number of items in each array/collection expect(testElements.length).to.equal(toDoTestItems.length);

    Si una de estas afirmaciones no es cierta, se lanza una excepción de afirmación. Nuestro código de muestra dejará de ejecutarse cuando se produzca la excepción, ya que no estamos manejando la excepción. En la práctica, utilizará un ejecutor de pruebas con un nodo que manejará las excepciones e informará los errores y pases de las pruebas.

    Automatización de pases de prueba con un ejecutor de pruebas

    Para manejar mejor las excepciones de aserción, un ejecutor de pruebas se empareja con un nodo para envolver bloques de código que contienen aserciones de prueba en funciones de estilo try/catch que asignan las excepciones a casos de prueba fallidos.

    En este ejemplo, elegimos el marco de prueba MochaJS porque combina bien con Chai y es algo que usamos para probar nuestro código de producción.

    Para integrar el ejecutor, se agrega código al script de prueba y se cambia la forma en que ejecuta el código con node.

    Agregar código de ejecución de pruebas

    Envuelve el código de prueba en funciones asíncronas con la función de nivel superior usando la palabra clave "describir" y la función de subprueba usando la palabra clave "eso". Las funciones están marcadas con una descripción de lo que buscan las pruebas. Esta descripción es lo que se asignará a los resultados de la prueba.

    MochaJS se instala como un paquete de nodo a través de npm.

    Aquí está la función de nivel superior en nuestro ejemplo usando describe:

    describe('Run four tests against TODOMVC sample', async () = {

    Posteriormente, agrupa tus pruebas lógicas en grupos con la itpalabra clave:

    it('TEST 3: Delete a TODO item from the list by clicking the X button', async () = {

    Las afirmaciones incluidas dentro de estas funciones que causan una excepción se asignarán nuevamente a estas descripciones.

    Ejecutando el código con NodeJS y MochaJS

    Finalmente, debe ejecutar su código de prueba con el nodo que llama al binario MochaJS para manejar las excepciones correctamente. A Mocha se le pueden pasar argumentos para configurar los valores de tiempo de espera, la carpeta a buscar que contiene sus archivos de prueba y más. Esta es la configuración que usamos para Visual Studio Code para adjuntar el depurador y usar las funciones de inspección y paso a paso de Code:

    { "type": "node", "request": "launch", "name": "Mocha Tests", "program": "${workspaceRoot}/node_modules/mocha/bin/_mocha", "args": [ "-u", "tdd", "--timeout", "999999", "--colors", "${workspaceRoot}/test/**/*.js" ], "internalConsoleOptions": "openOnSessionStart" }

    Las pruebas automatizadas son una excelente manera de garantizar que su sitio funcione en una variedad de navegadores de manera consistente sin la molestia o el costo de realizar pruebas manualmente. Las herramientas que hemos utilizado aquí son solo algunas de las muchas opciones disponibles, pero ilustran los pasos comunes involucrados en la configuración y ejecución de pruebas automatizadas para sus proyectos.

    Otras lecturas

    • SolidStart: una clase diferente de metamarco
    • La forma más segura de ocultar sus claves API cuando usa React
    • Una guía para el desarrollo basado en pruebas utilizando Node.js
    • Principales herramientas de front-end de 2023

    (rb, ra, yk, il, mrn)Explora más en

    • javascript
    • API
    • Pruebas
    • Técnicas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Pruebas automatizadas del navegador con la API WebDriver

    Pruebas automatizadas del navegador con la API WebDriver

    SmashingConf Nueva York 2024 Taller de diseño conductual, con Susan y Guthrie Weinschenk Índice API WebD

    programar

    es

    https://aprendeprogramando.es/static/images/programar-pruebas-automatizadas-del-navegador-con-la-api-webdriver-922-0.jpg

    2024-05-20

     

    Pruebas automatizadas del navegador con la API WebDriver
    Pruebas automatizadas del navegador con la API WebDriver

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20