~/my/home/

WebdriverIO es un framework de automatización progresivo, la cual, nos permite automatizar aplicaciones web y móviles a través de una suite bastante robusta y estable. Trabaja bajo NodeJS, por ende, necesitas conocimientos en Javascript para sacar todo su potencial (aunque con un conocimiento básico ya puedes utilizarlo de manera profesional 😎).

Con WebdriverIO puedes automatizar:

1. Aplicaciones web escritas en React, Vue, Angular, Svelte o cualquier framework Javascript.
2. Aplicaciones móviles nativas o híbridas, ya que, utiliza un emulador/simulador de un dispositivo real.
3. Aplicaciones nativas de escritorio escritas en Electron.js
4. Permite el unit y component testing de componentes web en el navegador.

WebdriverIO proporciona un soporte completo a los protocolos WebDriver y Webdriver-BiDi avalados por la W3C y también al protocolo propietario de Google Chrome DevTools y Puppeteer. Cabe señalar que está licenciado bajo una licencia MIT y está bajo el amparo de la OpenJS Foundation, por lo cual, se valora el sentido comunitario y de colaboración y no está orientado a interéses monetarios.

Requisitos previos

Para poder usar WebdriverIO, necesitas lo siguiente:

1. Conocimientos básicos en Javascript, aunque se aconseja por lo menos saber acerca de Promesas, Arrow functions, sincronismos y asincronismos.
2. Conocimientos de Document Object Model o estructura de un documento HTML.
3. Una versión de NodeJS 16 o superior. Ya escribí un artículo al respecto Usando NVM para instalar distintas versiones de NodeJS fácilmente.
4. Un editor de código (de preferencia VIM o Emacs 😎).

Instalación

Para instalar WebdriverIO puedes hacerlo con NPM, YARN o PNPM con el siguiente comando:

1. NPM: Si tienes ya creado un archivo npm init wdio . o creando un archivo nuevo npm init wdio ./ruta/archivo
2. YARN: Si tienes ya creado un archivo yarn init wdio . o creando un archivo nuevo yarn init wdio ./ruta/archivo
3. PNPM: Si tienes ya creado un archivo pnpm init wdio . o creando un archivo nuevo pnpm init wdio ./ruta/archivo.

Con este comando se decarga el paquete WebdriverIO CLI, la cual, lanzará el asistente de configuración:

A continuación te comparto las respuestas a responder si quieres generar una estructura sencilla para pruebas E2E en un navegador web.

• What type of testing would you like to do? Selecciona: E2E Testing - of Web or Mobile Applications
• Where is your automation backend located? Selecciona: On my local machine
• Which environment you would like to automate? Selecciona: Web
• With which browser should we start? Sellecciona a gusto: Chrome/Firefox/Edge/Safari
• Which framework do you want to use? Selecciona: Mocha
• Do you want to use a compiler? Selecciona: No
• Do you want WebdriverIO to autogenerate some test files? Selecciona: Y
• Where should these files be located? Selecciona: ENTER para ruta por defecto.
• Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? Selecciona: Y
• Where are your page objects located? Selecciona: ENTER para ruta de los pageobjects
• Which reporter do you want to use? Sellecciona: allure o a elección
• Do you want to add a plugin to your test setup? Selecciona: ENTER para no usar ninguno de momento
• Do you want to add a service to your test setup? Selecciona: ENTER para no usar ninguno de momento
• What is the base url? Selecciona: ENTER para base_url localhost
• Do you want me to run npm install Selecciona: Y

Con esto ya tienes un proyecto base, con un test de pruebas en el archivo test/test.e2e.js:

import { expect } from '@wdio/globals'
import AllureReporter from '@wdio/allure-reporter'
import LoginPage from '../pages/login.page.js'
import SecurePage from '../pages/secure.page.js'

describe('My Login application', () => {
    it('should login with valid credentials', async () => {
        AllureReporter.addSeverity('critical')
        await LoginPage.open()

        await LoginPage.login('tomsmith', 'SuperSecretPassword!')
        await expect(SecurePage.flashAlert).toBeExisting()
        await expect(SecurePage.flashAlert).toHaveTextContaining(
            'You logged into a secure area!')
    })
})

Puedes abrir el archivo creado con cualquier editor de código para observar su estructura. En cambio, si deseas correr las pruebas generadas automaticamente lo puedes hacer con:

npx wdio run ./wdio.conf.js

Espero te sirva esta breve introducción a WebdriverIO, en próximos artículos iremos trabajando con esto para generar un proyecto de pruebas más profesional.

Hasta la próxima!!!

Compartir en: