Миграция с Protractor

Миграция с одного тестового фреймворка на другой — процесс, требующий внимательности и понимания различий в архитектуре и API. В контексте автоматизированного тестирования пользовательских интерфейсов многие компании сталкиваются с необходимостью перехода от Protractor к WebdriverIO. Это связано с завершением поддержки Protractor и желанием использовать более современный и гибкий инструмент для тестирования. WebdriverIO предоставляет расширенные возможности для работы с различными браузерами, инструментами и библиотеками, что делает его идеальной альтернативой Protractor.

Основные различия между Protractor и WebdriverIO

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

  • API и архитектура: Protractor был построен на основе WebDriverJS, который представляет собой обертку над WebDriver. WebdriverIO, с другой стороны, использует WebDriver или DevTools протоколы напрямую, что дает больше контроля над процессом взаимодействия с браузером.

  • Поддержка браузеров и платформ: WebdriverIO поддерживает не только браузеры, но и мобильные платформы (через Appium), а также предоставляет интеграцию с различными CI/CD системами, такими как Jenkins и CircleCI.

  • Гибкость: WebdriverIO обладает более модульной и расширяемой архитектурой. В то время как Protractor имел ограниченные возможности для интеграции с другими инструментами, WebdriverIO позволяет подключать различные плагины для отчетности, анализа и работы с различными тестовыми фреймворками.

  • Асинхронность и управление потоками: В отличие от Protractor, который базируется на концепции “angular-aware”, WebdriverIO использует промисы для управления асинхронностью, что упрощает взаимодействие с браузером.

Подготовка к миграции

Миграция с Protractor на WebdriverIO требует тщательной подготовки. На этапе планирования стоит:

  1. Провести аудит существующих тестов: Прежде чем начать миграцию, необходимо оценить текущую структуру тестов, включая количество и сложность тестов, используемые библиотеки и настройки.

  2. Оценить зависимости: Проверить все зависимости в проекте, такие как сторонние библиотеки, интеграции с CI/CD и отчетности. Важно убедиться, что WebdriverIO поддерживает все эти компоненты или существуют готовые решения для интеграции.

  3. Выбрать версии WebdriverIO и тестовых фреймворков: WebdriverIO поддерживает различные версии Node.js и дополнительные библиотеки для работы с тестами, такие как Mocha, Jasmine и Cucumber. Необходимо выбрать подходящие версии этих инструментов, чтобы обеспечить стабильную работу тестов.

Структура тестов в WebdriverIO

WebdriverIO использует более современную и гибкую структуру тестов, чем Protractor. Наиболее распространенная структура включает:

  • Тестовые файлы: Тесты могут быть написаны с использованием популярных фреймворков, таких как Mocha или Jasmine. Структура тестов обычно включает описание набора тестов (suite) и отдельных тестов (spec).

  • Конфигурационный файл: В WebdriverIO используется конфигурационный файл (wdio.conf.js), в котором настраиваются параметры тестов, такие как путь до тестов, используемые плагины, браузеры и другие параметры.

  • Хуки и настройки окружения: WebdriverIO позволяет настраивать хуки, такие как before, after, beforeSuite, и afterSuite, что помогает управлять подготовкой и завершением тестов.

Миграция тестов

1. Переписывание тестов

Первым шагом в миграции является переписывание тестов на WebdriverIO. Основные моменты, на которые стоит обратить внимание:

  • Асинхронность: В WebdriverIO для работы с асинхронными операциями используется синтаксис async/await вместо промисов или колбэков, как это было в Protractor. Все действия с браузером, такие как клик, ввод текста, ожидания элементов, необходимо оборачивать в await.

    Пример переписывания теста с Protractor на WebdriverIO:

    Protractor:

    it('should load the page', function() {
    browser.get('http://example.com');
    let title = element(by.tagName('h1')).getText();
    expect(title).toEqual('Example Domain');
});

    WebdriverIO:

    it('should load the page', async function() {
    await browser.url('http://example.com');
    const title = await $('h1').getText();
    expect(title).toBe('Example Domain');
});

2. Работа с элементами

В Protractor часто использовались специальные элементы типа element(by.css(...)), которые являются обертками для работы с DOM. В WebdriverIO для поиска элементов используется API, предоставляющий методы такие как $('selector') и $$('selector').

Пример миграции:

Protractor:

let button = element(by.buttonText('Click me'));
button.click();

WebdriverIO:

const button = await $('button=Click me');
await button.click();

3. Ожидания

Protractor предоставляет возможность использовать специальные ожидания для элементов с помощью browser.wait(). В WebdriverIO же для этой цели можно использовать методы waitForExist(), waitForDisplayed(), waitUntil() и другие.

Пример:

Protractor:

let element = element(by.id('myElement'));
browser.wait(protractor.ExpectedConditions.visibilityOf(element), 5000);

WebdriverIO:

const element = await $('#myElement');
await element.waitForExist({ timeout: 5000 });
await element.waitForDisplayed({ timeout: 5000 });

4. Работа с браузерами и сессиями

WebdriverIO предоставляет больше возможностей для настройки браузеров и взаимодействия с ними, чем Protractor. В WebdriverIO можно легко управлять несколькими браузерами, сессиями и их настройками через конфигурационный файл.

Пример конфигурации для запуска тестов в разных браузерах:

exports.config = {
    services: ['selenium-standalone'],
    capabilities: [{
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: ['--headless', '--disable-gpu']
        }
    }, {
        browserName: 'firefox'
    }]
};

Плагины и расширения

WebdriverIO имеет богатую экосистему плагинов, которые могут улучшить функциональность тестов. Например, можно подключить плагин для отчетности, снимать скриншоты при неудачных тестах или использовать плагин для параллельного выполнения тестов.

Пример конфигурации для отчетности:

exports.config = {
    reporters: ['spec', ['allure', { outputDir: 'allure-results' }]],
    reporterOptions: {
        allure: {
            outputDir: 'allure-results',
            disableWebdriverStepsReporting: true,
            disableWebdriverScreenshotsReporting: false
        }
    }
};

Использование Cucumber с WebdriverIO

Для тех, кто использует Cucumber в Protractor, WebdriverIO поддерживает интеграцию с Cucumber через плагин @wdio/cucumber-framework. Это позволяет использовать BDD (Behavior Driven Development) подход для написания тестов.

Пример конфигурации для Cucumber:

exports.config = {
    framework: 'cucumber',
    cucumberOpts: {
        require: ['./step-definitions/*.js'],
        backtrace: false,
        requireModule: ['@babel/register'],
        dryRun: false,
        failFast: false,
        snippets: true,
        source: true
    }
};

Заключение

Миграция с Protractor на WebdriverIO может показаться сложной задачей, но она принесет ряд преимуществ, таких как более гибкая настройка, улучшенная поддержка браузеров, расширенная экосистема и более современная архитектура. Несмотря на необходимость переписать существующие тесты и конфигурацию, переход на WebdriverIO открывает новые возможности для автоматизированного тестирования.

Оглавление