Taiko: Automatización de Navegadores con Selectores Inteligentes y REPL

TL;DR

• Taiko usa selectores en lenguaje natural: click('Login') en lugar de page.locator('#btn-login').click()
• Modo REPL incorporado para desarrollo interactivo de pruebas — escribe .code para generar script de tu sesión
• Ideal para: equipos que priorizan simplicidad sobre características avanzadas; prototipado rápido

Ideal para: Equipos nuevos en automatización de navegadores o frustrados con selectores XPath/CSS flaky Omite si: Necesitas ejecución paralela, escenarios multi-navegador complejos o pruebas móviles Tiempo de lectura: 10 minutos

Tus pruebas Selenium fallan porque un desarrollador renombró una clase CSS. Tus selectores Playwright se rompen cuando la estructura del DOM cambia. ¿Y si tus pruebas pudieran encontrar elementos como lo hacen los humanos — por el texto que ven?

Taiko toma un enfoque diferente para automatización de navegadores. En lugar de localizadores frágiles, escribes click('Submit') y Taiko determina qué botón quieres decir.

Qué Hace Diferente a Taiko

Taiko es una herramienta gratuita y open-source de automatización de navegadores de ThoughtWorks, diseñada con selectores inteligentes y una API legible por humanos. La diferencia clave con Selenium o Playwright: describes qué ves, no dónde está en el DOM.

Selectores Inteligentes: Automatización en Lenguaje Natural

// Selenium/Playwright tradicional
await page.locator('#username').fill('user@example.com');
await page.locator('xpath=//button[contains(text(), "Login")]').click();

// Taiko — Selectores Inteligentes
await write('user@example.com', into(textBox('Username')));
await click('Login');

// Más ejemplos
await write('John Doe', into('Full Name'));
await click(button('Submit'));
await click(link('Contact Us'));
await select('California', from('State'));
await attach('resume.pdf', to('Upload Resume'));

Modo REPL: Pruebas Interactivas

# Iniciar Taiko REPL
$ taiko

> openBrowser()
✔ Browser opened
> goto('https://example.com')
✔ Navigated to URL https://example.com
> write('search query', into('Search'))
✔ Wrote search query into the Search
> click('Search')
✔ Clicked element matching text "Search"
> screenshot()
✔ Screenshot is created at /screenshots/1234567890.png
> .code
// Código generado para esta sesión:
const { openBrowser, goto, write, click, screenshot } = require('taiko');
(async () => {
    try {
        await openBrowser();
        await goto('https://example.com');
        await write('search query', into('Search'));
        await click('Search');
        await screenshot();
    } catch (error) {
        console.error(error);
    } finally {
        await closeBrowser();
    }
})();
> closeBrowser()
✔ Browser closed

Ejemplo de Prueba Completa

// test/login.test.js
const { openBrowser, goto, write, click, text, closeBrowser, into, button } = require('taiko');

describe('User Authentication', () => {
  beforeAll(async () => {
    await openBrowser({ headless: true });
  });

  afterAll(async () => {
    await closeBrowser();
  });

  test('should login with valid credentials', async () => {
    await goto('https://example.com/login');

    await write('user@example.com', into('Email'));
    await write('password123', into('Password'));
    await click(button('Login'));

    await text('Welcome back').exists();
  });

  test('should show error for invalid credentials', async () => {
    await goto('https://example.com/login');

    await write('invalid@example.com', into('Email'));
    await write('wrongpass', into('Password'));
    await click(button('Login'));

    await text('Invalid credentials').exists();
  });
});

Características Avanzadas

Selectores de Proximidad

// Encontrar elementos relativos a otros
await write('John', into(textBox(near('First Name'))));
await write('Doe', into(textBox(near('Last Name'))));

await click(button('Save', below('Profile Picture')));
await click(link('Edit', toRightOf('John Doe')));

// Encadenamiento de proximidad
await write('94105', into(
  textBox(near('Zip Code'), below('Address'))
));

Esperas Personalizadas y Assertions

const { openBrowser, goto, click, waitFor, text, evaluate } = require('taiko');

// Esperar elemento
await waitFor('Loading complete');
await waitFor(2000);  // Esperar 2 segundos
await waitFor(async () => (await $('div.loader').exists()) === false);

// Assertions personalizadas
await text('Order Confirmed').exists();
await text('Error').exists(undefined, { timeout: 1000 }).catch(() => {
  console.log('No error message shown');
});

// Ejecutar JavaScript
const count = await evaluate(() => {
  return document.querySelectorAll('.product-item').length;
});
console.log(`Found ${count} products`);

Interceptar Solicitudes de Red

const { openBrowser, goto, intercept, click } = require('taiko');

// Interceptar y modificar solicitudes
await intercept('https://api.example.com/products', {
  body: JSON.stringify({
    products: [
      { id: 1, name: 'Test Product', price: 99.99 }
    ]
  })
});

await goto('https://example.com/products');
// La página recibirá la respuesta mockeada

Taiko vs Selenium vs Playwright

Pruebas Headless

const { openBrowser, goto, screenshot, closeBrowser } = require('taiko');

(async () => {
  try {
    // Modo headless
    await openBrowser({ headless: true });
    await goto('https://example.com');

    // Headless con argumentos personalizados
    await openBrowser({
      headless: true,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage'
      ]
    });

    await screenshot({ fullPage: true });
  } finally {
    await closeBrowser();
  }
})();

Integración CI/CD

# .github/workflows/taiko-tests.yml
name: Taiko E2E Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:

      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run Taiko tests
        run: npm test

      - name: Upload screenshots
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: taiko-screenshots
          path: screenshots/

Desarrollo de Pruebas Asistido por IA

Las herramientas de IA funcionan bien con el enfoque de lenguaje natural de Taiko.

Lo que la IA hace bien:

• Convertir descripciones de pruebas manuales a scripts Taiko (lenguaje natural entrada y salida)
• Generar cadenas de selectores de proximidad para formularios complejos
• Crear conjuntos de datos de prueba para pruebas data-driven
• Explicar funciones del API de Taiko y sus equivalentes en Selenium/Playwright

Lo que aún necesita humanos:

• Decidir qué flujos de usuario necesitan automatización
• Determinar assertions apropiadas para lógica de negocio
• Depurar problemas de timing en aplicaciones dinámicas
• Elegir entre estrategias de selectores de Taiko para elementos ambiguos

Prompt útil:

Convierte este caso de prueba manual a un script Taiko:
1. Abrir la página de login
2. Ingresar username en el campo Username
3. Ingresar password en el campo Password
4. Hacer clic en el botón Login
5. Verificar que aparece el texto "Welcome back"

Usa selectores inteligentes de Taiko y manejo de errores apropiado.

FAQ

¿Para qué se usa Taiko?

Taiko es una herramienta de automatización de navegadores Node.js de ThoughtWorks diseñada para pruebas web. Su característica clave son los selectores inteligentes — escribes click('Login') en lugar de buscar selectores CSS o XPath. Esto hace las pruebas más legibles y menos frágiles cuando la UI cambia. Taiko se usa para pruebas E2E, pruebas de regresión y prototipado rápido de scripts de automatización.

¿Es Taiko mejor que Playwright?

Sirven diferentes necesidades. Taiko sobresale en simplicidad: el modo REPL te permite construir pruebas interactivamente, y los selectores inteligentes reducen la carga de mantenimiento. Playwright ofrece más características: ejecución paralela, múltiples contextos de navegador, grabación de video y trace viewer para depuración. Elige Taiko para proyectos pequeños a medianos que priorizan experiencia de desarrollador. Elige Playwright para suites de pruebas grandes que necesitan características avanzadas.

¿Soporta Taiko pruebas headless?

Sí. Usa openBrowser({ headless: true }) para modo headless. Esto es esencial para pipelines CI/CD donde no hay display disponible. Taiko también soporta argumentos de navegador personalizados para entornos Docker.

¿Puede Taiko interceptar solicitudes de red?

Sí. La función intercept() de Taiko mockea respuestas API sin contactar el backend. Esto es similar a page.route() de Playwright o cy.intercept() de Cypress. Útil para probar estados de error, condiciones de red lentas, o aislar pruebas frontend de dependencias backend.

Cuándo Elegir Taiko

Elige Taiko cuando:

• El equipo valora simplicidad y facilidad de uso
• Se prefieren selectores en lenguaje natural
• Desarrollo dirigido por REPL es atractivo
• Cobertura Chromium/Firefox/Safari es suficiente
• Se necesita prototipado rápido

Elige alternativas cuando:

• Necesitas características avanzadas como trace viewer (Playwright)
• Gran infraestructura de pruebas existente en otro framework
• Pruebas móviles son esenciales (Appium)
• Necesitas ejecución paralela incorporada (Playwright)
• Se requiere matriz extensa de versiones de navegador (Selenium Grid)

Recursos Oficiales

• Taiko Documentation
• Taiko GitHub Repository
• Gauge + Taiko Integration

Ver También

• Playwright: Guía Completa - Pruebas multi-navegador para equipos con necesidades avanzadas
• Cypress Deep Dive - Arquitectura, depuración y stubs de red
• Selenium WebDriver 2025 - Cuándo Selenium sigue siendo la elección correcta
• Gauge Framework Guide - Combina Taiko con Gauge para especificaciones BDD