Functional layout testing with Gemini

Transcript

1. Functional layout
 testing with Gemini Sergey Belov, Yandex Open Mic Night, Oslo, 21.05.2014
2. 2 www.yandex.com
3. Block, Element, Modifier bem.info / @bem_en
4. 4 bem-components github.com/bem/bem-components
5. Code QA JS code style ⟶ jscs JS code static analysis ⟶ JSHint JS code regression testing ⟶ Unit Testing Frameworks (mocha, jasmine) HTML and CSS regression testing ⟶ ??? 5
7. We want to Test blocks in different browsers
 (Chrome, Firefox, IE, Opera, iOS and Android) Take shots of small parts of the page Test blocks in different states Compare with reference images kept in a repository Write tests in JavaScript using convenient test API 7
8. 8 HTML and CSS QA dpxdt casper + phantom.css huxley Many different browsers ✘ ✘ ✘ Page fragment comparison ✘ ✘ Reference images ✘ Many different states ✘ Tests in JavaScript ✘ ✘
9. gemini Utility for regression testing of web pages using screenshots ♊
10. 10 Test Suite State 1 Actions State 2 Actions State N Actions
12. 12 button plain hovered Move mouse over button pressed Press left mouse button focused Release left mouse button
13. Let’s code!
14. Test suite var gemini = require('gemini'); ! gemini.suite('button', function(suite) { // test code goes here }); 14
15. Set page URL suite.setUrl('/some/page.html'); 15
16. Elements to capture suite.setCaptureElements('.button'); 16
17. button plain state suite.capture('plain'); 17
18. button hovered state suite.capture('hovered', function(actions, find) { actions.mouseMove(find('.button')); }); 18
19. button pressed state suite.capture('pressed', function(actions, find) { actions.mouseDown(find('.button')); }); 19
20. button focused state suite.capture('clicked', function(actions, find) { actions.mouseUp(find('.button')); }); 20
21. before() hook suite.before(function(actions, find) { this.button = find('.button'); }); 21
22. button.gemimi.js var gemini = require('gemini'); ! gemini.suite('button', function() { suite.setUrl('/some/page.html') .setCaptureElements('.button') .before(function(actions, find) { this.button = find('.button'); }) .capture('plain') .capture('hovered', function(actions) { actions.mouseMove(this.button); }) .capture('pressed', function(actions) { actions.mouseDown(this.button); }) .capture('clicked', function(actions) { actions.mouseUp(this.button); }); }); 22
23. button.gemimi.js var gemini = require('gemini'); ! gemini.suite('button', function() { suite.setUrl('/some/page.html') .setCaptureElements('.button') .before(function(actions, find) { this.button = find('.button'); }) .capture('plain') .capture('hovered', function(actions) { actions.mouseMove(this.button); }) .capture('pressed', function(actions) { actions.mouseDown(this.button); }) .capture('clicked', function(actions) { actions.mouseUp(this.button); }); }); 23
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'} 24
25. Demo
26. Pro Tips Gemini is not a replacement for your JS unit-tests Use static data to render your HTML Optimize reference images before commit 26
27. Gemini + Travis CI + SauceLabs = ὑ
28. .travis.yml env: global: # WARNING! use `travis encrypt` to encrypt this vars - SAUCE_USERNAME=<your-username> - SAUCE_ACCESS_KEY=<your-access-key> ! addons: sauce_connect: true ! before_script: - sudo apt-get update -qq - sudo apt-get install -y graphicsmagick - npm install http-server - node_modules/.bin/http-server -s -p 8000 & 28
29. .gemini.yml rootUrl: http://localhost:8000/ gridUrl: http://ondemand.saucelabs.com/wd/hub ! browsers: - {name: chrome, version: 33} - {name: opera, version: 12} - {name: firefox, version: 29} - {name: internet explorer, version: 9} 29
30. package.json { "devDependencies": { "gemini": "~0.3.3" }, "scripts": { "test": "gemini test" } } 30
31. 31 Docs docs.travis-ci.com saucelabs.com/opensource/travis
32. 32 ♊ github.com/bem/gemini github.com/bem/gemini-demo
33. 33 peimei@ya.ru @arik0n arikon Sergey Belov ! Yandex