krzysztof Ścira: real testing of hybrid mobile apps

REAL testing of hybrid mobile apps

Krzysztof "Procek" Ścira

PRAWDZIWE testowaniehybrydowych aplikacji mobilnych

Hybrid mobile apps in 3 stepsHybrydowe aplikacje mobilne w 3 krokach

Web application with native pluginsAplikacja webowa z natywnymi wtyczkami

Embed app inside WebViewOsadzanie aplikacji wewnątrz WebView

Standard form of appStandardowa forma aplikacji

Let's start!Zaczynajmy!

...in perfect world...w idealnym świecie

You have HTML5* knowledgeMasz wiedzę z HTML5*

You write modern web codePiszesz nowoczesny kod webowy

...in perfect world...w idealnym świecie

...in real world...w prawdziwym świecie

● unit tests● E2E● manual tests● UI testing● performance tests

Testing

Types of clicksTypy kliknięć

Clicking on HTML selectorKlikanie po selektorach HTML

✗ multiple elements on single selectorWiele elementów na pojedynczym selektorze

✗ clicking beyond screenklikanie poza ekranem

✗ hidden elementsukryte elementy

✗ JS programmatically click*programowe kliknięcia JS*

✔easy to definełatwe do definiowania

✔RWD supportwsparcie RWD

Clicking on the screen X, YKlikanie w zdefiniowany na ekranie punkt X, Y

✗ only on specified screen resolutionwyłącznie na zdefiniowanej rozdzielczości ekranu

✗ may fail on user data changesmoże zawieźć przy zmianie danych użytkownika

✔native clickklik natywny

✔more posibilitieswięcej możliwości

Real testing - only on physical devicesPrawdziwe testowanie – jedynie na

fizycznych urządzeniach

● desktop WebView != Mobile WebView● iOS != Android != Windows Phone● emulator + Cordova Plugins

What you see and what you cannot seeCo widać, a czego nie widać

● hittable (iOS - XCODE)● visible (Android - uiautomatorviewer)● .lenght()?! (front-end - jQuery)

http://codepen.io/desi9n/pen/XXoprg

Two steps back!Dwa kroki do tyłu!

OH what's no FUnny ClicK here...

Cordova plugins testingTestowanie pluginów Cordovy

Native functionalities require „native” user actions

Natywne funkcjonalności wymagają„natywnych” akcji użytkownika

Let's cook something!Ugotujmy coś!

Cordova Testin9

http://testin9.desi9n.pl

IngredientsSkładniki

● ADB● node.js● AngularJS● Coffee or Melissa*

*for Calm or Furious developer ;)

make native actions on devicewith front-end logic

wykonywanie natywnych akcji na urządzeniuprzy pomocy logiki front-endowej

Clue!

How?Jak?

Architecture - conceptArchitektura - koncepcja

Architecture - technologiesArchitektura - technologie

ADB

adb shell input tap 300 300adb shell input swipe 100 200 100 850adb shell input text lolloadb shell input trackball roll 0 -5adb shell input keyevent KEYCODE_BACKadb shell input keyevent 4

node.js

exec('adb shell input swipe 100 200 100 850', function (err, stdout, stderr) { if (err){ throw err; } else{ console.log('done'); }});

AngularJS GUI

Let's see it in actionZobaczmy to w akcji

What's next?Co dalej?

● save tests and run it directly on webservicezapisywanie testów i uruchamianie ich bezpośrednio na webservice

● prepare project for continuous integrationprzygotowanie projektu pod continuous integration

● iOS and Windows Phone supportwsparcie platform iOS i Windows Phone

● what do YOU need?a czego Ty potrzebujesz?

TODO

Any questions?

About me

Krzysztof "Procek" Ścira● MEng Information

Technology in Metallurgy● Front-end developer

& desi9n.pl CEO● front-end coach in SAGES● [email protected]