Независимо от того, используете ли вы Vue.js, React или Angular, Storybook не предлагает точек расширения для интеграции со сторонними платформами, такими как Applitools. Команда Applitools обошла это ограничение, предоставив Applitools Eyes Storybook SDK.
Поведение этого SDK заключается в том, что как только вы запустите его локально на своем компьютере, он сначала начнет собирать все истории в приложении, запускать их все через механизм Storybook, генерировать снимки DOM для каждой истории и, наконец, загружать эти снимки. на сервер Applitools Eyes. Вот изображение этого потока:
На сервере запускаются тесты и создается фактический моментальный снимок изображения. Каждый моментальный снимок сравнивается с базовым снимком (если он существует), и результаты отображаются на панели управления диспетчером тестирования.
Этот вид интеграции обеспечивает беспрепятственный опыт написания рассказов для сборника рассказов. Ничего не меняется в том, как вы пишете свои приложения Vue.
Теперь давайте продолжим и начнем кодировать…
Пошаговое руководство
Для этой демонстрации визуального тестирования приложения Vue.js с помощью Storybook и Applitools я выбрал пример TodoMVC, опубликованный в составе проектов примеры на веб-сайте Vue JS.
Давайте выполним шаги, чтобы запустить приложение TodoMVC и добавить несколько историй из сборника рассказов.
Шаг 1. Установите Vue CLI 3 на свой компьютер, выполнив следующую команду:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
После установки Vue CLI вы можете приступить к созданию приложения Vue JS.
Шаг 2. Клонируйте приложение Vue.js TodoApp локально, выполнив следующую команду:
клон git [email protected]:bhaidar/todomvc-vue.git
Шаг 3. Установите все зависимости npm. Введите следующую команду:
yarn
Шаг 4.Проверьте ветку Vue.js/Storybook. Входить:
git checkout --track origin/vuejs-testing-with-storybook
Шаг 5. Запустите приложение.
yarn serve
И вы должны увидеть что-то вроде этого:
Итак, это работает!
Шаг 6. Чтобы добавить пакет Storybook в приложение Vue.js, введите следующую команду:
npx -p @storybook/cli sb init --type vue
Команда позаботится об автоматической установке и настройке папок и файлов Storybook для вашего проекта. Он даже добавляет скрипт NPM в файл Package.json, чтобы упростить запуск рассказов из сборника рассказов.
Есть два способа настроить Storybook в приложении Vue.js. В нашем случае мы выбрали автоматическую настройку. Вы можете прочитать больше о режимах настройки в Storybook for Vue.
В этом проекте нет необходимости устанавливать Storybook. Я уже позаботился об этом для вас.
Шаг 7. Запустите истории по умолчанию, добавленные Storybook, введя следующую команду:
yarn storybook
Он открывает панель инструментов сборника рассказов, чтобы начать запускать свои истории.
Шаг 8. Рефакторинг кода и извлечение нового компонента Todo. В целом, и особенно при написании рассказов в сборнике рассказов, рекомендуется структурировать свой код в виде набора компонентов, которые могут существовать сами по себе. Проверьте новый компонент Todo в репозитории:
Шаг 9. Добавьте новую историю из сборника рассказов, чтобы протестировать компонент Todo. Найдите файл «./stories/index.stories.js» и замените его содержимое следующим:
Код добавляет историю по умолчанию для проверки состояния компонента Todo. При определении историй Storybook для Vue.js функция обратного вызова функции stories.add() должна возвращать экземпляр Vue. Думайте об этом экземпляре Vue как о хост-компоненте с шаблоном для запуска компонента Todo. Вы можете настроить этот хост-экземпляр Vue так, как хотите, используя стандартные методы и свойства компонента Vue.
Следует отметить одну важную вещь в отношении того, как рассказ Storybook взаимодействует с компонентом Vue.js. Обратите внимание на определение кода метода данных (), который определен в хост-экземпляре Vue? Поскольку компонент Todo ожидает два свойства, вам необходимо определить эти два свойства внутри метода data() и прикрепить эти свойства к компоненту Todo внутри HTML-шаблона.
Теперь, когда история готова, давайте запустим ее в Storybook, введя следующую команду:
yarn storybook
Шаг 10. Установите пакет NPM Applitools Eyes SDK for Storybook, введя следующую команду:
npm i @applitools/eyes-рассказы
Шаг 11. Запустите его с помощью команды:
npx глаза-рассказы
Убедитесь, что вы получили Applitool API Key и сохраните его на своем компьютере. Полное руководство по установке и запуску Applitools Storybook SDK для Angular можно найти в этой статье: Учебное пособие по Storybook Angular.
Команда просто открывает истории Storybook, запускает их одну за другой, а затем отправляет все снимки DOM на сервер Applitools Ultrafast Grid.
Если вы расширите одиночный тестовый прогон, вы получите следующий результат:
Вы видите, как просто добавить и настроить Applitools Storybook SDK в существующее приложение Vue.js.
Давайте продолжим, внесем визуальные изменения и еще раз запустим наши тесты пользовательского интерфейса.
Шаг 12. Измените цвет фона в заголовке основного поля ввода на странице.
Откройте компонент /src/components/Todo.vue и примените это изменение:
Шаг 13. Еще раз запустите Eyes Storybook SDK с помощью этой команды::
npx eyes-storybook
Глядя на результаты теста в диспетчере тестов, вы можете видеть, как Applitools фиксирует визуальную разницу и помечает результаты теста как Несоответствие.
До сих пор мы запускали Applitools с Storybook, используя настройки конфигурации теста по умолчанию. Давайте посмотрим, как мы можем настроить тестовые конфигурации Applitools Eyes Storybook и запускать наши истории Storybook с различными пользовательскими окнами просмотра.
Визуальные тесты пользовательского интерфейса с пользовательскими окнами просмотра
Принимая во внимание, что визуальное тестирование Vue.js с помощью Storybook и Applitools не требует какой-либо настройки, Applitools автоматически выводит важные тестовые конфигурации. Однако, если вы хотите поиграть с тестовой конфигурацией, у вас есть две опции:
- Переменные среды
- Файл applitools.config.js
Для этой демонстрации я буду использовать файл applitools.config.js. Полный список тестовой конфигурации см. в разделе Расширенная конфигурация в репозитории @applitools/eyes-storybook на Github.
Когда вы используете Applitools с Storybook, нет необходимости добавлять какие-либо специальные команды Applitools или задавать тестовую конфигурацию, чтобы включить визуальное тестирование.
В моей предыдущей статье Как я провел 100 тестов пользовательского интерфейса всего за 20 секунд вы узнали, что Applitools Eyes SDK запускает истории Storybook, делает снимки каждой из них и отправляет снимки DOM на внутренний сервер Ultrafast Grid. Он сохраняет тестовый прогон с тестовой конфигурацией по умолчанию.
Шаг 1. Добавьте новый файл JavaScript в корень вашего приложения. Дайте ему имя applitools.config.js.
Шаг 2. Добавьте параметры конфигурации appName и batchName следующим образом:
Шаг 3. Запустите тестовый пример в двух разных браузерах с двумя разными окнами просмотра, добавив следующее:
Следовательно, Ultrafast Grid запускает набор экземпляров для каждого из браузеров и одновременно запускает тесты. При первом запуске этих тестов мы создаем базовые изображения для сравнения во время последующих тестовых прогонов.
Шаг 4. Сохраните и снова запустите тесты, введя следующую команду:
npx eyes-storybook
Шаг 5. Проверьте выполнение теста в Applitools Test Manager.
Я переключил представление Test Manager на представление Batch Details.
Обратите внимание, что Applitools Ultrafast Grid дважды запускал ваши тесты в соответствии с приведенным выше файлом конфигурации теста. В приведенной выше тестовой конфигурации указаны два разных браузера с двумя разными окнами просмотра. Это означает, что Ultrafast Grid запускает каждый тест дважды — по одному разу для каждого набора конфигураций браузера.
Запуск этого теста дает время выполнения всего две секунды! Чтобы было ясно, это то, что мы потратили на рендеринг базовых изображений после загрузки снимков DOM. Тем не менее, это очень быстро.
Обязанностью Ultrafast Grid является анализ файла конфигурации теста, прикрепленного к тесту, и параллельное создание нескольких экземпляров браузера для эффективной обработки теста.
Настройка параллелизма
Applitools Eyes SDK дает тестировщикам, а также разработчикам преимущество в настройке многих аспектов параметров конфигурации теста, включая поле Concurrency. Установив значение этого поля, вы можете дать указание компоненту Ultrafast Grid использовать определенное количество параллельных потоков или процессов для запуска ваших визуальных тестов пользовательского интерфейса.
Давайте добавим больше пользовательских видовых экранов в настройки конфигурации теста, а также установим для поля Concurrency значение 100 и посмотрим на результаты.
Шаг 1. Замените содержимое файла applitools.config.js следующей конфигурацией:
В этой тестовой конфигурации мы проводим 20 тестов с 10 уникальными портами просмотра в двух основных браузерах: Firefox и Google Chrome.
Шаг 2. Сохраните и запустите тесты, введя следующую команду:
npx eyes-storybook
В течение этого времени Eyes Storybook SDK считывает все истории Storybook в приложении, запускает их одну за другой с помощью механизма Storybook, создает моментальный снимок DOM для каждого теста и, наконец, загружает результаты на сервер Eyes. В этот момент сервер Eyes будет запускать каждый моментальный снимок DOM, отображать моментальный снимок изображения и сохранять его как базовый снимок.
Eyes SDK/Server потребовалось всего 15 секунд для выполнения всех вышеперечисленных задач, создания базовых показателей и представления результатов на панели управления Applitools Test Manager для всего пакета из 20 тестовых прогонов для одной истории Storybook.
Шаг 3. Проверьте выполнение теста в Applitools Test Manager.
Я переключил представление Test Manager на представление Batch Summary.
Давайте посмотрим на мощь сервера Eyes при выполнении цикла регрессионного тестирования.
Шаг 4. Измените цвет фона в заголовке основного поля ввода на странице.
Откройте компонент /src/components/Todo.vue и примените это изменение:
Шаг 5. Еще раз запустите Eyes Storybook SDK с помощью этой команды::
npx eyes-storybook
И снова Eyes SDK/Server потребовалось всего 17 секунд для загрузки снимка DOM, запуска всего пакета визуальных тестов пользовательского интерфейса и отображения результатов на панели управления Applitools Test Manager.
Шаг 6. Проверьте выполнение теста в Applitools Test Manager.
Диспетчер тестирования выделяет различия между базовым снимком состояния и текущим выполнением теста и отображает значок несоответствия рядом со снимками.
В этот момент вы можете либо принять новые изменения и сделать их новыми базовыми показателями, либо отклонить их и сохранить старые базовые показатели.
Опять же, для анализа файла конфигурации теста и настройки среды тестирования по мере необходимости требуется мощность Ultrafast Grid.
В заключении
Независимо от того, разрабатываете ли вы Angular, Vue.js, React или любую другую технологию по своему выбору, Applitools поможет вам выполнить тесты визуального пользовательского интерфейса, предоставив богатый набор SDK для многих существующих тестовых сред!
Удачного тестирования!
Узнайте больше о Applitools. Настройте живую демонстрацию у нас или, если вы любите делать все сами, зарегистрируйте бесплатную учетную запись Applitools и следуйте одному из наших руководств.
Больше чтения для вас
Вот еще несколько связанных сообщений, которые вы, возможно, захотите прочитать.
DevOps и качество в эпоху CI-CD: взгляд изнутри на то, как это делает Microsoft
Радость тестирования в продакшене — с экспертом Эмбер Рейс
Как визуально тестировать компоненты React с помощью нашего SDK для сборника рассказов
Хотите стать рок-звездой в тестировании? А деньги и призы? Зарегистрируйтесь на наш хакатон Applitools Visual AI Rockstar. "Нажмите сюда, чтобы узнать больше.
Первоначально опубликовано в Блоге Applitools.
