Автотесты на Cypress Первое впечатление и возникшие проблемы Дмитрий Кочергин, ведущий разработчик программного обеспечения Luxoft Прежде всего хочу отметить, что я не профессиональный автотестер, а Java-программист. Но однажды я получил задание сделать дым-тесты для базовой проверки основных функций приложения, которое недавно было без предупреждения сломано изменением API зависимого сервиса.
Статья будет интересна всем, кто интересовался автотестированием с нуля на JS, но боялся спросить.
Начну с того, что я никогда ничего не читал об автотестировании.
Основное предубеждение было, что автотесты — это сложно, потому что по отзывам всё равно придётся этот Selenium настраивать.
Плюс нужно учить XPath и PageObject, чего совсем не хотелось делать.
Быстрый поиск в Интернете дал более молодые и перспективные инструменты: ВебДрайвер.
IO , Кукловод (а теперь Драматург лучше) и Кипарис.
Я выбрал последнее, купившись на красивые обещания и несколько комментариев с холиваров о лучших инструментах для автотестов.
Вот как выглядит окно браузера запущенного теста.
Слева — выполненные тестовые команды и статус, справа — вид приложения во время выполнения теста: 
Вот как выглядит тестовый код (в Cypress весь код на JS, а селекторы — обычные CSS-селекторы):
Во время выполнения это выглядит так: 
Пока я искал инструмент для автотестов — в голове у меня была картинка, что тесты можно создавать прямо в браузере, чтобы я мог просто «нажимать на запись скрипта» — система записывала мои действия (CSS-селекторы элементов, которые Я нажал).
Затем я смотрю на сгенерированный тест, при необходимости корректирую селекторы и сохраняю его в Test Suite. ЭИКС… Сказка тогда оказалась недосягаемой и таких инструментов я не нашел (может кто в комментариях подскажет правильный путь).
Но что подкупило в Cypress, так это то, что тесты выполняются в реальном браузере, и вы даже можете исследовать DOM параллельно с выполнением теста, используя ваши любимые инструменты разработчика Chrome (если, например, селектор не сработал, вы можете откройте консоль и сразу увидите причину при выполнении теста).
Из остальных важных для меня параметров мне критически не хотелось тратить много времени ни на написание (опять же про написание теста в браузере), ни на поддержку тестов.
Для моих целей этого было вполне достаточно.
Для информации o Cypress: с момента первого открытия сайта Cypress до первого теста, зашедшего в приложение - прошел 1 час.
Итак, Cypress, первая страница фреймворка сообщает нам, что это фреймворк сквозного тестирования JavaScript ( кипарис.
io ).
Далее быстро читаем документацию, она действительно полная, и практически на все вопросы можно найти ответы (все остальное я быстро нашел на StackOverflow): 
Далее по списку возможностей с сайта:
- Путешествие во времени — каждый шаг выполнения теста в консоли — можно нажать и вернуть в определенное состояние всего приложения в прошлом, которое отображается прямо в браузере.
И это не просто записанное изображение, а настоящий DOM, вы можете откатиться и изучить страницу через инструменты разработчика Chrome.
- Перезагрузки в реальном времени — как и во всей современной JS-теме, были изменены исходники — в тот же момент тест перезапускался в браузере (горячая перезагрузка).
- Автоматическое ожидание — многие тестовые инструкции асинхронны, например переход на страницу, а сам Cypress автоматически ждет завершения загрузки.
За исключением, конечно, случаев, когда приложение обращается к серверу.
- Управление сетевым трафиком.
Cypress может перехватывать/просматривать вызовы сервера и может быть проинструктирован ждать ответа от сервера.
- Снимки экрана и видео.
Во время выполнения теста Cypress записывает видео экрана браузера (MP4) вместе с инструкциями в окне.
Сначала я не знал, что можно дождаться завершения XHR-запросов к серверу, поэтому вместо этого вставил таймауты, и тесты случайно вылетали.
Исправленный.
Потом каждый раз, когда работала Hot Reload, мне постоянно приходилось перезагружать весь Cypress, потому что я не был уверен, что мои изменения применились.
Оказалось, что в моей IDE (IntelliJ IDEA) есть такие нехорошие галочки, которые к тому же включены по умолчанию, из-за чего получается, что сохранение файла - это не сохранение, а эвентуальное сохранение.
Следующая проблема заключалась в том, что мое приложение использовало выборку окна для запросов к серверу, а Cypress видит только запросы XHR. Помог грязный хак из StackOverflow (я так понимаю, метод fetch удален из окна, чтобы браузер вместо fetch делал возврат к XHR): 
Далее возникла проблема эмуляции мобильного браузера; переписать пользовательский агент в тестовом коде было просто невозможно, но в отдельном специальном файле всё работало.
Далее идет решение проблемы CORS: 
Потом закачка файлов, сходу не получилось, стандартные решения не сработали, но помогла библиотека cypress-file-upload: 
Единственная проблема, которую я не смог решить, — это воспроизводимость теста.
А именно стабильные и идентичные исходные данные для запуска теста (фикстуры), это уже более конфигурационная задача, не Cypress, но пока нерешенная.
В результате Cypress выглядит отличным инструментом для внедрения в проект автоматизированного тестирования, если:
- Иметь знание JS
- Нет необходимости тестировать во всех браузерах, начиная с IE6 (сейчас Cypress поддерживает Chrome, Chromium, Edge, Electron, Firefox).
Здесь обсуждение темы .
Но могу сказать, что год назад, когда я начал работать с Cypress, он поддерживал только последние версии Chrome и Electron для запусков без UI.
- Хотите быстро сделать тесты и забыть о них, пока кто-нибудь не сломает приложение :)
-
Запуск В Стиле Drive
19 Oct, 24 -
Использование Sqlite Во Flutter
19 Oct, 24 -
Интернет Продолжает Расти
19 Oct, 24
