Пример внедрения gemini в TodoMVC
Тестирование вёрстки gemini-тестами позволяет быть уверенными, что внесение изменений в код проекта не сломает вёрстку в любой части этого проекта. Тестирование происходит сравнением снятого скриншота тестируемого элемента из текущей ревизии с эталонным скриншотом этого элемента.
Ниже приведено описания к соответствующим шагам (веткам stepX
) внедрения gemini.
- Первый тест — проверка работоспособности окружения тестирования
- Устанавливаем и запускаем Selenium.
В отдельном терминале запускаем Selenium-сервер, он понадобится на этапе локального запуска тестов.
npm install -g selenium-standalone selenium-standalone install
selenium-standalone start
- Устанавливаем gemini в проект.
npm install --save-dev gemini
- Устанавливаем и запускаем http-сервер, он понадобится только на этом шаге для открытия страницы.
В отдельном терминале запускаем http-server.
npm install http-server
Тестируемая страница доступна по адресу http://127.0.0.1:8080/.http-server
- Запуск gemini в режиме сохранения эталонных изображений.
gemini update test/gemini/suites/todomvc.gemini.js
- Запуск gemini в режиме тестирования.
gemini test test/gemini/suites/todomvc.gemini.js
- Устанавливаем и запускаем Selenium.
- HTML-отчет для просмотра результатов о прохождении тестов
- Необходимо установить плагин html-reporter
и подключить его в секции
npm install --save-dev html-reporter
system / plugins
в конфигурации gemini. - Но есть и другие виды отчетов, которые устанавливаются как плагины:
- stat-reporter — отчет с агрегированной статистикой по браузерам
- json-reporter — JSON-отчет для интеграции в пользовательские среды CI
- gemini-teamcity — отчет для интеграции с TeamCity
- Необходимо установить плагин html-reporter
- Пишем модульные тесты на вёрстку для эффективного тестирования
- «Каждый тестируемый объект разбивается на минимальные элементы, которые могут принимать различные визуальные состояния в зависимости от производимых над ними действий.»
- Статические данные для тестируемой страницы
- Ограничения тестирования на живом API сервиса:
- внешний вид тестируемой HTML-страницы зависит от данных
- каждый
suit()
может выполняться параллельно в отдельном окне браузера, тесты могут изменять данные в произвольном порядке - обнуление данных перед или после теста делает невозможным использование параллельности выполнения тестов
- Подмена API сервиса статическими данными:
- устанавливаем json-server
npm install json-server
- запускаем http-сервер с подменой API сервиса
/api/todos
json-server db.json --port 8080 --routes routes.json --static . --read-only
- устанавливаем json-server
- Ограничения тестирования на живом API сервиса:
- Ограничения локального запуска
- Зависимость тестов от внешнего окружения — любое пользовательское действие может сломать прохождение тестов. Это частично можно решить за счет retry.
- Тяжело поддерживать одинаковое окружение для разных разработчиков (ОС, версии браузеров, размер экрана).
- Нет возможности параллельного запуска тестов в браузерах на различных платформах (Windows, Linux, MAC).
- Неудовлетворительная скорость при большом количестве тестов — ресурсы локальной машины ограничены.
- Сложно автоматизировать запуск браузеров на той же машине, где запускаются тесты.
- Подключение к Selenium Grid
- Схема запуска тестов с Seleium Grid
- В идеальном мире браузер в Seleium Grid может открыть страницу с http-сервера, запущенного на машине разработчика.
- Но в реальном мире машина разработчика находится за Firewall или NAT.
- В таком случае поможет сервер со статическим адресом и беспарольным доступом по ssh.
- Поднимается тоннель между машиной разработчика и сервером, через тоннель пробрасывается порт http-сервера с машины разработчика на свободный порт сервера.
- Браузеру передается хост и порт сервера в качестве хоста тестируемой страницы.
- В идеальном мире браузер в Seleium Grid может открыть страницу с http-сервера, запущенного на машине разработчика.
- Если вы используете собственный Seleium Grid, то для организации описанной выше схемы можно использовать gemini-плагин ssh-tunneler.
- Схема запуска тестов с Seleium Grid
- Запуск тестов в SauceLabs
- Для организации тоннеля с SauceLabs, необходимо установить Sauce Connect Proxy.
- Запускаем Sauce Connect Proxy, параметры авторизации передаем через переменные среды окружения.
export SAUCE_USERNAME=xxxxxx export SAUCE_ACCESS_KEY=yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy path/to/sc
- Подобрать
desiredCapabilities
необходимых браузеров можно с помощью Platform Configurator. - Gemini-плагин gemini-saucelabs-info поможет авторизоваться в SauceLabs без передачи дополнительных параметров (перед запуском тестов убедитесь, что в данном терминале установлены параметры авторизации в переменных среды окружения).
npm install --save-dev gemini-saucelabs-info
- Тесты запускаются той-же командой, но с подменой
gridUrl
через переменную среды окружения. Запуск gemini в режиме обновления скриншотов:И запуска тестов в SauceLabs:gemini_grid_url="http://ondemand.saucelabs.com/wd/hub" gemini update -b desktop-firefox test/gemini/suites/todomvc.gemini.js
gemini_grid_url="http://ondemand.saucelabs.com/wd/hub" gemini test -b desktop-firefox test/gemini/suites/todomvc.gemini.js
- Сокращенные команды
- Секция конфигурации sets позволяет настроить различные варианты запуска тестов.
- Разделим конфигурацию для запуска тестов в локальном Selenium и в SauceLabs:
- запуск тестов локально
gemini test -s local
- запуска тестов в SauceLabs
gemini_grid_url="http://ondemand.saucelabs.com/wd/hub" gemini test -s sauce
- запуск тестов локально
- Команды запуска тестов переносим в npm run-скрипт
npm run gemini-local npm run gemini-local-update npm run gemini-sauce npm run gemini-sauce-update
- Автоматический запуск web-сервера из gemini
- Gemini расширяется плагинами, в которых можно задать пользовательские команды, подписанные на события gemini.
- Пример плагина gemini-json-server для автоматического запуска web-сервера со стабом API. Устанавливаем и подключаем в конфигурации:
npm install --save-dev git+https://github.com/levonet/gemini-json-server.git
- Другие плагины, запускающие web-сервера во время запуска тестов:
- gemini-ecstatic — сервер статики
- gemini-express — запуск express
- gemini-react — плагин для тестирования react компонент
- Оптимизация и хранение изображений
- Плагин оптимизации изображений gemini-optipng.
С уровнем сжатия
npm install --save-dev gemini-optipng
level: 5
уменьшает размер изображений до 50% за приемлемое время. - Git Large File Storage — этот шаг рекомендуется, если необходимо хранить очень большое количество скриншотов в репозитории.
- Устанавливаем git-lfs согласно инструкций.
- Инициализируем маску пути, по которой будем хранить изображения
git lfs track test/gemini/references/**/*.png
- Коммитим изображения.
- Плагин оптимизации изображений gemini-optipng.
- Запуск gemini в Travis CI
- Запуск тестов в браузерах — дорогая операция, по этому будем их запускать только для Pull Requests.
- SauceLabs ограничивает нас одним запуском тоннеля на одного пользователя, по этому устанавливаем лимит на количество параллельных сборок в
1
. - Публикация gemini html-отчета в Pull Request:
- для публикации отчетов воспользуемся surge.sh
- для публикации комментария со ссылками на отчеты понадобится github token на репозиторий
- Все необходимые ключи и токены для авторизации добавляем в переменные среды окружения Travis CI.
- Настройка параллельности
- По браузерам — работает по умолчанию.
- По сессиям — устанавливается опцией
sessionsPerBrowser
. Её можно задать для каждого браузера в отдельности. - Ограничение на общее одновременно открытие сессий устанавливается опцией
parallelLimit
. Это необходимо для работы с облачными сервисами предоставляющими доступ к браузерам. - Ограничение на количество запущенных тестов для одной сессии устанавливается опцией
suitesPerSession
. При превышении этого ограничения старая сессия закрывается и открывается новая. Это ограничение можно задавать для каждого браузера в отдельности.
- Отчет о покрытии CSS тестами
- Gemini умеет строит отчет о покрытии CSS тестами, для этого нужно подключить утилиту для генерации HTML-отчета gemini-coverage.
Coverage настраивается в секции
npm install --save-dev gemini-coverage
system
конфигурации gemini.
- GUI для запуска тестов и сохранения эталонов
- gemini-gui можно установить глобально.
npm install -g gemini-gui
- Запускается gemini-gui в рабочей копии проекта, при необходимости можно использовать те же аргументы что и для
gemini
, но без командtest
иupdate
.gemini-gui
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
The AngularJS website is a great resource for getting started.
Here are some links you may find helpful:
Articles and guides from the community:
- Code School AngularJS course
- 5 Awesome AngularJS Features
- Using Yeoman with AngularJS
- me&ngular - an introduction to MVW
Get help from other AngularJS users:
- Walkthroughs and Tutorials on YouTube
- Google Groups mailing list
- angularjs on Stack Overflow
- AngularJS on Twitter
- AngularjS on Google +
If you have other helpful links to share, or find any of the links above no longer work, please let us know.
The app uses Karma to run the tests located in the test/
folder. To run the tests:
$ npm install
$ npm test