Чому я перейшов із Cypress на Playwright

💡 Усі статті, обговорення, новини про тестування — в одному місці. Приєднуйтесь до QA спільноти!

Привіт, мене звати Олександр Гуменюк. Я працюю Front-end розробником у стартапі AlphaNovel від венчур-білдера SKELAR. Ми створюємо маркетплейс романтичних новел і коміксів для читачів і письменників з усього світу.

Сьогодні я розповім, чому наша команда вирішила переписати всі E2E-тести з Cypress на Playwright та наведу конкретні приклади переваг Playwright, які ми для себе відкрили. Зауважте, хоча Playwright підтримує й інші мови програмування (за що йому ще один плюсик), приклади коду будуть на TypeScript.

Водночас усі переваги Playwright зберігаються, незалежно від мови програмування.

Коротко про Cypress i Playwright

Cypress — це open-source JavaScript-фреймворк для написання тестів для вебзастосунків, випущений у 2017 році. Особливість Cypress — це те, що його команди запускаються всередині браузера, а не комунікують з браузером ззовні, як це роблять інші фреймворки.

Cypress може використовуватись для E2E-тестування, API-тестування, а також для Unit/Component-тестування. Окрім фреймворку, Cypress також пропонує своє комерційне рішення для запису, аналізу та паралелізації тестів у CI/CD — вебзастосунок Cypress Cloud.

Playwright test — це open-source фреймворк для E2E-тестування вебзастосунків, випущений Microsoft у 2020 році. Основна ціль Playwright — це надати одне API для різних браузерів, платформ, девайсів та мов програмування. Для комунікації з браузерами Playwright використовує Chrome DevTools Protocol, або схожі власні протоколи (для WebKit i Firefox браузерів).

Історія використання

Для нас усе почалось з потреби автоматизації тестування вебзастосунків. Ресурсу Automation QA не вистачало, щоб писати E2E-тести для вебу, тому, посінкавшись з командою, ми домовилися взяти цю задачу на себе, водночас тісно взаємодіючи з QA.

Коли справа дійшла до вибору інструменту, на той час очевидним фаворитом серед JavaScript-based технологій був Cypress. За даними npm trends, станом на липень 2023 Cypress мав п’ять мільйонів завантажень на тиждень проти 1,4 мільйонів у Playwright. Хоча, як можна помітити на графі, Playwright почав активно набирати популярність останні шість місяців.

Після невеликого дослідженя було обрано Cypress. За декілька місяців ми написали близько 90 E2E-тестів, які покривали основний функціонал вебзастосунку. Проте з часом та числом тестів, що збільшувалося, ми зіштовхнулися з ускладненням структури фреймворку для тестування і все більшою кількістю еджкейсів, з якими Cypress не міг впоратись.

Також розглядали питання переходу на платний план Cypress Cloud; безкоштовних 500 тестів на місяць, звичайно, не вистачало.

Однак перед тим, як остаточно комітитись до Cypress, ми вирішили оцінити альтернативи. Окрім Cypress з популярних JavaScript-інструментів для E2E-тестування були: Playwright, Puppeteer, WebdriverIO та NightWatch.

Ми вирішили спробувати Playwright, написавши декілька автотестів, і результат перевершив наші очікування. Playwright надав нам кращий developer experience, менше обмежень та логічно структурований фреймворк. Залишивши Playwright, за місяць нам вдалось переписати всі наявні E2E-тест на новому інструменті.

Далі я детально розповім про ключові переваги Playwright порівняно з Cypress, які ми виявили для себе, використовуючи обидва інструменти.

1. Підтримка браузерів та девайсів

Playwright має ширшу підтримку браузерів: він може запускати тести на браузерах, які використовують рушії Chromium, Firefox i WebKit. Cypress підтримує лише Chromium і Firefox.

До того ж, Playwright підтримує зручну симуляцію мобільних девайсів з-під коробки. Ця функція не обмежена зміною розміру екрану девайсу, зокрема автоматичною модифікацією таких параметрів, як userAgent, deviceScaleFactor, hasTouch та іншими, що дозволяє більш точно імітувати роботу на реальних пристроях.

Playwright надає приблизно 100 пресетів для різних девайсів та браузерів, які можна використати, вказавши їх у файл конфігурації.

Крім того, Playwright автоматично встановлює флаг isMobile залежно від обраного пресета, полегшуючи налаштування тестів для мобільних пристроїв.

Cypress обмежує вибір браузера для тестування, підтримуючи тільки Chromium i Firefox браузери, і не надає вбудованих пресетів. Також Cypress не надає зручного API для встановлення флагу isMobile у своїх тестах. Внаслідок цього доводиться реалізовувати цей функціонал самостійно через кастомні змінні середовища та налаштування своїх параметрів девайсу.

2. Швидкість

Відповідно до результатів бенчмарку, опублікованими на ChecklyHQ, швидкість Playwright перевищує Cypress більш ніж у три рази. Крім того, Playwright підтримує повну паралельність під час запуску тестів. Це означає, що на одній машині (на CI чи локально) можна одночасно виконувати декілька тестів в різних процесах (worker process).

Cypress, з іншого боку, підтримує тільки паралельність на різних машинах, дозволяючи виконувати лише один тест за раз на одному пристрої.

Для порівняння швидкості можемо використати тест-кейс, який перевіряє навігацію в хедері вебсайту. Реалізація тесту на Cypress:

Реалізація тесту на Playwright:

Швидкість виконання тесту з Cypress:

Швидкість виконання тесту з Playwright (пише, що два тести, тому що перший — це сетап):

Як і очікувалось, Playwright виконав тест майже втричі швидше!

3. Підтримка декількох вікон

Як зазначено на офіційному вебсайті з документацією, через свою архітектуру Cypress ніколи не зможе підтримувати декілька одночасно відкритих браузерів, вікон або вкладок. Playwright не має таких обмежень та без проблем навігує між вкладками, поп-апами та іншими вікнами.

Це дає можливість тестувати складні сценарії, як-от авторизація через сторонні сервіси, як Facebook, Google або Apple, які часто використовують поп-ап вікна для вводу облікових даних.

4. Читабельність коду

Cypress ламає сталі уявлення про асинхронний код у JavaScript та надає свою власну реалізацію асинхронності. Команди Cypress не виконуються відразу, вони записуються в чергу для виконання пізніше. Тому обʼєкти та результати виконання не повертаються, а передаються між командами.

Це означає, що значення не можуть бути безпосередньо збережені в стандартні JavaScript-змінні. Замість цього можна або використовувати синтаксис, схожий на promise через .then, або зберігати результат у так званих aliases, які можна буде пізніше дістати через cy.get.

Такий синтаксис додає більше вкладеностей у код та робить тести менш читабельним, особливо коли потрібно працювати з декількомами alias одночасно. Наприклад:

Playwright повністю підтримує вже знайомий нам синтаксис async / await. Це дозволяє зберігати результати виконання методів у звичайні змінні, значно спрощуючи структуру коду та покращуючи його читабельність тестів. Перепишемо цей тест на Playwright:

5. Типізація

Хоча Cypress і підтримує Typescript, його підхід до асинхронності та використанню aliases дає багато можливостей «вистрілити собі в ногу» типами. Коли ми дістаємо значення alias через cy.get, TypeScript не знає (і не може знати) тип цього значення.

Усе, що ми можемо зробити, це накинути цей тип через Generics до методу cy.get. Водночас цей тип може взагалі не відповідати дійсності, але про це ми дізнаємось тільки в рантаймі. Наприклад:

Тут ми беремо текст з елементу та записуємо його в alias text. Після цього дістаємо це значення та приписуємо йому хибний тип. TypeScript не видає нам помилку, але під час запуску тестів у cy.contains передасться undefined, не те, що ми хочемо.

У тестах Playwright немає таких проблем, оскільки підтримується синтаксис async / await та звичайні змінні, який TypeScript може розуміти. Це надає більш безпечну роботу з типами, знижуючи ризик несподіваних помилок у рантаймі. Переписавши минулий тест, використовуючи Playwright, отримаємо помилку TypeScript:

6. Додаткові інструменти

Окрім звичайного UI-режиму, який є і в Cypress, Playwright дає можливість запускати тести у режимі trace-on і debug.

У режимі trace-on Playwright збирає та зберігає детальну інформацію про виконання тестів: виклики команд та час їхнього виконання, скриншоти/снепшоти, власні логи Playwright та користувацькі консоль-логи, помилки, HTTP-запити та багато іншого.

Після завершення тесту буде відкрито звіт, в якому цю інформацію можна буде переглянути. Також цей звіт можна надіслати іншими у вигляді архіву.

У нашому випадку цей режим знадобився, щоб переглядати результати запуск тестів в CI/CD або розбиратись, чому вони провалились.

Режим debug дозволяє запустити тести в режимі відлагодження. Це дає можливість призупиняти тест або виконувати дії крок за кроком. У такому режимі зручно аналізувати стан системи в реальному часі під час виконання тесту.

Playwright також пропонує потужний codegen-інструмент, за допомогою якого можна згенерувати робочий тест, не написавши жодного рядка коду.

Ми просто відтворюємо дії користувача (клієкамо на кнопки, заповнюємо поля) у тестовому середовищі, а Playwright самостійно визначає необхідні локатори (вираз для ідентифікації елементів на сторінці) та автоматично генерує відповідний код.

7. Ціна

Якщо вам потрібно інтегрувати Cypress E2E-тести в CI/CD pipeline і/або реалізувати їхній паралельний запуск, ви маєте використовувати Cypress Cloud — комерційне рішення від Cypress, вебзастосунок для зберігання і аналізу тест-ранів.

Однак, як я вже згадував вище, безкоштовними є тільки 500 тест-кейсів в місяць; за все, що перевищує цей ліміт, доведеться платити. Платні підписки Cypress стартують з $67 у місяць.

З іншого боку, Playwright виступає як повністю безкоштовна, самодостатня альтернатива. Він дозволяє налаштувати CI/CD з паралельним виконання тестів без сторонніх сервіс та може генерувати HTML-звіти з результатами тест-ранів.

8. Обмеження Cypress

Один з моїх улюблених прикладів для порівняння Cypress i Playwright — це реалізація функції для зміни параметра prefers-color-scheme. Реалізація в Cypress:

Реалізація в Playwright:

Це хороший приклад того, що в Playwright прості речі робляться просто.

До списку проблемних кейсів Cypress ще можна додати його обмежену підтримку iframes і cross-origin тестування (перехід на сторінку з іншим доменом). Cypress не дозволяє обирати елементи всередині iframe напряму, тому потрібно використовувати обхідні шляхи, наприклад:

Щоб переходити між різними доменами потрібно використовувати команду cy.origin або вимкнути chromeWebSecurity в конфігурації Cypress.

Ще одне обмеження Cypress: не весь потрібний для нас функціонал підтримується з-під коробки. Для таких методів, як hover i tab потрібно встановлювати окремий пакет (cypress-real-events). Також для візуального тестування (порівняння скриншотів) потрібен окремий плагін.

Playwright, своєю чергою, підтримує весь потрібний функціонал, зокрема вищезгаданий, без сторонніх пакетів.

Висновок

Після використання обидох технологій у нашому кейсі Playwright показав себе як більш зручний, швидкий і досконалий інструмент, який можна легко адаптувати та масштабувати під свій лад. Його можна використовувати, як all-in-one пакет для E2E-тестування, без сторонніх плагінів або застосунків.

Також великою перевагою Playwright є широка підтримка браузерів, платформ, девайсів та різних мов програмування. Натомість рішення і обмеження Cypress не відповідали потребам нашої команди.

Сподіваюсь, мій досвід буде для вас корисним і краще допоможе у виборі правильної технології. Поділіться власним досвідом використання цих технологій у коментарях!

Рецентент статті — Геннадій Міщевський