1. Тестирование
CSS-регрессий с gemini
Сергей Татаринцев, Яндекс
OdessaJS, 5-6 июля 2014

2. Библиотеки
4 библиотеки
62 блока
Более 15 браузеров в поддержке
Преимущественно ручное тестирования
2

3. Тестировать вручную — долго
и ненадежно
3

4. 4

5. Автоматизация
jscs
5

6. Регрессии в СSS – ???
6

7. 7

8. Писать обычные тесты?
8
getComputedCss(block).borderWidth.should.be('2px')

9. 9
border box-shadow

10. Чего хочется?
10

11. Тестировать в разных
браузерах
11

12. Браузер, в котором мы тестируем
12

13. Все остальные
13

14. Тестировать фрагменты
страниц
14

15. Страница
15

16. Много страниц
16

17. Поломка
✘
17

18. Все плохо
✘ ✘ ✘ ✘ ✘
✘ ✘ ✘ ✘ ✘
✘ ✘ ✘ ✘ ✘
✘ ✘ ✘ ✘ ✘
18

19. Плохо не все
✘
✓
✓✓
19

20. Динамический контент
20

21. Нельзя тестировать ничего
21
Нельзя тестировать

22. Что-то протестировать можно
22
Нельзя тестировать
Можно тестировать
Можно
тестировать
Можно тестировать

23. Тестирование в различных
состояниях
23

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

25. Эталонные скриншоты хранить
в репозитории
25

26. Это быстрее
26

27. git checkout long-time-ago
27

28. 28

29. Существующие
инструменты
29

30. DPXDT
github.com/bslatkin/dpxdt
Не нужен код тестов
Нужен эталонный URL
Скриншоты всей страницы
В начальном состоянии
30

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

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

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

34. gemini
Наш opensource инструмент для тестирования
34

35. Состоит из
35

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

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

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

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

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

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

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

43. Действия
suite.capture('hovered', function(actions) {
actions.mouseMove('.button');
});
43

44. find
suite.capture('pressed', function(actions, find) {
actions.mouseDown(find('.button'));
});
44

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

46. Финальный вариант
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);
});
46

47. .gemini.yml
rootUrl: http://example.com
gridUrl: http://localhost:4444/wd/hub
browsers:
chrome33:
browserName: chrome
version: '33.0'
opera12:
browserName: opera
version: '12.16'
firefox25:
browserName: firefox
version: '25.0'
ie9:
browserName: internet explorer
version: '9.0'
47

48. Демо
48

49. Интеграция
49

50. saucelabs.com
50

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

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

53. SauceConnect
saucelabs.com/docs/connect
<SAUCE CONNECT DIR>/bin/sc
53

54. travis-ci.org
54

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

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

57. SauceLabs + TravisCI
saucelabs.com/opensource/travis
Пример:
github.com/SevInf/OdessaJS-gemini
57

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

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

60. sevinf@yandex-team.ru
@SevInf
SevInf
Сергей Татаринцев!
Яндекс
60