Sergii Puzankov «UI Regression Testing with "Gemini"»

www.luxoft.com

UI regression testing with Gemini

www.luxoft.com

⬥Yandex ⬥Luxoft, GettyImages ⬥Front-end Science

puzankov@frontend-science.com@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

BIT.LY/GEMINI-DEMO

www.luxoft.com

ВОПРОСЫ

Благодарю за внимание!

www.luxoft.com

СПАСИБО!

Сергей Пузанков