От Protractor

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

Хотя мы хотели бы иметь полностью автоматизированный процесс миграции, реальность выглядит иначе. У каждого своя уникальная настройка и способ использования Protractor. Каждый шаг следует рассматривать как руководство, а не как пошаговую инструкцию. Если у вас возникают проблемы с миграцией, не стесняйтесь связаться с нами.

Настройка

API Protractor и WebdriverIO на самом деле очень похожи, до такой степени, что большинство команд можно переписать автоматически с помощью codemod.

Для установки codemod выполните:

npm install jscodeshift @wdio/codemod

Стратегия

Существует множество стратегий миграции. В зависимости от размера вашей команды, количества тестовых файлов и срочности миграции, вы можете попытаться трансформировать все тесты сразу или файл за файлом. Учитывая, что Protractor будет поддерживаться до Angular версии 15 (конец 2022 года), у вас ещё достаточно времени. Вы можете запускать тесты Protractor и WebdriverIO одновременно и начать писать новые тесты в WebdriverIO. В зависимости от вашего бюджета времени, вы можете сначала начать миграцию важных тестовых случаев и постепенно переходить к тестам, которые, возможно, даже можно удалить.

Сначала файл конфигурации

После установки codemod мы можем начать трансформировать первый файл. Сначала ознакомьтесь с параметрами конфигурации WebdriverIO. Файлы конфигурации могут стать очень сложными, и может иметь смысл перенести только основные части и решить, как добавить остальное после того, как будут перенесены соответствующие тесты, требующие определенных опций.

Для первой миграции мы трансформируем только файл конфигурации и выполняем:

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./conf.ts

информация

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

Установка зависимостей WebdriverIO

Следующий шаг — настроить минимальную установку WebdriverIO, которую мы начнем развивать по мере миграции с одного фреймворка на другой. Сначала устанавливаем CLI WebdriverIO:

npm install --save-dev @wdio/cli

Затем запускаем мастер конфигурации:

npx wdio config

Он проведет вас через ряд вопросов. Для этого сценария миграции вы:

• выбираете стандартные варианты
• рекомендуем не генерировать автоматически примеры файлов
• выбираете другую папку для файлов WebdriverIO
• и выбираете Mocha вместо Jasmine.

Почему Mocha?

Даже если вы раньше использовали Protractor с Jasmine, Mocha предоставляет лучшие механизмы повторных попыток. Выбор за вами!

После этого небольшого опроса мастер установит все необходимые пакеты и сохранит их в вашем package.json.

Миграция файла конфигурации

После того, как мы трансформировали conf.ts и создали новый wdio.conf.ts, пора перенести конфигурацию из одного файла в другой. Убедитесь, что вы переносите только код, необходимый для запуска всех тестов. В нашем случае мы переносим функции-хуки и тайм-ауты фреймворка.

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

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

Теперь мы готовы перенести первый тестовый файл. Чтобы начать с простого, давайте выберем файл, который не имеет много зависимостей от сторонних пакетов или других файлов, таких как PageObjects. В нашем примере первым файлом для миграции будет first-test.spec.ts. Сначала создайте директорию, где новая конфигурация WebdriverIO ожидает свои файлы, а затем переместите его:

mv mkdir -p ./test/specs/
mv test-suites/first-test.spec.ts ./test/specs

Теперь трансформируем этот файл:

npx jscodeshift -t ./node_modules/@wdio/codemod/protractor ./test/specs/first-test.spec.ts

Вот и всё! Этот файл настолько прост, что нам не нужны дополнительные изменения, и мы можем сразу попробовать запустить WebdriverIO:

npx wdio run wdio.conf.ts

Поздравляем 🥳 вы только что перенесли первый файл!

Следующие шаги

С этого момента вы продолжаете трансформировать тест за тестом и объект страницы за объектом страницы. Существует вероятность, что codemod не справится с определенными файлами и выдаст ошибку, например:

ERR /path/to/project/test/testdata/failing_submit.js Transformation error (Error transforming /test/testdata/failing_submit.js:2)
Error transforming /test/testdata/failing_submit.js:2

> login_form.submit()
  ^

The command "submit" is not supported in WebdriverIO. We advise to use the click command to click on the submit button instead. For more information on this configuration, see https://webdriver.io/docs/api/element/click.
  at /path/to/project/test/testdata/failing_submit.js:132:0

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

Заключение

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