Your SlideShare is downloading. ×
  • Like
Сергей Татаринцев — Тестирование CSS-регрессий с Gemini
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 11,462 views
Published

Каждый разработчик интерфейсов долгоживущих сервисов сталкивается с регрессиями в вёрстке. Мы научились пользоваться инструментами для unit-тестирования js-кода, но до сих пор плохо понимаем, как …

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,462
On SlideShare
0
From Embeds
0
Number of Embeds
22

Actions

Shares
Downloads
8
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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