Тест-раннер Cypress: проблемы и решения

• Cypress Cloud
• Расширенная фильтрация
• Live-фильтрация
• Safari
• Поддержка браузеров
• Синтетические события
• Ретраи

Cypress — вероятно один из лучших инструментов для E2E. Удобные ожидания, интуитивные API и отладка. Однако, как и у любого инструмента, у него есть свои ограничения. Некоторые из них являются намеренными решениями by design, в то время как другие мне кажутся упущениями, которые могли бы быть исправлены.

К счастью, мощное комьюнити Cypress разработало плагины для решения этих проблем, и набор лучших практик. Ниже я расскажу о семи фичах, которые я хотел бы видеть в Cypress, и о том, как можно решить описанные далее неудобства.

1. Параллельное выполнение тестов (без Cypress Cloud)

Cypress поддерживает параллельное выполнение тестов, но только при помощи облачного сервиса Cypress Cloud. Cypress Cloud — это фантастическая платная фича с визуальным дашбордом для отладки, аналитики и контроля общего состояния тестов, но параллелизация-как-сервис уже кажется ненужной в современном тестировании. Учитывая, что крупные конкуренты предлагают эту фичу «из коробки», и принимая во внимание, насколько важно параллельное выполнение тестов, это ограничение является серьезным препятствием для многих команд. К счастью, существуют решения, позволяющие добиться параллельного выполнения тестов без Cloud.

Решение:

• cypress-split — прост в установке и использовании. Часто обновляется.
• cypress-parallel — похож на split, но обновляется реже.

2. Расширенная фильтрация тестов

Нативные команды Cypress CLI позволяют фильтровать тесты только по файлам спецификаций, то есть нет встроенного способа отметить или отфильтровать тесты на основе названия теста или меток типа @smoke или @regression. Это проблема для тех, кто хочет избежать утомляющей задачи со спецификациями и группировкой папок. Кроме того, может понадобиться выполнять тестовые наборы по одному spec-файлу на разных этапах жизненного цикла разработки. Для этого опять же существуют плагины.

А именно:

• Плагин @cypress/grep, чтобы включить фильтрацию по заголовкам или тегам
• Плагин cypress-grep. Аналогичен предыдущему @cypress/grep, но чаще обновляется.
• Плагин cypress-cli-select, чтобы запускать нужные тесты по файлам, именам или тегам в командной строке. Создан на основе cypress-grep.

3. Фильтрация в тест-раннере (Live Filtering)

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

Решения:

• Плагин cypress-plugin-grep-boxes, чтобы запускать фильтрацию в тест-раннере без изменения кода. Плагин на основе cypress-grep.
• Плагин cypress-plugin-last-failed, позволяющий повторно запустить последний упавший тест (или несколько). Также поддерживается CLI. Создан на основе cypress-grep.

4. Официальная поддержка Safari/WebKit

Cypress официально поддерживает Chrome, Edge и Firefox, но не поддерживает Safari/WebKit, что затрудняет тестирование приложений в экосистеме Apple. Однако, несмотря на отсутствие официальной поддержки, существует экспериментальная, на основе плагина playwright-webkit.

Отличный вариант, по крайней мере лучше чем ничего. Но есть несколько известных проблем, особенно в случае сложных тестовых наборов. Например, отсутствие поддержки cy.origin.

Решения:

• Установите playwright-webkit и добавьте experimentalWebKitSupport: true в конфигурационный файл. Запустите Cypress как обычно, с параметром --browser webkit cli.
• Молитесь, чтобы не нужно было тестировать на Safari… шучу, но иногда нужны альтернативные инструменты тестирования.

5. Поддержка браузеров

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

Это:

• cy.request для эмуляции получения запросов от другого пользователя.
• @cypress/puppeteer для переключения на новую вкладку
• Или можно валидировать новую вкладку, не перенаправляя на нее по-настоящему.

6. Взаимодействие с реальными пользователями

Cypress в основном полагается на синтетические события для взаимодействия с DOM, которые, как правило, позволяют проверить большинство обычных пользовательских взаимодействий. Однако некоторые события, такие как симуляция состояния наведения курсора и действия drag-and-drop, не так легко реализовать с помощью этого дефолтного поведения. И комьюнити разработало несколько полезных плагинов.

Это:

• Плагин cypress-real-events, чтобы вызывать реальные, нативные события, такие как realHover и realClick. Работает только для браузеров на базе хрома.
• Для drag and drop используйте плагин cypress-drag-drop или вручную отправляйте события mousedown/mousemove/mouseup.

7. Логика ретраев

Cypress имеет фантастическую встроенную фичу повтора (ретрая) утверждений, но пока не поддерживает ретраи для действий, не связанных с запросами, таких как команды. Есть несколько решений для расширения стандартной функциональности Cypress, среди них отличный плагин.

Решения:

• Используйте плагин cypress-wait-until для повтора попыток выполнения логики, не связанной с запросами. Добавляет ожидания буквально ко всему.
• Плагин cypress-recurse для повторного выполнения кастомных команд до тех пор, пока предикатная функция не вернет true. Еще одна отличная альтернатива.
• Преобразуйте вашу кастомную команду в кастомный запрос, который поддерживает возможность извлечения. Cypress v12 и выше, не рекомендуется для всех команд.

Резюме

Cypress является невероятно мощным инструментом, но у него есть ограничения. К счастью, сильное комьюнити и экосистема плагинов обеспечивают решения для большинства недостающих функций. Эти решения требуют лишь немного времени для поиска и настройки. Надеюсь, что все эти плагины будут поддерживаться нативно.

Medium