BackstopJS - test regressive

BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time.

Основано на Garris/BackstopJS

---

Установка и настройка backstopjs

1.Если не стоит backstopjs, нужно поставить backstopjs глобально (в зависимости от ОС c sudo или без (Windows)):

$ sudo npm install -g backstopjs

Если в процессе установки возникнут проблемы с Chromium/Puppeter, то необходимо действовать так:

$ sudo npm config set user 0
$ sudo npm config set unsafe-perm true
$ sudo npm install -g backstopjs

2.Клонируем репозиторий, заходим в проект и выполняем установку пакетов:

$ git clone https://github.com/Romancho/backstopjs-tools
$ cd backstopjs-tools
$ npm i

3.Далее копируем test.config.json в config.json, вносим значения и делаем:

$ cp test.config.json config.json
$ nano config.json

  "module":               "название предустановленного конфига, если нет, то оставляем пустое",
  "reference":            "урл сайта-референса",
  "testing":              "урл тестируемого сайта",
  "baseAuth":             true|false, //Если нужно проходить базовую авторизацию на сервере, то true
  "baseLogin":            "dev", 
  "basePassword":         "developer",
  "site_user":            "[email protected]", //пока не используется
  "site_password":        "111111" //пока не используется

4.Конфиги

Данная сборка может использоваться и как as is, так и с предустановленными конфигами для отдельных частных проектов. Конфиги лежат в частном (закрытом) репозитории, в котором необходимо авторизоваться через консоль. Если используем предустановленные конфиги из своего частного репозитория, то:

скопировать test.npmrc в .npmrc:

$ cp test.npmrc .npmrc

и прописать свой url к частному репозиторию. Далее:

$ npm i bs-название проекта

Далее в config.json вносим название в "module":

     "module":            "bs-name"

---

Команды

Запуск сбора референсов с сайта-эталона. Скриншоты генерируются в ./backstop_data/bitmaps_reference.

Не находятся в гите

$ npm run back_ref

Запуск тестирования текущей dev-версии проекта. Скриншоты генерируются в .//backstop_data/bitmaps_test/

НЕ находятся в гите

$ npm run back_test

Сохранение измененной версии, поверх референса (тестируемые изменения, которые санкционированы, становятся референсами)

$ npm run back_approve

Для удобства и гибкости присутствует флаг --filter, который позволяет выбрать конкретный сценарий как для выборки референсов, так и для тестирования и апрувов

$ npm run back_ref --filter=scenario_name

$ npm run back_test --filter=scenario_name

$ npm run back_approve --filter=scenario_name

Если нужно запустить несколько сценариев, то через запятую без пробела

$ npm run back_test --filter=scenario_name_1,scenario_name_2,scenario_name_35

---

Troubleshooting

Если не ставится Chromium, делаем:

$ npm config set user 0
$ npm config set unsafe-perm true
$ npm install -g backstopjs