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 – OdessaJS

4,196 views

Published on

Published in: Software
  • Be the first to comment

Тестирование CSS-регрессий с gemini – OdessaJS

  1. 1. Тестирование CSS-регрессий с gemini Сергей Татаринцев, Яндекс OdessaJS, 5-6 июля 2014
  2. 2. Библиотеки 4 библиотеки 62 блока Более 15 браузеров в поддержке Преимущественно ручное тестирования 2
  3. 3. Тестировать вручную — долго и ненадежно 3
  4. 4. 4
  5. 5. Автоматизация jscs 5
  6. 6. Регрессии в СSS – ??? 6
  7. 7. 7
  8. 8. Писать обычные тесты? 8 getComputedCss(block).borderWidth.should.be('2px')
  9. 9. 9 border box-shadow
  10. 10. Чего хочется? 10
  11. 11. Тестировать в разных браузерах 11
  12. 12. Браузер, в котором мы тестируем 12
  13. 13. Все остальные 13
  14. 14. Тестировать фрагменты страниц 14
  15. 15. Страница 15
  16. 16. Много страниц 16
  17. 17. Поломка ✘ 17
  18. 18. Все плохо ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ ✘ 18
  19. 19. Плохо не все ✘ ✓ ✓✓ 19
  20. 20. Динамический контент 20
  21. 21. Нельзя тестировать ничего 21 Нельзя тестировать
  22. 22. Что-то протестировать можно 22 Нельзя тестировать Можно тестировать Можно тестировать Можно тестировать
  23. 23. Тестирование в различных состояниях 23
  24. 24. Кнопка из bem-components 24
  25. 25. Эталонные скриншоты хранить в репозитории 25
  26. 26. Это быстрее 26
  27. 27. git checkout long-time-ago 27
  28. 28. 28
  29. 29. Существующие инструменты 29
  30. 30. DPXDT github.com/bslatkin/dpxdt Не нужен код тестов Нужен эталонный URL Скриншоты всей страницы В начальном состоянии 30
  31. 31. casper.js + phantom.css github.com/Huddle/PhantomCSS Снимает фрагменты Тестирование различных состояний Только в phantom.js 31
  32. 32. Huxley github.com/facebook/huxley Не нужен код тестов Тестирование различных состояний Скриншот всей страницы Один бразуер 32
  33. 33. Сравнение dpxdt phantom.css Huxley Разные браузеры ✘ ✘ ✘ Сравнение фрагментов ✘ ✘ Скриншоты в репозитории ✘ Различные состояния ✘ JavaScript ✘ ✘ 33
  34. 34. gemini Наш opensource инструмент для тестирования 34
  35. 35. Состоит из 35
  36. 36. Схема работы Тестовый набор Состояние 1 Действия Состояние 2 Действия Состояние N Действия 36
  37. 37. Кнопка plain hover Навести курсор pressed Нажать левую кнопку focused Отпустить кнопку 37
  38. 38. Создание набора var gemini = require('gemini'); ! gemini.suite('button', function(suite) { ! }); 38
  39. 39. Задание URL ! suite.setUrl('/some/url'); 39
  40. 40. Область захвата suite.setCaptureElements('.button'); 40
  41. 41. Захват начального состояния suite.capture('plain'); 41
  42. 42. Состояние с действиями suite.capture('hovered', function(actions) { ! }); 42
  43. 43. Действия suite.capture('hovered', function(actions) { actions.mouseMove('.button'); }); 43
  44. 44. find suite.capture('pressed', function(actions, find) { actions.mouseDown(find('.button')); }); 44
  45. 45. before suite.before(function(actions, find) { this.button = find('.button'); }); 45
  46. 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. 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. Демо 48
  49. 49. Интеграция 49
  50. 50. saucelabs.com 50
  51. 51. Переменные среды SAUCE_USERNAME=<USERNAME> SAUCE_ACCESS_KEY=<ACCESS KEY> 51
  52. 52. .gemini.yml gridUrl: http://ondemand.saucelabs.com/wd/hub 52
  53. 53. SauceConnect saucelabs.com/docs/connect <SAUCE CONNECT DIR>/bin/sc 53
  54. 54. travis-ci.org 54
  55. 55. Интеграция с TravisCI before_install: - sudo apt-get update -qq - sudo apt-get install -qq -y graphicsmagick .travis.yml 55
  56. 56. Интеграция с TravisCI "scripts": { "test": "gemini test" } package.json 56
  57. 57. SauceLabs + TravisCI saucelabs.com/opensource/travis Пример: github.com/SevInf/OdessaJS-gemini 57
  58. 58. Полезные советы Скриншоты — не замена юнит-тестам Использовать статические данные 58
  59. 59. Где взять? ru.bem.info/tools/testing/gemini/ ! github.com/bem/gemini 59
  60. 60. sevinf@yandex-team.ru @SevInf SevInf Сергей Татаринцев! Яндекс 60

×