Миграция с TestCafe

Миграция с TestCafe на WebdriverIO: Подробное руководство

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

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

TestCafe — это инструмент для тестирования с использованием Node.js, который использует свой собственный механизм управления браузером. Тесты в TestCafe выполняются с использованием браузерных агентов, не требующих установки дополнительных драйверов. Это делает настройку простым и быстрым процессом.

WebdriverIO, с другой стороны, использует WebDriver-протокол для взаимодействия с браузерами и требует наличия соответствующих драйверов. WebdriverIO предоставляет более широкие возможности по кастомизации, интеграции с различными инструментами и сложным кейсам. Он также поддерживает работу с многими облачными сервисами, такими как Sauce Labs, BrowserStack и другими.

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

2. Структура проекта

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

Структура проекта в TestCafe

Тесты в TestCafe обычно располагаются в папке tests. Структура проекта может выглядеть так:

/project-root
  ├── /tests
      ├── test1.js
      ├── test2.js
  ├── package.json
  ├── .babelrc
  ├── testcafe.json

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

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

/project-root
  ├── /test
      ├── /specs
          ├── test1.js
          ├── test2.js
  ├── /wdio.conf.js
  ├── /package.json

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

3. Настройка и конфигурация

Установка WebdriverIO

Для начала необходимо установить WebdriverIO и его зависимости. В отличие от TestCafe, WebdriverIO требует установки драйверов и сервисов, необходимых для работы с браузерами.

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

    npm init wdio .

  2. Установка зависимостей:

    npm install --save-dev webdriverio @wdio/cli @wdio/local-runner @wdio/mocha-framework @wdio/chromedriver-service

  3. Настройка конфигурационного файла wdio.conf.js с использованием автоматического процесса через команду npx wdio config.

WebdriverIO также предлагает богатые возможности по настройке репортинга, сервисов и различных интеграций с CI/CD.

Конфигурация TestCafe

В TestCafe настройка тоже достаточно проста, и она выполняется через файл конфигурации testcafe.json. Однако, в отличие от WebdriverIO, TestCafe поддерживает более ограниченный набор сервисов для настройки интеграции с браузерами.

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

{
  "src": "tests/*.js",
  "browsers": [
    "chrome",
    "firefox"
  ]
}

Для большинства пользователей TestCafe достаточно стандартных настроек, однако WebdriverIO в этом плане предоставляет больше гибкости.

4. Перенос тестов

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

Синтаксис команд

TestCafe использует свой собственный API для взаимодействия с элементами. Пример простого теста на TestCafe:

import { Selector } from 'testcafe';

fixture `Test`
  .page `https://example.com`;

test('Check page title', async t => {
  const title = await Selector('title').innerText;
  await t.expect(title).eql('Example Domain');
});

В WebdriverIO взаимодействие с элементами происходит через различные методы, использующие WebDriver-протокол:

describe('Test', () => {
  it('Check page title', () => {
    browser.url('https://example.com');
    const title = browser.getTitle();
    expect(title).toBe('Example Domain');
  });
});

Основные изменения:

  • В WebdriverIO используется browser.url() для навигации.
  • Получение заголовка страницы выполняется через browser.getTitle().
  • Для ассертов в WebdriverIO используется встроенная библиотека expect.

Взаимодействие с элементами

В TestCafe взаимодействие с элементами осуществляется через Selector. В WebdriverIO для поиска элементов используется метод $('selector'), который возвращает объект, с помощью которого можно выполнять различные действия, такие как клик, ввод текста и другие.

Пример TestCafe:

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

Пример WebdriverIO:

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

В WebdriverIO взаимодействие с элементами также поддерживает более сложные методы, такие как ожидание элементов с использованием waitForExist(), waitForDisplayed() и другие, что дает большую гибкость при написании тестов.

Ожидания

В TestCafe ожидания обрабатываются автоматически с помощью await. Например, при клике на элемент TestCafe сам подождет, пока элемент не станет доступным.

В WebdriverIO также можно использовать waitUntil() и другие методы для управления ожиданиями:

const button = $('#submit');
button.waitForExist({ timeout: 5000 });
button.click();

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

5. Интеграция с CI/CD

Один из важных этапов миграции — это настройка интеграции с системами непрерывной интеграции (CI/CD). WebdriverIO предлагает богатую документацию по настройке с такими популярными сервисами, как Jenkins, CircleCI, GitHub Actions и другими.

TestCafe и CI/CD

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

Пример настройки CI с использованием GitHub Actions для WebdriverIO:

name: WebDriverIO Tests

on: [push]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14'
    - run: npm install
    - run: npx wdio run wdio.conf.js

WebdriverIO позволяет легко интегрировать различные плагины для отчетности, сшивания отчетов и создания снимков экрана, что может значительно упростить анализ тестов в CI/CD.

6. Заключение

Миграция с TestCafe на WebdriverIO может занять некоторое время из-за различий в синтаксисе, структуре проекта и подходах к написанию тестов. Однако WebdriverIO предоставляет гораздо больше возможностей для кастомизации и работы с сложными тестовыми сценариями. Переход на WebdriverIO открывает возможности для гибкой настройки, более продвинутой работы с браузерами и эффективной интеграции с CI/CD процессами.

Оглавление