Миграция с Cypress

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

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

  1. Архитектура Cypress использует собственный движок для выполнения тестов, что позволяет ему работать непосредственно в браузере. WebdriverIO, в свою очередь, взаимодействует с браузером через WebDriver API, что дает больше гибкости, но также требует настройки серверов и драйверов.

  2. Исполнение тестов В Cypress тесты выполняются внутри самого браузера, что дает доступ к его внутреннему состоянию. WebdriverIO использует серверный подход, отправляя запросы к браузеру через WebDriver или W3C WebDriver API. Это означает, что WebDriverIO подходит для работы в более распределенных и параллельных средах, в отличие от Cypress, который ограничен одной сессией браузера.

  3. Поддержка браузеров Cypress изначально поддерживает только браузеры на основе Chromium, а также ограничено в использовании Firefox. WebdriverIO, благодаря WebDriver и Selenium, поддерживает широкий спектр браузеров, включая Safari, Internet Explorer, Edge и другие.

  4. Асинхронность В Cypress асинхронность скрыта от пользователя, так как библиотека работает с промисами внутри своего API, позволяя писать код в стиле “синхронного” программирования. В WebdriverIO асинхронность более явная и работает через async/await, что может требовать изменения стиля написания тестов.

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

При миграции с Cypress на WebdriverIO первым шагом будет перенос структуры тестов. Рассмотрим основные элементы, которые необходимо будет адаптировать.

1. Базовая структура тестов

Cypress использует функцию describe для группировки тестов и it для определения тестов. Точно так же WebdriverIO использует describe и it (или it.only), однако конфигурация теста будет другой.

Пример в Cypress:

describe('Test Suite', () => {
  it('should do something', () => {
    cy.visit('https://example.com');
    cy.get('button').click();
    cy.url().should('include', 'success');
  });
});

Пример в WebdriverIO:

describe('Test Suite', () => {
  it('should do something', async () => {
    await browser.url('https://example.com');
    const button = await $('button');
    await button.click();
    const url = await browser.getUrl();
    expect(url).toContain('success');
  });
});

Ключевое отличие заключается в том, что WebdriverIO использует асинхронные команды с await и все действия с элементами также выполняются асинхронно.

2. Ожидания и асинхронные операции

В Cypress многие действия выполняются синхронно, благодаря скрытым ожиданиям внутри API. В WebdriverIO все действия требуют явных ожиданий, например, через команду waitForExist для ожидания появления элемента.

Пример в Cypress:

cy.get('button').should('be.visible');

Пример в WebdriverIO:

const button = await $('button');
await button.waitForExist({ timeout: 5000 });
expect(await button.isDisplayed()).toBe(true);

3. Селекторы

WebdriverIO поддерживает использование различных типов локаторов: CSS-селекторы, XPath, а также более сложные стратегии поиска элементов, такие как ID, класс, текст и т.д.

Пример в Cypress:

cy.get('.submit-button');

Пример в WebdriverIO:

const button = await $('.submit-button');

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

Настройка окружения и конфигурация

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

  1. Установка WebdriverIO

Для начала необходимо установить WebdriverIO и его зависимости:

npm init wdio

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

  1. Конфигурация WebdriverIO

В файле конфигурации wdio.conf.js можно настроить параметры браузера, таймауты, отчеты и многое другое.

Пример конфигурации:

exports.config = {
  runner: 'local',
  specs: [
    './tests/**/*.js'
  ],
  capabilities: [{
    browserName: 'chrome'
  }],
  logLevel: 'info',
  services: ['chromedriver'],
  framework: 'mocha',
  reporters: ['spec']
};

Эта конфигурация позволяет запускать тесты в браузере Chrome, используя ChromeDriver, и выводить отчеты в формате spec.

Проблемы, с которыми можно столкнуться при миграции

  1. Асинхронные операции В WebdriverIO все операции, связанные с браузером и DOM, асинхронные. Это требует от тестировщика привычки работать с async/await. Переход с Cypress на WebdriverIO может потребовать переписывания кода, если ранее использовались синхронные операции.

  2. Поддержка браузеров Cypress ограничен в поддержке браузеров. В отличие от этого, WebdriverIO может быть настроен для работы с любыми браузерами, что добавляет гибкости, но также может потребовать дополнительной настройки, особенно при работе с различными версиями браузеров.

  3. Интеграция с CI/CD Миграция также включает в себя настройку WebdriverIO в процессе CI/CD. Для WebdriverIO доступны интеграции с такими инструментами, как Jenkins, Travis CI, GitHub Actions и другие, что позволяет настроить непрерывную интеграцию с поддержкой параллельных запусков тестов и автоматических отчетов.

  4. Отчеты и логирование В Cypress встроены отчеты, а в WebdriverIO потребуется использовать дополнительные пакеты для создания подробных отчетов (например, wdio-allure-reporter для интеграции с Allure).

Интеграция с другими инструментами

WebdriverIO поддерживает множество плагинов и интеграций с различными инструментами, такими как Allure, Mochawesome, и другими для создания отчетов. Это позволяет тестировщикам гибко настраивать и использовать свои инструменты для анализа и отслеживания результатов тестирования.

  1. Allure Report

    Чтобы настроить Allure в WebdriverIO, необходимо установить соответствующий пакет и настроить репортер в конфигурационном файле:

    npm install @wdio/allure-reporter --save-dev

    В файле конфигурации нужно указать репортер:

    reporters: ['spec', 'allure'],

  2. Дополнительные сервисы

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

Заключение

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

Оглавление