Тестирование CSS-регрессий с gemini – OdessaJS
- 1. Тестирование CSS-регрессий с gemini Сергей Татаринцев, Яндекс OdessaJS, 5-6 июля 2014
- 2. Библиотеки 4 библиотеки 62 блока Более 15 браузеров в поддержке Преимущественно ручное тестирования 2
- 3. Тестировать вручную — долго и ненадежно 3
- 4. 4
- 6. Регрессии в СSS – ??? 6
- 7. 7
- 10. Чего хочется? 10
- 12. Браузер, в котором мы тестируем 12
- 13. Все остальные 13
- 15. Страница 15
- 16. Много страниц 16
- 17. Поломка ✘ 17
- 18. Все плохо ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ 18
- 21. Нельзя тестировать ничего 21 Нельзя тестировать
- 22. Что-то протестировать можно 22 Нельзя тестировать Можно тестировать Можно тестировать Можно тестировать
- 25. Эталонные скриншоты хранить в репозитории 25
- 26. Это быстрее 26
- 28. 28
- 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
- 42. Состояние с действиями suite.capture('hovered', function(actions) { ! }); 42
- 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
- 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