Автор: Филип Рик (Filip Hric)
Оригинал статьи
Перевод: Ольга Алифанова

Test Replay приходит в Cypress

Возможно, вы слышали новости о Cypress. Версия 13, их крупнейший релиз, демонстрирует функцию Test Replay, позволяющую пройтись по прогону своих тестов. В ходе прогона все снимки DOM, сетевые вызовы и логи консоли будут записаны, позволяя глубоко анализировать прогон.

Cypress – решение с открытым исходным кодом, но за ним стоит компания. Премиум-сервис, который эта компания предлагает – это сервис Cypress Cloud, облегчающий параллелизацию тестов, тест-аналитика, а теперь еще и Test Replay.

Упрощение дебага

То, что эта опция выбрана для внедрения в Cypress – не случайность. Возможность анализа уже проведенного теста – это то, что необходимо всем тест-фреймворкам, однако места в верхней части лендинг-страницы она не удостоилась. Возможно, это связано с тем, что дебаг – не такая увлекательная часть тест-автоматизации. Забавно, что я опросил людей в социальных сетях, и более 60% ответили, что дебаг тестов занимает большую часть их рабочего времени.

Дебаг не считается чем-то увлекательным, но это, безусловно, рутинная задача как для разработчиков, так и для тестировщиков. Он не так эффектен, как автономное тестирование или ИИ-функции, но и в этой области делается многое. В Cypress неотъемлемой частью прогонов Test Replay был всегда (временная шкала в интерактивном режиме), а теперь он добрался и до Cypress Cloud. Команда Playwright выпустила просмотр трассировки в 2021 году, а затем построила вокруг него весь пользовательский интерфейс. В мире Vue Nuxt.js DevTools и Vue.js DevTools – жизненно важные части процесса разработки. То же верно для React и Angular.

Дебаг – это поиск знания

Все эти инструменты дают бесценную для процесса разработки возможность – возможность анализа.

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

Почему это так важно? Думайте о дебаге, как о процессе сбора информации. Поиск причины бага в ПО или нестабильности теста – это по сути поиск новых знаний о вашем приложении или тесте. Поэтому компании тратят время на создание отличного инструментария разработчика или средств просмотра сессии. Чем больше информации у разработчиков и тестировщиков, тем лучше они будут использовать фреймворк. Test Replay в Cypress больше расскажет вам о выполнении тестов. Инструменты разработчика Vue DevTools позволят лучше разобраться в жизненном цикле Vue.

Недостающее звено дебага

Однако тут есть недостающее звено. Как правило, эти инструменты дают вам информацию, ограниченную определенным контекстом. Test Replay в Cypress даст возможность заглянуть в запуск теста. Vue.js DevTools дадут информацию о состоянии приложения. Но что, если ваш тест нестабилен из-за состояния приложения? Что, если тесты неверно написаны, но снимки DOM этого не покажут, и нужно забираться глубже?

Тут очень помогает Replay.io. Этот инструмент полностью посвящен дебагу и поиску информации. Это браузер для тестировщиков и разработчиков, который записывает все, что происходит в вашем приложении. Он создает «интерактивную запись», комбинирующую видео со снимками DOM, сетевыми вызовами, логами консоли и исходным кодом приложения. Интерактивной эту запись делает возможность добавлять к исходному коду выводы на печать. По сути вы можете добавить к записи console.log() и следить, чем занималось ваше приложение в ходе съемки. Так как это браузер, им можно пользоваться в ходе разработки или прогонять в нем тесты. В результате вы увидите все – и что делает ваш тест, и чем занято ваше приложение.

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

Дебаг давно уже с нами, и никуда не собирается. Его упрощение – возможно, следующий большой прорыв.

Обсудить в форуме