Comparativa entre herramientas de Automatización. Playwright, Selenium y Cypress

La automatización de pruebas se ha convertido en un componente esencial en el desarrollo de software moderno, permitiendo a los equipos de QA y desarrolladores asegurar la calidad de sus aplicaciones de manera eficiente y efectiva. En este contexto, varias herramientas han surgido para facilitar este proceso, siendo Playwright, Selenium y Cypress algunas de las opciones más destacadas. Esta comparativa se centrará en analizar y contrastar estas tres herramientas líderes en el ámbito de la automatización de pruebas, destacando sus fortalezas, debilidades y características distintivas.

• Selenium: Ampliamente utilizado, es compatible con varios lenguajes y navegadores, ideal para pruebas de end-to-end.
• Cypress: Enfoque moderno, diseñado para pruebas en el navegador, destaca por su simplicidad, rapidez y eficacia en pruebas de integración y unitarias.
• Playwright: Es versátil al permitir la automatización de tareas avanzadas, como emulación de dispositivos móviles. Destaca por su capacidad para trabajar en múltiples navegadores.

Datos generales

En la siguiente tabla conocerás la información general de cada framework:

Selenium es la librería más antigua y aún más utilizada para la automatización. Playwright, por otro lado, es el framework más nuevo, pero su popularidad está aumentando rápidamente en la comunidad. Microsoft creó Playwright para abordar desafíos comunes en Selenium, así como para mejorar la integración con herramientas DevOps y servicios en la nube.

Ejecución

La característica principal de Playwright es el rendimiento y la compatibilidad con marcos y lenguajes de programación modernos. Selenium tiene el mejor soporte para navegadores y lenguajes de programación antiguos. Cypress solo tiene soporte para el ecosistema JavaScript.

Popularidad

Repasemos la popularidad y el número de descargas en npm en la siguiente imagen:

En los últimos meses, Playwright ha superado el Selenium en número de descargas, estrellas y colaboradores en GitHub. Esto significa un gran aprecio por parte de la comunidad para este framework.

Selenium es ampliamente considerado como la mejor opción para Java y Python debido a su amplia implementación en proyectos importantes durante muchos años.

Demos

En las siguientes secciones, reproduciremos los primeros pasos para crear nuestra primera prueba de automatización para estas 3 tecnologías.

Para estas demostraciones utilizaremos la siguiente página web: https://www.saucedemo.com/

La idea es realizar el inicio de sesión y validar que fue exitoso en la siguiente pantalla:

Cypress

Repasemos los requisitos previos y los comandos para crear nuestra primera prueba en Cypress.

Pre requisitos

• Nodo.js 18 o 20

Pasos:

• vamos a una carpeta vacía donde desea crear el proyecto.
• Ejecutar npm install cypress –save-dev
• Luego use este comando para ejecutar el proyecto: npx cypress open
• Ahora en la carpeta cypress/e2e crea una nueva prueba con el nombre spec.cy.js
• Agregue el siguiente código para crear una nueva prueba para el inicio de sesión.

describe('Sauce demo', () => {
  it('login pass', () => {
    cy.visit('https://www.saucedemo.com/#/')
    cy.get('#user-name').type('standard_user')
    cy.get('#password').type('secret_sauce')
    cy.get('#login-button').click()
    cy.get('.app_logo').should('have.text', 'Swag Labs')
  })
})

En cypress, escribimos cy para usar la API y llamar a las funciones para detectar elementos, establecer valores y navegar en la página. El código es bastante simple y fácil de entender. Usamos #element-id para obtener elementos por Id y .class para obtener el elemento por clase CSS. No necesitamos instalar bibliotecas o componentes adicionales para crear nuestras primeras pruebas.

Selenium

Repasemos los requisitos previos y los comandos para crear nuestra primera prueba en Selenium con JavaScript.

Pre requisitos

• Nodo.js 18 o 20

Pasos:

• Vaya a una carpeta vacía donde desea crear el proyecto.
• Ejecute los siguientes comandos:
• npm install selenium-webdriver
• npm install chromedriver
• npm install mocha

NOTA: selenium-webdriver se usa para interactuar con el navegador, chromedriver se usa para ejecutar la prueba en Chrome para que Selenium pueda controlarla y mocha nos ayuda a crear la prueba como una prueba unitaria simple y capturar el resultado.

• Cree un archivo test.js donde se ubicará la prueba.
• Agregue el siguiente código para realizar la prueba en la página de inicio de sesión con Selenium:

const Chrome = require('selenium-webdriver/chrome');
const {By, Builder} = require('selenium-webdriver');
const assert = require("assert");
const options = new Chrome.Options();
const {suite} = require('selenium-webdriver/testing');


suite(function (env) {
    describe('Should be able to Test Command line arguments', function () {
      it('headless', async function () {
    let driver;

    driver = await new Builder()
            .setChromeOptions()
            .forBrowser('chrome').build();
    await driver.get('https://www.saucedemo.com/');
    await driver.manage().setTimeouts({implicit: 500});
    await driver.findElement(By.id('user-name')).sendKeys('standard_user');
    await driver.findElement(By.id('password')).sendKeys('secret_sauce');
    await driver.findElement(By.id('login-button')).click();
    var textLogo = await driver.findElement(By.className('app_logo')).getText();
    assert.equal('Swag Labs', textLogo);
    await driver.quit();
});
});
});

Selenium tiene una mejor experiencia en otros lenguajes de programación, como Java, Python y C#. Dado que Selenium es una biblioteca, necesitamos instalar otras librerías para complementarla. E instalar los controladores para conectarnos con el navegador donde queremos ejecutar la prueba.

Playwright

Revisemos los requisitos previos y los comandos necesarios para crear nuestra primera prueba en Playwright con JavaScript.

Pre requisitos

• Nodo.js 18 o 20

Pasos:

• Vaya a una carpeta vacía donde desea crear el proyecto.
• Ejecutar npm init playwright@latest para crear el proyecto base.
• Luego use este comando para ejecutar las pruebas: npx playwright test
• Crea un nuevo archivo mytest.spec.js en la carpeta test.
• Agregue el siguiente código para probar la página de inicio de sesión usando Playwright:

test('Login pass', async ({ page }) => {
  await page.goto('https://www.saucedemo.com/');
  await page.locator("#user-name").fill("standard_user");
  await page.locator("#password").fill("secret_sauce");
  await page.locator('#login-button').click();

  // Expect a title "to contain" a substring.
  await expect(await page.locator('.app_logo')).toHaveText('Swag Labs')
});

En Playwrigth utilizamos la palabra page para interactuar con el navegador. También podemos usar el método .toHaveText para validar el resultado y crear aserciones. Playwright no sólo es increíblemente fácil de usar para los desarrolladores, sino que también cuenta con una funcionalidad perfecta que no requiere dependencias ni bibliotecas adicionales para funcionar en una gran variedad de escenarios.

Experiencia del desarrollador

Los desarrolladores de JavaScript encuentran que Cypress es fácil de entender porque las pruebas son similares a las pruebas unitarias en JavaScript con librerías como jest . Cypress puede resultar limitante y restrictivo para los profesionales de control de calidad de automatización que prefieren tener control total sobre su flujo de trabajo y no depender de la interfaz de usuario para la inspección y ejecución de pruebas. Cypress sólo funciona con JavaScript, por lo que es difícil compararlo con Playwright, que es popular entre otros desarrolladores como Python y C#.
Selenium tiene una gran flexibilidad y puedo combinarlo con mis bibliotecas favoritas. Una vez establecido el proyecto, podemos mejorar la estructura de prueba, optimizar la arquitectura principal y optimizar la reutilización del código. Muchos desarrolladores prefieren este enfoque.

UltimateQA publicó una encuesta sobre la experiencia del usuario en estos marcos. Encuesta de control de calidad definitiva

Los resultados no parecen acertados porque Cypress y Playwright son increíblemente fáciles de usar; sin embargo, Selenium sigue siendo la librería de automatización más utilizada y muchos desarrolladores sólo están familiarizados con ella.

Posibles escenarios frente a la mejor opción

Analicemos algunos escenarios comunes y qué marco se adapta mejor.

1. Una aplicación moderna con un pequeño equipo que utiliza un nuevo framework JavaScript (React.js, Angular, etc.). El equipo no tiene experiencia con pruebas de automatización. Para este escenario, la mejor opción podría ser Cypress o Playwright. Los desarrolladores pueden trabajar fácilmente con la interfaz de usuario proporcionada para estos marcos y trabajar con JavaScript.
2. Una aplicación con un backend moderno (Node.js, Python, C#, etc.) y un frontend moderno (React.js, Angular, etc.) con un gran equipo.
   Para este escenario, podemos usar las 3 opciones. Pero trabajar con algo moderno como Dramaturgo podría ser la mejor opción. Podemos trabajar con diferentes idiomas según el conocimiento del equipo y Playwright ha ido añadiendo extensibilidad con Selenium.
3. Una aplicación de escritorio que utiliza Electron (JavaScript) con backend node.js. En este caso , todos estos marcos son malas opciones. Por el momento, tanto Playwright como Cypress ofrecen complementos o extensiones experimentales para electron, pero es posible que no sean adecuados para fines de producción. Podemos utilizar Spectron , WebDriverIO o Selenium junto con otras bibliotecas para realizar nuestras pruebas.

Conclusiones

En el desarrollo de software moderno, las principales herramientas de automatización de pruebas son Selenium, Cypress y Playwright. Cada una de estas herramientas ofrece fortalezas y debilidades únicas y satisface diferentes necesidades dentro del panorama de las pruebas de software.

Selenium, como el marco más antiguo y ampliamente utilizado, se destaca por admitir múltiples idiomas y navegadores, lo que lo hace ideal para pruebas de un extremo a otro. Cypress, con su enfoque moderno, se destaca por las pruebas en el navegador, la simplicidad y la eficiencia en la integración y las pruebas unitarias. Playwright es una herramienta de automatización versátil que destaca por su compatibilidad con múltiples navegadores, la ejecución de pruebas en paralelo y la automatización de tareas avanzadas como la emulación de dispositivos móviles.

Las métricas de popularidad, incluidas descargas, estrellas y colaboradores en GitHub, representan el reciente aumento de Playwright, superando a Selenium en apreciación de la comunidad. Sin embargo, Selenium sigue siendo la mejor opción para muchos equipos.

En última instancia, la elección de la herramienta de automatización de pruebas depende de los requisitos del proyecto, la experiencia del equipo y la aplicación que se prueba.

En mi opinión Playwright seguirá creciendo y es una herramienta moderna y rápida. Veo una gran proyección para Dramaturgo en el futuro.

Si desea probar las demostraciones y acceder al repositorio, haga clic en el siguiente enlace:
https://github.com/Mteheran/AutomationDemos

Referencia: https://dev.to/mteheran/comparison-of-automation-frameworks-selenium-playwright-and-cypress-3h8i

¡No olvides nunca continuar tu aprendizaje con mis cursos en  mteheran.dev/cursos!