Каждый разработчик интерфейсов долгоживущих сервисов сталкивается с регрессиями в вёрстке. Мы научились пользоваться инструментами для unit-тестирования js-кода, но до сих пор плохо понимаем, как тестировать на регрессии вёрстку. И ещё хуже понимаем, как делать это автоматически (continuous integration) и при этом писать небольшие и не очень хрупкие тесты. В этом году мы создали Gemini — инструмент для модульного тестирования вёрстки для нашей библиотеки компонентов. Мы используем его для тестирования внутренней библиотеки компонентов Яндекса, которая лежит в основе большинства наших сервисов (например, Поиска и Картинок). На BEMup я расскажу, как использовать этот инструмент — как разрабатывать тесты и запускать их на локальной машине или в уже существующей экосистеме (Travis CI, Sauce Labs).

2. Тестирование
CSS-регрессий с
Сергей Татаринцев, Яндекс
BEMup в Москве, 17 мая 2014

3. Обо мне
sevinf@yandex-team.ru
@SevInf
github.com/SevInf
Старший разработчик в группе разработки
интерфейсов
bit.ly/bemup-msk-gemini

4. Обеспечение качества кода
Стиль кода: jscs
Статический анализ: JSHint
Регрессии в JS: юнит-тесты
Регрессии в CSS: ???

5. Зачем автоматизировать?
Это быстрее
Это надежнее

7. Чего хочется
Тестировать в разных браузерах
Скриншоты в разных состояних
Сравнивать фрагменты страницы
Эталонные скриншоты в репозитории
JavaScript

8. DPXDT
https://github.com/bslatkin/dpxdt
Не нужен код тестов
Нужен эталонный URL
Скриншоты всей страницы

9. casper.js + phantom.css
https://github.com/Huddle/
PhantomCSS
Снимает фрагменты
Тестирование различных состояний
Только в phantom.js

10. Huxley
https://github.com/facebook/huxley
Не нужен код тестов
Тестирование различных состояний
Скриншот всей страницы
Один бразуер

11. Сравнение
dpxdt phantom.css Huxley
Разные браузеры ✘ ✘ ✘
Сравнение фрагментов ✘ ✘
Скриншоты в репозитории ✘
Различные состояния ✘
JavaScript ✘ ✘

12. gemini

13. Схема работы
Тестовый набор
Состояние 1 Действия
Состояние 2 Действия
Состояние N Действия

14. Кнопка из bem-components

15. Кнопка
plain
hover Навести курсор
pressed Нажать левую кнопку
clicked Отпустить кнопку

16. Создание набора
var gemini = require('gemini');
!
gemini.suite('button', function(suite) {
});

17. Задание URL
!
suite.setUrl('/some/url');
!

18. Область захвата
!
suite.setCaptureElements('.button');

19. Захват начального состояния
suite.capture('plain');
!

20. Состояние с действиями
!
suite.capture('hovered', function(actions) {
});
!

21. Передвижение курсора
!
suite.capture('hovered', function(actions) {
actions.mouseMove('.button');
});
!

22. Нажатая кнопка
!
suite.capture('pressed', function(actions, find) {
actions.mouseDown(find('.button'));
});
!

23. Кнопка в фокусе
!
suite.capture('clicked', function(actions, find) {
actions.mouseUp(find('.button'));
});
!

24. before
!
suite.before(function(actions, find) {
this.button = find('.button');
});
!

25. Финальный вариант
var gemini = require('gemini');
!
gemini.suite('button', function() {
suite.setUrl('/some/url')
.setCaptureElements('.button')
.before(function(actions, find) {
this.button = find('.button');
})
.capture('plain')
.capture('hovered', function(actions, find) {
actions.mouseMove(this.button);
})
.capture('pressed', function(actions, find) {
actions.mouseDown(this.button);
})
.capture('clicked', function(actions, find) {
actions.mouseUp(this.button);
});
});

26. .gemini.yml
rootUrl: http://example.com
gridUrl: http://localhost:4444/wd/hub
browsers:
- {name: chrome, version: '33.0'}
- {name: opera, version: '12.16'}
- {name: firefox, version: '25.0'}
- {name: ie, version: '10.0'}

27. Демо

28. Полезные советы
Скриншоты - не замена юнит-тестам
Использовать статические данные

29. https://saucelabs.com/

30. Переменные среды
SAUCE_USERNAME=<USERNAME>
SAUCE_ACCESS_KEY=<ACCESS KEY>

31. .gemini.yml
gridUrl: http://ondemand.saucelabs.com/wd/hub

32. SauceConnect
https://saucelabs.com/docs/connect
<SAUCE CONNECT DIR>/bin/sc

33. https://travis-ci.org/

34. Интеграция с TravisCI
before_install:
- sudo apt-get update -qq
- sudo apt-get install -qq -y graphicsmagick
.travis.yml

35. Интеграция с TravisCI
"scripts": {
"test": "gemini test"
}
package.json

36. SauceLabs + TravisCI
https://saucelabs.com/opensource/travis
!
Пример:
http://bit.ly/bc-gemini

37. Где взять?
ru.bem.info/tools/testing/gemini/
!
github.com/bem/gemini

38. sevinf@yandex-team.ru
@SevInf
SevInf
Сергей Татаринцев!
Яндекс
Ваш звонок очень важен для нас:
http://bit.ly/msk-bemup-feedback