En un artículo anterior (léelo si no lo has leído, por favor) ya había comentado cuáles son las bases que te van a permitir iniciar en automatización de pruebas con código:

  • Bases de la programación
  • Conceptos de pruebas automatizadas
  • Un lenguaje de programación
  • Bases de automatización de pruebas
  • Un framework de automatización
  • Herramientas de control de versiones

En otro artículo hablaba de la ruta más rápida que puedes tomar usando Playwright (mi favorito recientemente) como framework de automatización y Javascript/Typescript como lenguaje de programación pero si quieres/necesitas implementar BDD, Playwright no es la mejor opción, yo prefiero WebdriverIO y esta es la ruta que te traigo hoy.
 

Why WebdriverIO + Cucumber + JavaScript/TypeScript?

Cuando se trata de automatización de pruebas E2E para aplicaciones web, WebdriverIO se destaca como una solución popular y moderna. Es muy flexible, ofrece una excelente experiencia para desarrolladores y se integra bien con otras herramientas y marcos, en particular el marco Cucumber BDD. En esta guía, exploraremos por qué la combinación de WebdriverIO, Cucumber y JavaScript/TypeScript es un enfoque tan poderoso y cómo puede comenzar rápidamente incluso si viene de un entorno de pruebas manuales.

 

WebdriverIO

  • Moderno y fácil de usar para desarrolladores: WebdriverIO ofrece una sintaxis clara y un conjunto de comandos potentes que facilitan la escritura de pruebas en comparación con las configuraciones tradicionales de Selenium.
  • Ecosistema enriquecido: sus complementos y el soporte de la comunidad lo ayudan a integrarse con varias herramientas (como reportes, procesos de CI/CD, etc.) y a mantener su proyecto mantenible.
  • Protocolo Webdriver y DevTools: En esencia, WebdriverIO puede aprovechar tanto el protocolo tradicional W3C WebDriver como el protocolo Chrome DevTools, lo que le brinda versatilidad en escenarios de prueba y depuración.

 

Cucumber (Behavior-Driven Development)

  • Feature files legibles: Cucumber permite escribir escenarios de prueba en una sintaxis Gherkin (Given-When-Then, que también pueden ser usados y programados en español y muchos otros idiomas), que es fácil de entender para los miembros del equipo de diferentes orígenes (desarrolladores, testers, equipo de producto).
  • Colaborativo: BDD fomenta la colaboración y la comprensión compartida, lo que es especialmente útil si está haciendo la transición desde pruebas puramente manuales.
  • Mapeo fácil de step definitions: Los step definitions de Cucumber se vinculan directamente con sus comandos WebdriverIO, lo que garantiza un flujo continuo desde la definición del escenario hasta la ejecución automatizada.

 

JavaScript/TypeScript

  • Familiaridad con JavaScript: JavaScript es el lenguaje de referencia para el desarrollo web moderno. Si eres nuevo programando, es una gran opción debido a su popularidad y su amplio ecosistema.
  • Ventajas de TypeScript: TypeScript agrega tipado estático sobre JavaScript. Esto reduce los errores de tiempo de ejecución, mejora las herramientas (como IntelliSense) y facilita la refactorización en bases de código grandes.
  • Comunidad y soporte generalizados: encontrarás muchos ejemplos, bibliotecas y recursos en línea tanto en JS como en TS, lo que hace que la resolución de problemas y el aprendizaje sean mucho más sencillos.

 

Primeros Pasos

El primer paso, sin dudas, es familiarizarnos con los conceptos básicos de automatización de pruebas.

Comencemos con las pruebas de Interfaz de Usuario. Nuestra base sería: lógica de pruebas, datos y configuraciones, patrones de diseño como Page Object Model y Screenplay, aserciones (verificaciones), (element) locators, estrategias de (element) locators, reintentos y tiempos de espera, parametrización de pruebas, Mocks/Stubs, logs, informes, ejecución y orquestación, manejo de excepciones y mantenibilidad.

Puedes apoyarte en la web Test Automation University para explorar conceptos como Setting a Foundation for Successful Test Automation y  Web Element Locator Strategies.

También, necesitas familiarizarte con BDD (qué es y qué no es). Lee estos posts (si no los has leído) para introducirte con los conceptos básicos de BDD, cómo se usan los ejemplos en la definición de features y tests, qué es Gherkin, qué son escenarios, feature files, steps y step definitions.

BDD en la práctica

BDD en la práctica: de Gherkin al Código

El siguiente paso es tomar un curso de WebdriverIO que cubra lo básico de Javascript/Typescript para Testing. No necesitamos saberlo todo de un lenguaje de programación para contribuir en proyectos de software dedicados al Testing. Aclaro que una suite de pruebas automatizada es un proyecto de software en sí mismo y, por lo tanto, debemos aplicar buenas prácticas de desarrollo, pero no necesitamos ser expertos en este lenguaje (en este caso, Javascript/Typescript).

En lo que sí necesitamos profundizar es en el conocimiento del framework de automatización de pruebas, en este caso WebdriverIO y Cucumber. Entender todo lo que podemos conseguir con el framework, conocer la configuración, instalación, cómo parametrizar los tests, cómo ejecutarlos y filtrarlos, cómo trabajar con diferentes fuentes de datos, timeouts, reintentos, pruebas visuales, informes y las diferentes integraciones disponibles, nos permitirá sacar el máximo partido al framework.

Como mencioné antes, cuando trabajamos con BDD es esencial dominar cómo se usan los ejemplos, qué es Gherkin, qué son scenarios, feature files, steps and step definitions, ya que estas son las bases de la implementación correcta de BDD.

Entonces, su objetivo principal es aprender los conceptos básicos del lenguaje de programación y mucho sobre el marco de automatización (WebdriverIO) y BDD.

Recomiendo el curso Automated Software Testing with WebdriverIO (en Inglés, de momento no tengo un equivalente en español), que tiene un capítulo llamado “HTML + Javascript for Testers” con todo lo (básico) que necesitas saber de Javascript/Typescript para automatizar pruebas y todo todo todo sobre WebdriverIO.
 

La práctica hace al maestro

No vas a lograr mucho si no vas practicando lo que vas aprendiendo. Te dejo acá una lista de webs que puedes usar para practicar automatización de pruebas:

  • PHP Travels una web donde podrás reservar vuelos, hoteles, tours y carros.
  • Orange HRM un sistema super completo de gestión de recursos humanos.
  • Parabank: sistema de banca en línea.
  • Juice Shop: una tienda online. Este proyecto puedes instalarlo localmente y aplicar los cambios que desees. Fue creado con el propósito de correr pruebas de seguridad, pero también es útil para pruebas de interfaz de usuario.
  • XYZ Bank: una aplicación bancaria, mucho más sencilla que Parabank. Probablemente, esta es la más sencilla de la lista para comenzar tu primer suite de automatización.
  • Automation Exercise un carrito de compras que incluso diseñó los tests (solo los tienes que automatizar).

Inicia con la que te parezca más sencilla (en mi opinión XYZ Bank), diseña los casos y automatízalos.
 

Apóyate en la Inteligencia Artificial

Con las prompts adecuados, la Inteligencia Artificial puede ayudarte a diseñar casos de prueba y automatizarlos, crear datos de prueba, crear page objects, etc.

Estas herramientas de IA no solo te ayudan a automatizar, sino que también te explican paso a paso (línea por línea de código) lo que está haciendo (básicamente su lógica para crear el código). No es perfecta, pero nuestra lógica de pruebas entra en juego y podemos pedirle mejoras, en función de lo que queremos lograr con una prueba en particular (decidimos si su enfoque es relevante o no, si un elemento (locator) puede/debe mejorarse, si las verificaciones (assertions) son las mejores que podríamos usar.

Aprovecha la ayuda de esta herramienta mientras aprendes a automatizar.