Selenium

Este ejemplo de pruebas con WebDriver utilizará Selenium y una suite de pruebas popular para Node.js. Se asume que ya tienes Node.js instalado, junto con npm o yarn, aunque el proyecto de ejemplo finalizado usa pnpm.

Crear un Directorio para las Pruebas

Vamos a crear un espacio para escribir estas pruebas en nuestro proyecto. Usaremos un directorio anidado para este proyecto de ejemplo ya que más adelante también revisaremos otros frameworks, pero típicamente solo necesitarás usar uno. Crea el directorio que usaremos con mkdir -p e2e-tests. El resto de esta guía asumirá que estás dentro del directorio e2e-tests.

Inicializar un Proyecto de Selenium

Usaremos un package.json preexistente para inicializar esta suite de pruebas porque ya hemos elegido dependencias específicas a utilizar y queremos mostrar una solución simple y funcional. Al final de esta sección hay una guía replegada sobre cómo configurarlo desde cero.

package.json:

{
  "name": "selenium",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "mocha"
  },
  "dependencies": {
    "chai": "^5.2.1",
    "mocha": "^11.7.1",
    "selenium-webdriver": "^4.34.0"
  }
}

Tenemos un script que ejecuta Mocha como framework de pruebas expuesto como el comando test. También tenemos varias dependencias que utilizaremos para ejecutar las pruebas. Mocha como framework de pruebas, Chai como librería de aserciones, y selenium-webdriver que es el paquete de Selenium para Node.js.

Haz clic aquí si deseas ver cómo configurar un proyecto desde cero

Si deseas instalar las dependencias desde cero, simplemente ejecuta el siguiente comando.

npm
yarn

npm install mocha chai selenium-webdriver

yarn add mocha chai selenium-webdriver

Sugiero agregar también un elemento "test": "mocha" en la clave "scripts" de package.json para que la ejecución de Mocha pueda llamarse simplemente con

npm
yarn

npm test

yarn test

Pruebas

A diferencia de la Suite de Pruebas de WebdriverIO, Selenium no viene listo para usar con una Suite de Pruebas y deja en manos del desarrollador construirlas. Elegimos Mocha, que es bastante neutral y no está relacionado con WebDrivers, por lo que nuestro script necesitará hacer un poco de trabajo para configurar todo en el orden correcto. Mocha espera un archivo de prueba en test/test.js por defecto, así que creemos ese archivo ahora.

test/test.js:

import os from 'os';
import path from 'path';
import { expect } from 'chai';
import { spawn, spawnSync } from 'child_process';
import { Builder, By, Capabilities } from 'selenium-webdriver';
import { fileURLToPath } from 'url';

const __dirname = fileURLToPath(new URL('.', import.meta.url));

// create the path to the expected application binary
const application = path.resolve(
  __dirname,
  '..',
  '..',
  'src-tauri',
  'target',
  'debug',
  'tauri-app'
);

// keep track of the webdriver instance we create
let driver;

// keep track of the tauri-driver process we start
let tauriDriver;
let exit = false;

before(async function () {
  // set timeout to 2 minutes to allow the program to build if it needs to
  this.timeout(120000);

  // ensure the app has been built
  spawnSync('yarn', ['tauri', 'build', '--debug', '--no-bundle'], {
    cwd: path.resolve(__dirname, '../..'),
    stdio: 'inherit',
    shell: true,
  });

  // start tauri-driver
  tauriDriver = spawn(
    path.resolve(os.homedir(), '.cargo', 'bin', 'tauri-driver'),
    [],
    { stdio: [null, process.stdout, process.stderr] }
  );
  tauriDriver.on('error', (error) => {
    console.error('tauri-driver error:', error);
    process.exit(1);
  });
  tauriDriver.on('exit', (code) => {
    if (!exit) {
      console.error('tauri-driver exited with code:', code);
      process.exit(1);
    }
  });

  const capabilities = new Capabilities();
  capabilities.set('tauri:options', { application });
  capabilities.setBrowserName('wry');

  // start the webdriver client
  driver = await new Builder()
    .withCapabilities(capabilities)
    .usingServer('http://127.0.0.1:4444/')
    .build();
});

after(async function () {
  // stop the webdriver session
  await closeTauriDriver();
});

describe('Hello Tauri', () => {
  it('should be cordial', async () => {
    const text = await driver.findElement(By.css('body > h1')).getText();
    expect(text).to.match(/^[hH]ello/);
  });

  it('should be excited', async () => {
    const text = await driver.findElement(By.css('body > h1')).getText();
    expect(text).to.match(/!$/);
  });

  it('should be easy on the eyes', async () => {
    // selenium returns color css values as rgb(r, g, b)
    const text = await driver
      .findElement(By.css('body'))
      .getCssValue('background-color');

    const rgb = text.match(/^rgb\((?<r>\d+), (?<g>\d+), (?<b>\d+)\)$/).groups;
    expect(rgb).to.have.all.keys('r', 'g', 'b');

    const luma = 0.2126 * rgb.r + 0.7152 * rgb.g + 0.0722 * rgb.b;
    expect(luma).to.be.lessThan(100);
  });
});

async function closeTauriDriver() {
  exit = true;
  // kill the tauri-driver process
  tauriDriver.kill();
  // stop the webdriver session
  await driver.quit();
}

function onShutdown(fn) {
  const cleanup = () => {
    try {
      fn();
    } finally {
      process.exit();
    }
  };

  process.on('exit', cleanup);
  process.on('SIGINT', cleanup);
  process.on('SIGTERM', cleanup);
  process.on('SIGHUP', cleanup);
  process.on('SIGBREAK', cleanup);
}

onShutdown(() => {
  closeTauriDriver();
});

Si estás familiarizado con frameworks de prueba en JS, describe, it y expect te resultarán familiares. También tenemos callbacks semi-complejos before() y after() para configurar y desmontar mocha. Las líneas que no son las pruebas en sí tienen comentarios que explican el código de configuración y desmontaje. Si estabas familiarizado con el archivo Spec del ejemplo de WebdriverIO, notarás mucho más código que no corresponde a pruebas, ya que tenemos que configurar algunos elementos más relacionados con WebDriver.

Ejecutar la Suite de Pruebas

¡Ahora que ya tenemos todo configurado con nuestras dependencias y nuestro script de prueba, vamos a ejecutarlo!

npm
yarn

npm test

yarn test

Deberíamos ver la siguiente salida:

➜  selenium git:(main) ✗ yarn test
yarn run v1.22.11
$ Mocha


  Hello Tauri
    ✔ should be cordial (120ms)
    ✔ should be excited
    ✔ should be easy on the eyes


  3 passing (588ms)

Done in 0.93s.

¡Podemos ver que nuestra suite de pruebas Hello Tauri que creamos con describe tuvo sus 3 elementos creados con it superando sus pruebas!

¡Con Selenium y algo de integración con una suite de pruebas, acabamos de habilitar pruebas e2e sin modificar nuestra aplicación Tauri en absoluto!

Apoya en Open Collective Patrocina en GitHub