sergii puzankov «ui regression testing with "gemini"»
TRANSCRIPT
www.luxoft.com
UI regression testing with Gemini
www.luxoft.com
⬥Yandex ⬥Luxoft, GettyImages ⬥Front-end Science
[email protected]@puzankovcom
SERGEY PUZANKOV
www.luxoft.com
TESTING FRONT-END
www.luxoft.com
MANUAL TESTING
www.luxoft.com
ТЕСТИРУЕМ ВЕРСТКУ
www.luxoft.com
ТЕСТИРУЕМ МОБИЛЬНУЮ.ВЕРСТКУ
www.luxoft.com
TESTING AUTOMATION
Роботы работают, счастлив человек!
www.luxoft.com
⬥Code style: JSCS, …
⬥Статический анализ кода: jsHint, …
⬥Регрессия JS: unit-tests
⬥Регрессия CSS: ???
⬥Регрессия front-end app: end-to-end ???
ОБЕСПЕЧЕНИЕ КАЧЕСТВА КОДА
www.luxoft.com
CSS REGRESSION
www.luxoft.com
⬥Разные браузеры
⬥Разные состояния элементов
⬥Тестирование фрагментов страницы
⬥Эталонные скриншоты в репозитории
⬥JavaScript
ТРЕБОВАНИЯ
www.luxoft.com
⬥Не нужен код тестов
⬥Нужен эталонный URL
⬥Скриншоты всей страницы
https://github.com/bslatkin/dpxdt
DPXDT
www.luxoft.com
⬥Снимает фрагменты
⬥Разные состояния элементов
⬥Только phantom.js
https://github.com/Huddle/PhantomCSS
PHANTOMCSS
www.luxoft.com
⬥Снимает фрагменты
⬥Разные состояния элементов (css селекторы)
⬥Только phantom.jshttps://github.com/garris/BackstopJS
BACKSTOPJS
www.luxoft.com
GEMINI
www.luxoft.com
⬥Разные браузеры
⬥Разные состояния элементов и возможность
взаимодействия с ними
⬥Тестирование фрагментов страницы
⬥Эталонные скриншоты в репозитории
⬥JavaScript
GEMINI
www.luxoft.com
www.luxoft.com
www.luxoft.com
www.luxoft.com
⬥Selenium Server
⬥ChromeDriver
⬥PhantomJS
⬥Compiler with support of C++11
DEPENDENCIES
www.luxoft.com
QUICK START
www.luxoft.com
rootUrl: http://localhost:3000/browsers: phantomjs: desiredCapabilities: browserName: phantomjs
GEMINI.CONFIG.YML
www.luxoft.com
rootUrl: http://localhost:3000/gridUrl: http://localhost:4444/wd/hubscreenshotsDir: './screens'system: projectRoot: '.'browsers: phantomjs-1600-1200: windowSize: 1600x1200 desiredCapabilities: browserName: phantomjs strictComparison: true
GEMINI.CONFIG.YML
www.luxoft.com
gemini.suite('button', function(suite) {
// suite code
});
SUITE
www.luxoft.com
suite.setUrl('/tests/button')
SET URL
www.luxoft.com
suite.setCaptureElements('.button');
SET CAPTURED ELEMENT
www.luxoft.com
suite.capture('plain');
CAPTURE
www.luxoft.com
suite.capture('hovered', function(actions) { actions.mouseMove(this.button); });
HOVER
www.luxoft.com
gemini.suite('button', function(suite) { suite.setUrl('/tests/button') .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); }); });
BUTTON-TEST-SUITE.JS
www.luxoft.com
gemini update [paths to test suites]
gemini test --reporter html [paths to test suites]
RUN
www.luxoft.com
DEMO
www.luxoft.com
PROBLEMS
www.luxoft.com
⬥Animation ⬥Cursors ⬥Video ⬥Gifs :(
PROBLEMS
www.luxoft.com
ВОПРОСЫ
Благодарю за внимание!
www.luxoft.com
СПАСИБО!
Сергей Пузанков