Сергей Татаринцев — Тестирование CSS-регрессий с Gemini
6 likes23,085 views
Документ описывает методики тестирования CSS-регрессий с использованием инструментов, таких как Gemini, и предоставляет примеры кода для автоматизации тестов интерфейса. Рассматриваются подходы к захвату скриншотов различных состояний элементов в различных браузерах. Также упоминается интеграция с Travis CI и использование Sauce Labs для обеспечения качества кода.
Сергей Татаринцев — Тестирование CSS-регрессий с Gemini
- 2. Тестирование CSS-регрессий с Сергей Татаринцев, Яндекс BEMup в Москве, 17 мая 2014
- 3. Обо мне [email protected] @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 Действия
- 15. Кнопка plain hover Навести курсор pressed Нажать левую кнопку clicked Отпустить кнопку
- 16. Создание набора var gemini = require('gemini'); ! gemini.suite('button', function(suite) { });
- 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. Полезные советы Скриншоты - не замена юнит-тестам Использовать статические данные
- 32. SauceConnect https://saucelabs.com/docs/connect <SAUCE CONNECT DIR>/bin/sc
- 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
- 38. [email protected] @SevInf SevInf Сергей Татаринцев! Яндекс Ваш звонок очень важен для нас: http://bit.ly/msk-bemup-feedback