Сравнение тестовых фреймворков: Cypress vs Playwright vs Selenium

Сегодня мы сравним основные фреймворки: их плюсы и минусы, поделимся своим опытом ^[1] работы с каждым и поможем понять, какой же лучше выбрать для своего проекта?  

Тестировать вручную увлекательно только в первый раз. Но потом это все больше превращается в рутину, ты устаешь от однообразия, а взгляд начинает замыливаться. Это естественно для человека. Что же с этим можно делать? Можно автоматизировать.

E2E — это тестирование сквозного бизнес-процесса глазами пользователя: от входа в систему до финального действия. В этой статье мы сравним три фреймворка — Selenium, Cypress и Playwright — на основе личного опыта и технических особенностей, чтобы помочь вам сделать осознанный выбор.
 
Зачем автоматизировать UI и почему не мобилку? 

Почему UI? Веб-интерфейсы — основной канал взаимодействия для большинства корпоративных и B2C-продуктов. Их стабильность критически важна.

А почему не мобильные приложения? Автоматизация мобильного тестирования — это дорого. Нужен «зоопарк» реальных устройств или сложные симуляторы, поддержка двух платформ (iOS/Android), а стоимость и сложность поддержки часто перевешивают выгоду. Для многих проектов ручное мобильное тестирование остаётся оптимальным. Поэтому сосредоточимся на вебе.

Selenium

Самый популярный фреймворк. Это как конструктор. То есть огромная система, которую ты сам строишь и сам делаешь как надо. Единственная ее проблема в том, что поддерживать и настраивать ее довольно непросто. И для того, чтобы она работала, нам нужны драйвера (Selenium WebDriver), которые нужно периодически обновлять. Конечно, это можно обойти с помощью драйв-менеджера, но это тоже требует определенных навыков.
 
Сейчас очень популярны два фреймворка: Cypress и Playwright

Когда первый раз видишь Cypress, все, что можно сказать – это прикольно. У него очень интересная поддержка тестов и разработка новых, все визуализируется. И ничего не надо устанавливать, все из «коробки». Правда, к сожалению, он поддерживает только JavaScript и TypeScript. В основном используется для тестирования фронтенд-разработчиками. В момент изменения в тестах он тут же прогоняется заново. Есть встроенная отладка и Time Travel.
 
 Playwright – тоже классный фреймворк. Он активно развивается, и у него есть огромный плюс – поддерживает несколько браузеров одновременно: Chromium, Firefox, WebKit. Также он поддерживает кроссплатформенность, можно писать не только на TypeScript и JavaScript, но и на Python, Java и C#. Отлично устанавливается из коробки.
 
Давайте сравним эти два фреймворка.

Cypress:

• Ограниченная поддержка браузеров (Chrome, Firefox, Edge, Electron).

• Нет поддержки Safari.

Playwright:

• Полная поддержка Chromium, Firefox, WebKit (Safari).

• Возможность тестирования на мобильных устройствах. Можно подстроить под разрешение мобильного устройства.

 Что же у нас в плане программирования? 

Cypress у нас только JavaScript, TypeScript, а у Playwright поддержка разных языков. Как мы видим на данном примере, колоссальной разницы в объеме кода для маленькой страницы нет.
 
Если мы посмотрим на эти тесты внимательно, что они делают? Они просто посещают какой-то сайт, вводят логин, пароль и радуются, что зашли. На данном этапе все хорошо, но, если расширять количество тестов, рано или поздно мы наткнемся на необходимость перехода к системе PageObject, и не будет особой разницы, какой фреймворк выбрать. В любом случае мы получим довольно ветвистое дерево папок.

Следующий момент – производительность.  
У Cypress есть огромная проблема: ограниченность в параллельности выполнения тестов. Он не умеет из коробки параллелить тесты. Ее можно обойти, если  запускать два теста в разных процессах или разбить тест на папочки и запускать их. С этим может помочь Sorry Cypress, о котором поговорим чуть позже.

А как выглядит отладка? 

Вот это особенно восхищает в Cypress. У нас есть шаги и картинки. Мы можем на каждый шаг посмотреть картинку и оценить, что именно изменилось на странице в тот или иной момент теста. Можем путешествовать по времени и смотреть, что произошло на странице в конкретное время. Например, отследить, когда у нас не загрузилась какой-то элемент.
 
Как выглядит Sorry Cypress? 

Мы все разворачиваем на сервере, и специальный директор выполняет процессы. И по API результаты наших отчетов мы видим на красивом UI. Также, конечно, нельзя не сказать про Cypress Dashboard. Проблема в том, что мы отдаем обрабатывать наши тесты стороннему сервису. Это весьма небезопасно, и не приветствуется в крупных компаниях, а также при работе в финансовом секторе.

Как обстоят дела с производительностью Playwright?  Он умеет автоматизировать параллельность прямо из коробки. Также, так как он поддерживает несколько браузеров, мы получаем высокую производительность.

Отчеты 

Если мы рассмотрим отладку с Time Travel, то увидим, что пошли на этот шаг и выбрали нужный элемент. Он делает скриншоты, по ним можно пройти, а также смотреть в процессе реального времени, как это выглядит.
 
У Playwright симпатичные отчеты. Мы видим, что здесь ссылка идет на конкретную строчку кода, что значительно облегчает отладку. Также возможно сделать видео с тем, как проходит тест.

Еще один пункт, по которому можем сравнить фреймворки – интеграция с CI/CD 

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

Преимущества Cypress

• Простота настройки и использования.

• Встроенная отладка и Time Travel.

• Активное сообщество и документация.

Недостатки Cypress

• Ограниченная поддержка браузеров.

• Нет поддержки Safari и мобильных устройств.

• Ограниченная параллельность выполнения тестов.

Преимущества Playwright

• Поддержка нескольких браузеров и платформ.

• Высокая производительность и параллельное выполнение тестов.

• Поддержка нескольких языков программирования.

Недостатки Playwright

• Более сложная настройка по сравнению с Cypress.

• Меньше сообщество и документация (по сравнению с Cypress).

Возникает вопрос, что же выбрать, Cypress или Playwright? А можно всех обхитрить и выбрать Cucumber. Да, он еще есть, но уже забыт. Кажется, он не слишком часто используется. Почему бы не выбрать его? Давайте это обсудим!
 
 Преимущества:

• Поддержка BDD (тесты на естественном языке).

• Мультиязычность.

• Улучшение взаимодействия между командами.

Недостатки:

• Требует интеграции с другими инструментами (например, Selenium).

• Медленнее по сравнению с Playwright и Cypress.

Но мы должны знать, что это как подводное чудовище, у которого наверху маленький котик, а внизу огромные жуткие щупальца. За этим симпатичным котом скрывается страшенный словарь. На каждое слово, которое нам нужно, приходиться писать нормальные тесты, например, с Selenium.
 
Какие же у нас есть тренды в End-to-End тестировании? 

Их три: рост популярности Playwright благодаря кроссплатформенности, увеличение роли искусственного интеллекта ^[2] в тестировании и интеграция с облачными платформами для выполнения тестов.

Какой же фреймворк стоит выбрать?

Cucumber — лучший выбор для BDD и проектов с участием бизнес-аналитиков.
 
Playwright — идеален для кросс-браузерного тестирования и мультиязычных проектов.
 
Cypress — подходит для быстрого старта и проектов на JavaScript/TypeScript.
 
Выбор фреймворка за вами. Главное помнить, что не стоит плодить зоопарк языков и фреймворков в компании. Тогда у вас всегда будет возможность спросить совета или возможность проревьюить ваш код!

А каким фреймворком пользуетесь вы и почему? С какими подводными камнями сталкивались?