Downloaded 12 times
Uploaded byYandex
Сергей Татаринцев — Тестирование CSS-регрессий с Gemini
Документ описывает методики тестирования CSS-регрессий с использованием инструментов, таких как Gemini, и предоставляет примеры кода для автоматизации тестов интерфейса. Рассматриваются подходы к захвату скриншотов различных состояний элементов в различных браузерах. Также упоминается интеграция с Travis CI и использование Sauce Labs для обеспечения качества кода.
Сергей Татаринцев — Тестирование CSS-регрессий с Gemini
- 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.
- 13. Схема работы Тестовый набор Состояние1 Действия Состояние 2 Действия Состояние N Действия
- 14.
- 15. Кнопка plain hover Навести курсор pressedНажать левую кнопку clicked Отпустить кнопку
- 16. Создание набора var gemini= require('gemini'); ! gemini.suite('button', function(suite) { });
- 17.
- 18.
- 19.
- 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.
- 30.
- 31.
- 32.
- 33.
- 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.
- 37.
- 38. sevinf@yandex-team.ru @SevInf SevInf Сергей Татаринцев! Яндекс Ваш звонокочень важен для нас: http://bit.ly/msk-bemup-feedback