З 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, настав час перенести конфігурацію з одного файлу в інший. Переконайтеся, що ви переносите лише код, який є необхідним для запуску всіх тестів. У нашому випадку ми переносимо функції hook і timeout фреймворку.

Тепер ми продовжимо працювати лише з нашим файлом 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

Вітаємо! 🥳 Ви щойно мігрували перший файл!

Наступні кроки

З цього моменту ви продовжуєте трансформувати тест за тестом і page object за page object. Існує ймовірність, що 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 дасть вам пораду, як виконати рефакторинг. Якщо ви стикаєтеся з такими повідомленнями про помилки занадто часто, не соромтеся створити issue і запитати про додавання певної трансформації. Хоча codemod вже трансформує більшість API Protractor, все ще є багато місця для вдосконалення.

Висновок

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