Taiko: Автоматизация Браузеров с Умными Селекторами и REPL

TL;DR

• Taiko использует селекторы на естественном языке: click('Login') вместо page.locator('#btn-login').click()
• Встроенный REPL-режим для интерактивной разработки тестов — введи .code для генерации скрипта из сессии
• Лучше всего для: команд, приоритизирующих простоту; быстрого прототипирования

Подходит для: Команд, новых в автоматизации браузеров или уставших от flaky XPath/CSS селекторов Пропусти, если: Нужно параллельное выполнение, сложные мультибраузерные сценарии или мобильное тестирование Время чтения: 10 минут

Твои Selenium-тесты падают, потому что разработчик переименовал CSS-класс. Playwright-селекторы ломаются при изменении структуры DOM. А что если тесты могли бы находить элементы так, как это делают люди — по тексту, который они видят?

Taiko использует другой подход к автоматизации браузеров. Вместо хрупких локаторов ты пишешь click('Submit'), и Taiko сам определяет, какую кнопку ты имеешь в виду.

Что Отличает Taiko

Taiko — это бесплатный open-source инструмент автоматизации браузеров от ThoughtWorks с умными селекторами и человекочитаемым API. Ключевое отличие от Selenium или Playwright: ты описываешь что видишь, а не где это находится в DOM.

Умные Селекторы: Автоматизация на Естественном Языке

// Традиционный Selenium/Playwright
await page.locator('#username').fill('user@example.com');
await page.locator('xpath=//button[contains(text(), "Login")]').click();

// Taiko — Умные Селекторы
await write('user@example.com', into(textBox('Username')));
await click('Login');

// Больше примеров
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'));

REPL-Режим: Интерактивное Тестирование

# Запустить 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
// Код, сгенерированный для этой сессии:
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

Полный Пример Теста

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

Продвинутые Функции

Proximity-Селекторы

// Найти элементы относительно других
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')));

// Цепочки proximity
await write('94105', into(
  textBox(near('Zip Code'), below('Address'))
));

Кастомные Ожидания и Assertions

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

// Ждать элемент
await waitFor('Loading complete');
await waitFor(2000);  // Ждать 2 секунды
await waitFor(async () => (await $('div.loader').exists()) === false);

// Кастомные assertions
await text('Order Confirmed').exists();
await text('Error').exists(undefined, { timeout: 1000 }).catch(() => {
  console.log('No error message shown');
});

// Выполнить JavaScript
const count = await evaluate(() => {
  return document.querySelectorAll('.product-item').length;
});
console.log(`Found ${count} products`);

Перехват Сетевых Запросов

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

// Перехватить и модифицировать запросы
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');
// Страница получит замоканный ответ

Taiko vs Selenium vs Playwright

Headless Тестирование

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

(async () => {
  try {
    // Headless режим
    await openBrowser({ headless: true });
    await goto('https://example.com');

    // Headless с кастомными аргументами
    await openBrowser({
      headless: true,
      args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage'
      ]
    });

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

Интеграция 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/

AI-Assisted Разработка Тестов

AI-инструменты хорошо работают с естественноязыковым подходом Taiko.

Что AI делает хорошо:

• Конвертация описаний ручных тестов в Taiko-скрипты (естественный язык на входе и выходе)
• Генерация цепочек proximity-селекторов для сложных форм
• Создание наборов тестовых данных для data-driven тестирования
• Объяснение функций API Taiko и их эквивалентов в Selenium/Playwright

Что всё ещё требует людей:

• Выбор, какие user flows нужно автоматизировать
• Определение правильных assertions для бизнес-логики
• Отладка проблем тайминга в динамических приложениях
• Выбор между стратегиями селекторов Taiko для неоднозначных элементов

Полезный промпт:

Конвертируй этот ручной тест-кейс в Taiko-скрипт:
1. Открыть страницу логина
2. Ввести username в поле Username
3. Ввести password в поле Password
4. Кликнуть кнопку Login
5. Проверить, что появился текст "Welcome back"

Используй умные селекторы Taiko и правильную обработку ошибок.

FAQ

Для чего используется Taiko?

Taiko — это инструмент автоматизации браузеров на Node.js от ThoughtWorks, разработанный для веб-тестирования. Его ключевая фича — умные селекторы: ты пишешь click('Login') вместо поиска CSS-селекторов или XPath. Это делает тесты более читаемыми и менее хрупкими при изменениях UI. Taiko используется для E2E-тестирования, регрессионного тестирования и быстрого прототипирования скриптов автоматизации.

Taiko лучше Playwright?

Они служат разным целям. Taiko превосходит в простоте: REPL-режим позволяет строить тесты интерактивно, а умные селекторы снижают затраты на поддержку. Playwright предлагает больше фич: параллельное выполнение, множественные контексты браузера, запись видео и trace viewer для отладки. Выбирай Taiko для малых и средних проектов, приоритизирующих developer experience. Выбирай Playwright для больших тестовых сьютов, требующих продвинутых функций.

Поддерживает ли Taiko headless-тестирование?

Да. Используй openBrowser({ headless: true }) для headless-режима. Это критично для CI/CD-пайплайнов, где нет дисплея. Taiko также поддерживает кастомные аргументы браузера для Docker-окружений.

Может ли Taiko перехватывать сетевые запросы?

Да. Функция intercept() в Taiko мокает API-ответы без обращения к бэкенду. Это аналогично page.route() в Playwright или cy.intercept() в Cypress. Полезно для тестирования ошибочных состояний, медленных сетевых условий или изоляции фронтенд-тестов от зависимостей бэкенда.

Когда Выбирать Taiko

Выбирай Taiko когда:

• Команда ценит простоту и легкость использования
• Предпочтительны селекторы на естественном языке
• REPL-управляемая разработка привлекательна
• Покрытие Chromium/Firefox/Safari достаточно
• Нужно быстрое прототипирование

Выбирай альтернативы когда:

• Нужны продвинутые фичи типа trace viewer (Playwright)
• Большая существующая инфраструктура тестов в другом фреймворке
• Мобильное тестирование критично (Appium)
• Нужно встроенное параллельное выполнение (Playwright)
• Требуется расширенная матрица версий браузеров (Selenium Grid)

Официальные ресурсы

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

Смотрите также

• Playwright: Полное Руководство - Мультибраузерное тестирование для команд с продвинутыми потребностями
• Cypress Deep Dive - Архитектура, отладка и сетевые стабы
• Selenium WebDriver 2025 - Когда Selenium всё ещё правильный выбор
• Gauge Framework Guide - Комбинируй Taiko с Gauge для BDD-спецификаций