Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Сергей Татаринцев — Тестирование CSS-регрессий с Gemini

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

Сергей Татаринцев — Тестирование CSS-регрессий с Gemini

  1. 1. Тестирование CSS-регрессий с Сергей Татаринцев, Яндекс BEMup в Москве, 17 мая 2014
  2. 2. Обо мне sevinf@yandex-team.ru @SevInf github.com/SevInf Старший разработчик в группе разработки интерфейсов bit.ly/bemup-msk-gemini
  3. 3. Обеспечение качества кода Стиль кода: jscs Статический анализ: JSHint Регрессии в JS: юнит-тесты Регрессии в CSS: ???
  4. 4. Зачем автоматизировать? Это быстрее Это надежнее
  5. 5. Чего хочется Тестировать в разных браузерах Скриншоты в разных состояних Сравнивать фрагменты страницы Эталонные скриншоты в репозитории JavaScript
  6. 6. DPXDT https://github.com/bslatkin/dpxdt Не нужен код тестов Нужен эталонный URL Скриншоты всей страницы
  7. 7. casper.js + phantom.css https://github.com/Huddle/ PhantomCSS Снимает фрагменты Тестирование различных состояний Только в phantom.js
  8. 8. Huxley https://github.com/facebook/huxley Не нужен код тестов Тестирование различных состояний Скриншот всей страницы Один бразуер
  9. 9. Сравнение dpxdt phantom.css Huxley Разные браузеры ✘ ✘ ✘ Сравнение фрагментов ✘ ✘ Скриншоты в репозитории ✘ Различные состояния ✘ JavaScript ✘ ✘
  10. 10. gemini
  11. 11. Схема работы Тестовый набор Состояние 1 Действия Состояние 2 Действия Состояние N Действия
  12. 12. Кнопка из bem-components
  13. 13. Кнопка plain hover Навести курсор pressed Нажать левую кнопку clicked Отпустить кнопку
  14. 14. Создание набора var gemini = require('gemini'); ! gemini.suite('button', function(suite) { });
  15. 15. Задание URL ! suite.setUrl('/some/url'); !
  16. 16. Область захвата ! suite.setCaptureElements('.button');
  17. 17. Захват начального состояния suite.capture('plain'); !
  18. 18. Состояние с действиями ! suite.capture('hovered', function(actions) { }); !
  19. 19. Передвижение курсора ! suite.capture('hovered', function(actions) { actions.mouseMove('.button'); }); !
  20. 20. Нажатая кнопка ! suite.capture('pressed', function(actions, find) { actions.mouseDown(find('.button')); }); !
  21. 21. Кнопка в фокусе ! suite.capture('clicked', function(actions, find) { actions.mouseUp(find('.button')); }); !
  22. 22. before ! suite.before(function(actions, find) { this.button = find('.button'); }); !
  23. 23. Финальный вариант 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); }); });
  24. 24. .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'}
  25. 25. Демо
  26. 26. Полезные советы Скриншоты - не замена юнит-тестам Использовать статические данные
  27. 27. https://saucelabs.com/
  28. 28. Переменные среды SAUCE_USERNAME=<USERNAME> SAUCE_ACCESS_KEY=<ACCESS KEY>
  29. 29. .gemini.yml gridUrl: http://ondemand.saucelabs.com/wd/hub
  30. 30. SauceConnect https://saucelabs.com/docs/connect <SAUCE CONNECT DIR>/bin/sc
  31. 31. https://travis-ci.org/
  32. 32. Интеграция с TravisCI before_install: - sudo apt-get update -qq - sudo apt-get install -qq -y graphicsmagick .travis.yml
  33. 33. Интеграция с TravisCI "scripts": { "test": "gemini test" } package.json
  34. 34. SauceLabs + TravisCI https://saucelabs.com/opensource/travis ! Пример: http://bit.ly/bc-gemini
  35. 35. Где взять? ru.bem.info/tools/testing/gemini/ ! github.com/bem/gemini
  36. 36. sevinf@yandex-team.ru @SevInf SevInf Сергей Татаринцев! Яндекс Ваш звонок очень важен для нас: http://bit.ly/msk-bemup-feedback

×