WebdriverIO, el rival definitivo de Cypress

Las herramientas de automatización web como WebdriverIO han recorrido un largo camino desde los días de Selenium puro, con mejores APIs para programadores y mejoras en la experiencia del desarrollador.

Todas ellas, incluyendo WebdriverIO, siguen desempeñando la misma función: permitir a un programador simular las interacciones reales del usuario con el navegador. En algunos casos incluso encontramos a nuestros mismos viejos amigos por debajo. Sin embargo, no podemos negar que, como desarrolladores, nuestra experiencia escribiendo pruebas funcionales se ha vuelto mucho mejor.

En Redsauce hemos trabajado con diferentes herramientas y queríamos compartir pros y contras de dos de ellas: Cypress y WebdriverIO.

WebdriverIO y Cypress están escritos en Javascript

Ambas herramientas, WebdriverIO y Cypress, están escritas en Javascript. Como empresa, hemos ido alternando con diferentes herramientas de automatización (empezando por Watir) y la elección de emplear Javascript no se hizo a la ligera.

A menudo trabajamos con otras empresas para poner en marcha sus pruebas funcionales y debido a esto siempre tratamos de utilizar tecnologías que les sean lo más familiar posible para hacer el traspaso lo más fácil posible. Esto nos llevó a darnos cuenta de que la automatización web no es realmente compleja desde el punto de vista de la programación, sino que su dificultad proviene del propio navegador y de cómo testear correctamente una funcionalidad. Así que nos dimos cuenta de que realmente no nos importaba cambiar el lenguaje, ya que la mayoría de la sintaxis del lenguaje se aprende rápidamente.

Dimos un paso atrás para centrarnos en qué lenguaje tenía más sentido para nosotros, y llegamos a la conclusión de que, dado que nuestro objetivo es que los equipos de nuestros clientes aprendan a hacer sus propias pruebas funcionales, debíamos elegir un lenguaje que ya estuvieran utilizando. Y como estamos hablando de probar aplicaciones web, el único lenguaje del que no se pueden escapar es de Javascript.

Así que nos pusimos a buscar el mejor framework de automatización web basado en Javascript y encontramos a WebdriverIO.

WebdriverIO

Después de un breve tiempo usando Protractor, encontramos WebdriverIO y desde entonces lo usamos por defecto. Hay algunas razones por las que nos gusta especialmente WebdriverIO entre todos sus competidores:

• Funciona fácilmente como una biblioteca independiente

• Se mezcla fácilmente con Mocha/Chai/Cucumber/etc.

• Flexibilidad total de la estructura del proyecto

• Tanto el código síncrono como el asíncrono es indoloro

• Buena documentación

• Funciona con un backend de Selenium, lo que hace que su uso con Appium sea extremadamente sencillo

Como ejemplo, aquí tenemos un sencillo test que carga una determinada página, rellena un campo de texto, pulsa el botón de buscar y comprueba que la página mostrada contiene elementos con esa búsqueda:

describe('Search Engine', () => {
    it('should be able to search for a word', () => {
        browser.url('https://duckduckgo.com/')
        $('#search_form_input_homepage').setValue("Potatoes");
        $('#search_button_homepage').click();
        expect($('#search_form_input')).toHaveValue("Potatoes");
        expect($$('.result')).toBeElementsArrayOfSize({ gte: 5 })
    })
})

Esta flexibilidad y adaptabilidad de WebdriverIO han hecho que se desmarque de otras alternativas, ya que nos permite construir código que se ajuste perfectamente a nuestras necesidades.

Recientemente, sin embargo, hemos comenzado a utilizar también una tecnología distinta, que es increíble por un conjunto de razones completamente diferentes...

Cypress vs WebdriverIO

Básicamente, Cypress tiene una gran ventaja sobre todas las otras alternativas: la experiencia del desarrollador es magnífica.

Cypress viene con su propia interfaz para ejecutar pruebas y generar informes, además de tener la opción de usar la línea de comandos). Esta interfaz viene con algunas características muy útiles:

• Registros completos de la consola

• Viaje en el tiempo: puedes retroceder a cualquier instante de la prueba y examinar el estado del DOM en ese momento, tanto visualmente como a través de Javascript

• Captura de vídeo: puedes de un vídeo de todas tus pruebas

• Selector sandbox: puedes comprobar qué encontrará un determinado selector dentro del navegador, en cualquier momento de la ejecución.

También tiene sus desventajas:

• Funciona principalmente a través del comando cypress, y es difícil de usar como biblioteca

• Es muy difícil hacer pruebas condicionales (donde la prueba es diferente dependiendo de algún estado desconocido al inicio) lo que es frecuente cuando no se controla el código que se está probando

• Tiene una estructura algo rígida, lo que está bien cuando se hace un proyecto de pruebas desde cero, pero no es ideal cuando se trata de ampliar un desarrollo existente

• No es posible usarlo en móviles (aunque funciona en modo responsive)

• La compatibilidad con Firefox es dudosa

Aquí está el mismo ejemplo anterior codificado usando Cypress:

describe('Search Engine', () => {
    it('should be able to search for a word', () => {
        cy.visit('https://duckduckgo.com/')
        cy.get('#search_form_input_homepage').type("Potatoes");
        cy.get('#search_button_homepage').click();
        cy.get('#search_form_input').should("have.value", "Potatoes");
        cy.get('.result').should("have.length.of.at.least", 5);
    })
})

Conclusión: Cypress o Webdriverio

No hay un claro ganador aquí, en Redsauce Engineering usamos ambas herramientas, con algunas consideraciones. Analizamos a fondo un proyecto, sus requisitos y dependiendo de si necesitamos más flexibilidad o una velocidad de desarrollo más rápida y fluida nos decantamos por una herramienta u otra para cada cliente.

Si tu también quieres ser un caso de éxito como los que encontrarás en nuestra web, no te pierdas nuestro ebook gratuito: