Тестирование на локальных браузерах

Для тестирования на локальных браузерах используется WebdriverIO в сочетании с драйверами конкретных браузеров. Основная задача — корректная установка WebdriverIO, конфигурация локального Selenium или соответствующего драйвера, а также интеграция с тестовым фреймворком, например Mocha или Jasmine.

Установка WebdriverIO:

npm init -y
npm install @wdio/cli --save-dev
npx wdio config

В процессе конфигурации wdio config необходимо выбрать следующие параметры:

  • Runner: local
  • Framework: Mocha / Jasmine / Cucumber
  • Reporters: Spec, Allure или любой другой
  • Browsers: Chrome, Firefox, Edge (указывается через сервисы)
  • Services: selenium-standalone или chromedriver/geckodriver

Установка драйверов для локальных браузеров:

  • Chrome: npm install chromedriver --save-dev
  • Firefox: npm install geckodriver --save-dev
  • Edge: npm install msedgedriver --save-dev

После установки драйверов WebdriverIO автоматически находит их в системе при запуске тестов.

Конфигурационный файл wdio.conf.js

Конфигурация локального тестирования включает:

exports.config = {
    runner: 'local',
    specs: ['./test/specs/**/*.js'],
    maxInstances: 1,
    capabilities: [{
        maxInstances: 1,
        browserName: 'chrome',
        acceptInsecureCerts: true,
    }],
    logLevel: 'info',
    framework: 'mocha',
    reporters: ['spec'],
    services: ['chromedriver'],
    mochaOpts: {
        ui: 'bdd',
        timeout: 60000
    },
}

Ключевые моменты конфигурации:

  • runner: 'local' — указывает на запуск тестов на локальном устройстве.
  • capabilities — массив объектов, где задаются параметры каждого браузера.
  • services — упрощает управление драйверами и Selenium, автоматически поднимает сервер.
  • mochaOpts.timeout — устанавливает таймаут выполнения тестов, критично для сложных сценариев.

Структура теста

Простейший пример теста на локальном браузере:

describe('Главная страница сайта', () => {
    it('должна открываться и отображать заголовок', async () => {
        await browser.url('https://example.com');
        const title = await browser.getTitle();
        console.log(title);
        await expect(title).toBe('Example Domain');
    });
});

Особенности локального тестирования:

  • browser.url() — переход на URL.
  • browser.getTitle() — получение заголовка страницы.
  • Асинхронная работа через async/await обеспечивает корректную последовательность действий.

Управление браузером

WebdriverIO предоставляет гибкие методы для работы с браузером:

  • browser.refresh() — перезагрузка страницы.
  • browser.back() / browser.forward() — навигация по истории.
  • browser.maximizeWindow() / browser.setWindowSize(width, height) — управление размером окна.
  • browser.takeScreenshot() — сохранение скриншота для отчётов.

Эти методы особенно важны при локальном тестировании, когда требуется точная визуальная проверка элементов интерфейса.

Работа с элементами страницы

Основные команды для локальных браузеров:

const button = await $('#submit');
await button.click();

const input = await $('input[name="username"]');
await input.setValue('user123');

const text = await $('#message').getText();

Рекомендации по локаторам:

  • Использовать id и data-testid для стабильности.
  • CSS и XPath применять там, где уникальные идентификаторы отсутствуют.
  • Методы waitForExist() и waitForDisplayed() гарантируют доступность элементов перед взаимодействием:
const button = await $('#submit');
await button.waitForDisplayed({ timeout: 5000 });
await button.click();

Асинхронное ожидание и синхронизация

Локальные тесты требуют точной синхронизации. WebdriverIO предоставляет:

  • waitUntil(condition, {timeout, timeoutMsg}) — ожидание пользовательской функции.
  • browser.pause(ms) — временная пауза (не рекомендуется для стабильных тестов, использовать только для отладки).

Пример:

await browser.waitUntil(
    async () => (await $('#status').getText()) === 'Готово',
    { timeout: 10000, timeoutMsg: 'Статус не стал "Готово" за 10 секунд' }
);

Отчёты и логирование

Для локальных тестов важно иметь отчёты о выполнении:

  • Spec Reporter — выводит лог в консоль.
  • Allure Reporter — генерирует HTML-отчёты со скриншотами.
  • Снимки экрана можно автоматически сохранять при падении теста:
afterTest: async function(test, context, { error }) {
    if (error) {
        await browser.takeScreenshot();
    }
}

Параллельное тестирование на локальном устройстве

Даже на локальной машине WebdriverIO позволяет запускать несколько экземпляров браузеров:

maxInstances: 2,
capabilities: [
    { browserName: 'chrome', maxInstances: 1 },
    { browserName: 'firefox', maxInstances: 1 }
]

Важно следить за ресурсами: слишком много параллельных браузеров могут перегрузить систему.

Практические рекомендации

  • Использовать сервисы (chromedriver, geckodriver) вместо внешнего Selenium для упрощения настройки.
  • Настроить стабильные таймауты и ожидания для элементов.
  • Выделять тесты в логические группы (specs) для удобного управления.
  • Хранить тестовые данные отдельно, чтобы не жёстко захардкоживать URL и входные значения.
  • Сохранять скриншоты и логи для анализа после локальных запусков.

Эти подходы позволяют строить надёжные локальные тесты, которые легко масштабируются при переходе на удалённые среды.

Оглавление