UI режим
UI режим — это специальное приложение, которое предоставляет интерактивный доступ к запуску, обновлению и просмотру историй, а также разработке основного функционала ровно в таком же формате, что и в обычном браузере.
Общий интерфейс выглядит следующим образом:
Навигатор
В левой части расположен навигатор, с помощью которого можно просмотреть список всех историй:
Превью
При клике на историю открывается интерактивный режим предпросмотра:
Во время предпросмотра storyshots выполняет следующие действия:
- Подготавливает внешние источники данных с помощью функции
arrange. - Запускает приложение и отображает UI в зоне preview.
- Взаимодействует с интерфейсом в автоматическом режиме (функция
act).
Таким образом, состояние приложения автоматически подготавливается, предоставляя разработчику готовое окружение для работы.
storyshots позволяет проводить разработку и отладку, используя инструменты браузера, не выходя из режима написания
тестов.
Чтобы перезапустить предпросмотр, достаточно кликнуть на выбранную историю ещё раз.
Запуск
При наведении курсора на историю или группу историй появляются дополнительные действия, например запуск тестового сценария:
После запуска формируется актуальный слепок, и отображается его статус относительно эталона:
При первом запуске теста слепок помечается как "новый" (синий кружок).
Журнал
Журнал — это часть слепка поведения. Его можно просмотреть, кликнув на пункт "Records":
Кнопка "Accept" в верхнем правом углу позволяет принять слепок журнала, сделав его частью эталона:
Принятый журнал помечается зелёной галочкой.
Снимки
Снимки экранов составляют основную часть слепка поведения приложения. Чтобы просмотреть конкретный снимок, выберите его название в списке:
"FINAL" — это название по умолчанию для снимков, которые создаются автоматически после завершения действий в истории.
Кнопка "Accept" позволяет принять снимок как эталон, подтверждая текущее поведение приложения как корректное.
История считается пройденной, только если весь её слепок совпадает с эталоном.
Журналы и снимки можно принимать по отдельности.
Массовые действия
storyshots позволяет запускать несколько историй одновременно:
После выполнения формируются слепки, которые можно принять все сразу:
Результат:
Изменение журнала
Рассмотрим сценарий регресса. Изначально журнал выглядит так:
Удалим вызов из кода:
externals.analytics.log('worked hard');
// externals.analytics.log('worked hard');
После перезапуска теста storyshots обнаружил разницу между актуальным журналом и эталоном. Красный крестик указывает на несоответствие.
Откроем журнал:
Здесь видна разница между актуальным и эталонным поведением. Кнопка "Accept" позволяет принять текущий слепок как корректный.
Изменение снимков
Рассмотрим историю с промежуточным снимком:
Изменим текст на странице:
Account Balance (RUB)
My balance (RUB)
После перезапуска:
Каждый снимок содержит разницу. Пример:
Слева — эталонный снимок (красная обводка), справа — актуальный (зелёная обводка).
Текст снизу обозначает кол-во пикселей которые оказались разными. Это может быть полезно для более тонкой конфигурации алгоритма сравнения.
Для более явного подчёркивания разницы также доступен просмотр карты изменений:
Ошибки
Если сгенерировать слепок не удаётся, например, из-за отсутствия элемента, история помечается восклицательным знаком:
Чтобы узнать подробности, кликните на статус в левом верхнем углу:
Откроется панель с деталями ошибки:
storyshots использует библиотеку playwright для взаимодействия с интерфейсом.
Вкладка "Failures" содержит список историй, слепки которых отличаются от эталонных.
Локатор
Для упрощения работы с селекторами используется инструмент "Локатор". Он находится на панели инструментов (иконка глаза):
При активации и наведении на элемент отображается рекомендуемый селектор:
При клике на элемент в режиме "локатор" его селектор будет скопирован в буфер обмена.
Выбор устройства
Если storyshots настроен для нескольких устройств, можно выбрать устройство через панель конфигурации:
Панель выглядит так:
Выберите устройство, например, "mobile":
Теперь слепки будут формироваться для выбранного устройства:
Полный запуск
Истории можно запустить сразу для нескольких устройств одновременно. Для этого их необходимо выбрать в панели конфигурации:
Результат:
Чем больше устройств используется, тем быстрее будет расти время выполнения тестов на проекте.
Эмуляция
Режим предпросмотра по умолчанию отображает приложение в соответствии с размером рабочего окна:
Чтобы включить эмуляцию, выберите нужное устройство в пункте "Device to emulate". Теперь рабочая область будет автоматически подстроена под viewport выбранного устройства:
storyshots не эмулирует устройство полностью, а только устанавливает заданные размеры экрана.