Внедрите автоматическое визуальное тестирование пользовательского интерфейса.

В этом посте я покажу вам, как проводить визуальное тестирование с помощью reg-suit.

Ваше приложение может иметь бесчисленное количество различных состояний компонентов и макетов. Тогда будет сложно найти каждое изменение пользовательского интерфейса, и вы потеряете представление о том, как они должны выглядеть.

Чтобы избежать этого, для вашего рабочего процесса необходимо автоматическое тестирование пользовательского интерфейса.

reg-suit — инструмент визуального тестирования, позволяющий:

  • Сравните изменения пользовательского интерфейса с предыдущим
  • Проверьте отчет, сгенерированный HTML
  • Получайте уведомления в PR во время обслуживания CI, если пользовательский интерфейс изменился

Пример репо

Вот ссылка на окончательную кодовую базу:



manakuro/reg-suit-example
github.com



Содержание

  • Настроить приложение React
  • Настроить сборник рассказов
  • Настроить историю
  • Настроить рег-костюм
  • Настроить CircleCI

Настройте приложение React

Чтобы быстро начать, мы используем create-react-app для настройки приложения React:

npx create-react-app reg-suit-app --template typescript

После установки запустите сервер разработки, выполнив эту команду:

yarn start

Вы увидите страницу приветствия:

Настроить сборник рассказов

Далее мы настроим Storybook.

Чтобы установить Storybook, запустите CLI в корне проекта:

npx sb init

После установки запустите сервер:

yarn storybook

И вы увидите страницу с некоторыми примерами, например:

Настроить историю

storycap — это инструмент, который сканирует ваши файлы Storybook и делает снимки экрана. При использовании reg-suit скриншоты нужны для сравнения снимков пользовательского интерфейса.

Установите его:

yarn add -D storycap

И запустите сервер Storybook:

yarn storybook

Другой терминал, запускаем сторикап:

npx storycap http://localhost:6006

После этого изображения компонентов сборника рассказов создаются в папке __screenshots__.

Вы можете выполнить процесс с опцией --serverCmd следующим образом:

npx storycap http://localhost:6006 --serverCmd "start-storybook -p 6006"

Но теперь есть некоторая проблема с вышеупомянутым [email protected].

Итак, мы разделим задачу и запустим ее одной командой.

Сначала установите некоторые зависимости:

yarn add -D cross-spawn

Давайте создадим файл сценария, scripts/storycap.js:

Добавьте скрипт в package.json:

"scripts": {
  ...
  "screenshot": "node ./scripts/storycap.js"
},

И запустите это:

yarn screenshot

Вы можете видеть, что изображения генерируются таким же образом.

Настроить рег-костюм

Теперь, когда мы подготовили скриншоты, теперь настроим reg-suit.

reg-suit потребует от вас подготовки:

  • Учетная запись Cloud Storage (S3 или GCS)
  • Идентификатор клиента приложения GitHub

В этом посте мы будем использовать GCS в качестве службы хранения и установим приложение reg-suit в приложении GitHub, чтобы уведомить о результате в вашем PR.

Настроить облачный SDK

Если у вас уже есть учетная запись и вы установили SDK, пропустите этот раздел.

Чтобы быстро начать работу с GCS, мы используем SDK, предоставленный Google.

Следуйте инструкции по настройке:



Краткое руководство: начало работы с Cloud SDK | Документация по Cloud SDK
cloud.google.com



Или просто запустите это:

curl https://sdk.cloud.google.com | zsh

После установки инициализирует учетную запись gcloud:

gcloud init

После этого вы можете увидеть список конфигурации:

$ gcloud config list
[core]
account = [email protected]
disable_usage_reporting = TrueYour active configuration is: [default]

Убедитесь, что ваша учетная запись активирована:

$ gcloud auth list
                                                
Credentialed Accounts
ACTIVE  ACCOUNT
*       [email protected] set the active account, run:
$ gcloud config set account `ACCOUNT`

Создать проект

Далее создайте проект. В этом посте мы создаем проект под названием my-reg-suit, но вы можете назвать его как хотите.

gcloud projects create my-reg-suit

Чтобы использовать некоторые API Google, нам нужно включить настройки выставления счетов.

Если у вас еще не было платежного аккаунта, сначала настройте его:



Создание, изменение или закрытие учетной записи Cloud Billing | Google Cloud
Следующие темы, описанные в этой статье, относятся только к учетным записям Google Workspace. Платежные учетные записи Cloud Billing…cloud.google.com



Убедитесь, что ваш платежный аккаунт:

$ gcloud beta billing accounts list
ACCOUNT_ID            NAME              OPEN  MASTER_ACCOUNT_ID
xxxxx-xxxxx-xxxxx  xxxx  True

Включить платежный аккаунт

Затем подключите свой проект к своей платежной учетной записи:

gcloud beta billing projects link my-reg-suit --billing-account {ACCOUNT_ID}

ACCOUNT_ID должен быть платежным аккаунтом, который у вас есть выше.

Создать учетную запись службы

Для доступа к GCS мы создадим учетную запись службы, которая будет использоваться в рабочем процессе CI.

Создайте учетную запись службы с именем reg-suit:

gcloud iam service-accounts create reg-suit --display-name reg-suit

Убедитесь, что учетная запись создана:

gcloud iam service-accounts list

Далее устанавливаем учетной записи роль roles/storage.admin для доступа к GCS:

gcloud projects add-iam-policy-binding \
my-reg-suit \
--member serviceAccount:[email protected] \
--role roles/storage.admin

Скачать ключ учетных данных

Затем мы загрузим ключ учетных данных, чтобы разрешить reg-suit создавать сегменты GCS.

Давайте экспортируем ключ учетных данных:

gcloud iam service-accounts keys create \
--iam-account [email protected] \
~/.keys/reg-suit-key.json

И теперь вы можете увидеть файл учетных данных json по адресу ~/.keys/reg-suit-key.json.

Инициализировать рег-костюм

Теперь, когда мы готовы к настройке reg-suit.

Давайте инициализируем его этой командой:

GOOGLE_APPLICATION_CREDENTIALS=~/.keys/reg-suit-key.json \
npx reg-suit init \
--use-yarn

После его запуска появятся подсказки и выберите эти плагины.

reg-keygen-git-hash-plugin
reg-publish-gcs-plugin
reg-notify-github-plugin

И заполните информацию:

? Working directory of reg-suit. .reg
? Append ".reg" entry to your .gitignore file. Yes
? Directory contains actual images. __screenshots__
? Threshold, ranges from 0 to 1. Smaller value makes the comparison more sensitive. 0
[reg-suit] info Set up reg-notify-github-plugin:
? notify-github plugin requires a client ID of reg-suit GitHub app. Open installation window in your browser Yes

После вопроса notify-github plugin вы будете перенаправлены на страницу установки приложения reg-suit в GitHub, например:

И настройте свой репозиторий.

После этого вы можете получить идентификатор клиента по адресу https://reg-viz.github.io/gh-app/index.html, например:

Скопируйте идентификатор и вставьте его в приглашение.

? This repositoriy's client ID of reg-suit GitHub app {client id}

И продолжайте подсказку:

? Create a new GCS bucket Yes
...
? Update configuration file Yes
? Copy sample images to working dir No

После этого в корневой папке будет сгенерирован regconfig.json:

{
  "core": {
    "workingDir": ".reg",
    "actualDir": "__screenshots__",
    "thresholdRate": 0,
    "addIgnore": true,
    "ximgdiff": {
      "invocationType": "client"
    }
  },
  "plugins": {
    "reg-keygen-git-hash-plugin": true,
    "reg-notify-github-plugin": {
      "clientId": "xxxx"
    },
    "reg-publish-gcs-plugin": {
      "bucketName": "xxx"
    }
  }
}

Теперь, когда вы можете запустить reg-suit следующим образом:

GOOGLE_APPLICATION_CREDENTIALS=~/.keys/reg-suit-key.json npx reg-suit run

Настроить CircleCI

Далее давайте настроим и запустим его в процессе CI.

Во-первых, мы зарегистрируем ключ учетных данных как переменные среды в CircleCI.

Перейдите в свой проект, Environment Variables и Add Environment Variable:

Скопируйте json:

cat ~/.keys/reg-suit-key.json | pbcopy

И создайте GCP_CREDENTIALS и вставьте значение:

Затем создайте .circleci/config.yml:

И добавьте скрипт в package.json:

"scripts": {
  ...
  "visual-testing": "reg-suit run"
},

Проведите визуальное тестирование

Теперь, когда мы подготовили все настройки.

Давайте попробуем и посмотрим, как это работает.

Внесите некоторые изменения в компонент Button, например:

Мы добавили width: 200 к стилю.

Когда вы нажимаете его, reg-suit автоматически сравнивает снимок с предыдущими версиями компонента, чтобы найти изменения.

Если будут обнаружены какие-либо изменения, вы получите уведомление в своем PR, например.

Посмотреть PR можно здесь.

И нажмите на ссылку, вы можете увидеть отчет:

Как видите, компонент Button расширяет ширину.

Когда вы удовлетворены изменениями, вы готовы к слиянию кода.

Это позволяет легко просматривать изменения пользовательского интерфейса и быстро подтверждать их с первого взгляда.

Вывод

В настоящее время разработка, управляемая компонентами, популярна во фронтенд-разработке.

Автоматическая проверка пользовательского интерфейса позволяет вам сосредоточиться на создании функций и предоставить пользователям согласованный пользовательский интерфейс.

Если вы себе это позволяете, Chromatic будет еще одним вариантом, но reg-suit — это бесплатный проект с открытым исходным кодом. Если вы хотите поэкспериментировать с визуальным тестированием, подойдет reg-suit.



manakuro/reg-suit-example
github.com