Saltar al contenido
Tauri
GuíasReferenciasBlogLanzamientos

WebdriverIO

Este ejemplo de pruebas con WebDriver utilizará WebdriverIO y su suite de pruebas. Se asume que ya tienes Node.js instalado, junto con npm o yarn, aunque el proyecto de ejemplo finalizado utiliza pnpm.

Crear un Directorio para las Pruebas

Sección titulada “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 necesitas usar uno. Crea el directorio que usaremos con mkdir e2e-tests. El resto de esta guía asume que estás dentro del directorio e2e-tests.

Inicializar un Proyecto de WebdriverIO

Sección titulada “Inicializar un Proyecto de WebdriverIO”

Usaremos un package.json preexistente para inicializar esta suite de pruebas porque ya hemos elegido opciones de configuración específicas de WebdriverIO 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": "webdriverio",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "test": "wdio run wdio.conf.js"
  },
  "dependencies": {
    "@wdio/cli": "^9.19.0"
  },
  "devDependencies": {
    "@wdio/local-runner": "^9.19.0,
    "@wdio/mocha-framework": "^9.19.0",
    "@wdio/spec-reporter": "^9.19.0"
  }
}

Tenemos un script que ejecuta una configuración de WebdriverIO como suite de pruebas expuesta como el comando test. También tenemos varias dependencias agregadas por el comando @wdio/cli cuando lo configuramos por primera vez. En resumen, estas dependencias son para la configuración más simple utilizando un runner de WebDriver local, Mocha como framework de pruebas y un Spec Reporter simple.

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

El CLI es interactivo y puedes elegir las herramientas con las que trabajar por ti mismo. Ten en cuenta que es probable que te desvíes del resto de la guía y debas configurar las diferencias por ti mismo.

Agreguemos el CLI de WebdriverIO a este proyecto npm.

npm install @wdio/cli

Para luego ejecutar el comando interactivo de configuración y establecer una suite de pruebas de WebdriverIO, puedes ejecutar:

npx wdio config

Configuración (Config)

Sección titulada “Config”

Tal vez hayas notado que el script test en nuestro package.json menciona un archivo wdio.conf.js. Ese es el archivo de configuración de WebdriverIO que controla la mayoría de los aspectos de nuestra suite de pruebas.

wdio.conf.js:

import os from 'os';
import path from 'path';
import { spawn, spawnSync } from 'child_process';
import { fileURLToPath } from 'url';


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


// keep track of the `tauri-driver` child process
let tauriDriver;
let exit = false;


export const config = {
  host: '127.0.0.1',
  port: 4444,
  specs: ['./develop/tests/specs/**/*.js'],
  maxInstances: 1,
  capabilities: [
    {
      maxInstances: 1,
      'tauri:options': {
        application: '../src-tauri/target/debug/tauri-app',
      },
    },
  ],
  reporters: ['spec'],
  framework: 'mocha',
  mochaOpts: {
    ui: 'bdd',
    timeout: 60000,
  },


  // ensure the rust project is built since we expect this binary to exist for the webdriver sessions
  onPrepare: () => {
    // Remove the extra `--` if you're not using npm!
    spawnSync(
      'npm',
      ['run', 'tauri', 'build', '--', '--debug', '--no-bundle'],
      {
        cwd: path.resolve(__dirname, '..'),
        stdio: 'inherit',
        shell: true,
      }
    );
  },


  // ensure we are running `tauri-driver` before the session starts so that we can proxy the webdriver requests
  beforeSession: () => {
    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);
      }
    });
  },


  // clean up the `tauri-driver` process we spawned at the start of the session
  // note that afterSession might not run if the session fails to start, so we also run the cleanup on shutdown
  afterSession: () => {
    closeTauriDriver();
  },
};


function closeTauriDriver() {
  exit = true;
  tauriDriver?.kill();
}


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);
}


// ensure tauri-driver is closed when our test process exits
onShutdown(() => {
  closeTauriDriver();
});

Si te interesan las propiedades en el objeto config, te sugerimos leer la documentación. Para elementos no específicos de WDIO, hay comentarios que explican por qué ejecutamos comandos en onPrepare, beforeSession, y afterSession. También tenemos nuestras especificaciones configuradas como "./test/specs/**/*.js", así que creemos una especificación ahora.

Especificación (Spec)

Sección titulada “Spec”

Una especificación contiene el código que prueba tu aplicación real. El runner de pruebas cargará estas especificaciones y las ejecutará automáticamente según lo considere conveniente. Creemos nuestra especificación ahora en el directorio que especificamos.

test/specs/example.e2e.js:

// calculates the luma from a hex color `#abcdef`
function luma(hex) {
  if (hex.startsWith('#')) {
    hex = hex.substring(1);
  }


  const rgb = parseInt(hex, 16);
  const r = (rgb >> 16) & 0xff;
  const g = (rgb >> 8) & 0xff;
  const b = (rgb >> 0) & 0xff;
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}


describe('Hello Tauri', () => {
  it('should be cordial', async () => {
    const header = await $('body > h1');
    const text = await header.getText();
    expect(text).toMatch(/^[hH]ello/);
  });


  it('should be excited', async () => {
    const header = await $('body > h1');
    const text = await header.getText();
    expect(text).toMatch(/!$/);
  });


  it('should be easy on the eyes', async () => {
    const body = await $('body');
    const backgroundColor = await body.getCSSProperty('background-color');
    expect(luma(backgroundColor.parsed.hex)).toBeLessThan(100);
  });
});

La función luma en la parte superior es solo una función auxiliar para una de nuestras pruebas y no está relacionada con la prueba real de la aplicación. Si estás familiarizado con otros frameworks de prueba, notarás que se exponen funciones similares que se utilizan, como describe, it y expect. Las otras APIs, como elementos tipo $ y sus métodos expuestos, son cubiertas por los documentos de la API de WebdriverIO.

Ejecutar la Suite de Pruebas

Sección titulada “Ejecutar la Suite de Pruebas”

¡Ahora que ya tenemos todo listo con la configuración y la especificación, vamos a ejecutarlo!

npm test

Deberíamos ver la siguiente salida:

➜  webdriverio git:(main) ✗ yarn test
yarn run v1.22.11
$ wdio run wdio.conf.js


Execution of 1 workers started at 2021-08-17T08:06:10.279Z


[0-0] RUNNING in undefined - /develop/tests/specs/example.e2e.js
[0-0] PASSED in undefined - /develop/tests/specs/example.e2e.js


 "spec" Reporter:
------------------------------------------------------------------
[wry 0.12.1 linux #0-0] Running: wry (v0.12.1) on linux
[wry 0.12.1 linux #0-0] Session ID: 81e0107b-4d38-4eed-9b10-ee80ca47bb83
[wry 0.12.1 linux #0-0]
[wry 0.12.1 linux #0-0] » /develop/tests/specs/example.e2e.js
[wry 0.12.1 linux #0-0] Hello Tauri
[wry 0.12.1 linux #0-0]    ✓ should be cordial
[wry 0.12.1 linux #0-0]    ✓ should be excited
[wry 0.12.1 linux #0-0]    ✓ should be easy on the eyes
[wry 0.12.1 linux #0-0]
[wry 0.12.1 linux #0-0] 3 passing (244ms)




Spec Files:   1 passed, 1 total (100% completed) in 00:00:01


Done in 1.98s.

Vemos que el Spec Reporter nos informa que las 3 pruebas del archivo test/specs/example.e2e.js, junto con el informe final Spec Files: 1 passed, 1 total (100% completed) in 00:00:01.

¡Usando la suite de pruebas de WebdriverIO, simplemente habilitamos de forma muy fácil las pruebas e2e para nuestra aplicación Tauri con solo unas pocas líneas de configuración y un solo comando para ejecutarla! Mejor aún, no tuvimos que modificar la aplicación en absoluto.

Apoya en Open CollectivePatrocina en GitHub

© 2026 Colaboradores de Tauri. CC-BY / MIT