Hybrid mobile apps working on Cordova / Phonegap are very difficult to testing. Krzysztof will show new tool for hybrid mobile apps - "Cordova Testin9". Presentation about common problems with UI testing and solutions for them.

1. REAL testing of hybrid mobile apps
Krzysztof "Procek" Ścira
PRAWDZIWE testowanie
hybrydowych aplikacji mobilnych

2. Hybrid mobile apps in 3 steps
Hybrydowe aplikacje mobilne w 3 krokach

3. Web application with native plugins
Aplikacja webowa z natywnymi wtyczkami

4. Embed app inside WebView
Osadzanie aplikacji wewnątrz WebView

5. Standard form of app
Standardowa forma aplikacji

6. Let's start!
Zaczynajmy!

7. ...in perfect world
...w idealnym świecie
You have HTML5* knowledge
Masz wiedzę z HTML5*
You write modern web code
Piszesz nowoczesny kod webowy

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

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

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

11. ●
unit tests
●
E2E
●
manual tests
●
UI testing
●
performance tests
Testing

12. ●
unit tests
●
E2E
●
manual tests
●
UI testing
●
performance tests
Testing

13. Types of clicks
Typy kliknięć

14. Clicking on HTML selector
Klikanie po selektorach HTML
✗ multiple elements on
single selector
Wiele elementów na
pojedynczym selektorze
✗ clicking beyond screen
klikanie poza ekranem
✗ hidden elements
ukryte elementy
✗ JS programmatically click*
programowe kliknięcia JS*
✔easy to define
łatwe do definiowania
✔RWD support
wsparcie RWD

15. Clicking on the screen X, Y
Klikanie w zdefiniowany na ekranie punkt X, Y
✗ only on specified screen
resolution
wyłącznie na zdefiniowanej
rozdzielczości ekranu
✗ may fail on user data
changes
może zawieźć przy zmianie
danych użytkownika
✔native click
klik natywny
✔more posibilities
więcej możliwości

16. Real testing - only on physical devices
Prawdziwe testowanie – jedynie na
fizycznych urządzeniach
●
desktop WebView != Mobile WebView
●
iOS != Android != Windows Phone
●
emulator + Cordova Plugins

17. What you see and what you cannot see
Co widać, a czego nie widać
●
hittable (iOS - XCODE)
●
visible (Android - uiautomatorviewer)
●
.lenght()?! (front-end - jQuery)

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

19. Two steps back!
Dwa kroki do tyłu!

21. OH what's no FUnny ClicK here...

22. Cordova plugins testing
Testowanie pluginów Cordovy

23. Native functionalities require
„native” user actions
Natywne funkcjonalności wymagają
„natywnych” akcji użytkownika

24. Let's cook something!
Ugotujmy coś!

25. Cordova Testin9
http://testin9.desi9n.pl

26. Ingredients
Składniki
●
ADB
●
node.js
●
AngularJS
●
Coffee or Melissa*
*for Calm or Furious developer ;)

27. make native actions on device
with front-end logic
wykonywanie natywnych akcji na urządzeniu
przy pomocy logiki front-endowej
Clue!

28. How?
Jak?

29. Architecture - concept
Architektura - koncepcja

30. Architecture - technologies
Architektura - technologie

31. ADB
adb shell input tap 300 300
adb shell input swipe 100 200 100 850
adb shell input text lollo
adb shell input trackball roll 0 -5
adb shell input keyevent KEYCODE_BACK
adb shell input keyevent 4

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

33. AngularJS GUI

34. Let's see it in action
Zobaczmy to w akcji

36. What's next?
Co dalej?

38. ●
save tests and run it directly on webservice
zapisywanie testów i uruchamianie ich bezpośrednio na
webservice
●
prepare project for continuous integration
przygotowanie projektu pod continuous integration
●
iOS and Windows Phone support
wsparcie platform iOS i Windows Phone
●
what do YOU need?
a czego Ty potrzebujesz?
TODO

39. Any questions?

40. About me
Krzysztof "Procek" Ścira
●
MEng Information
Technology in Metallurgy
●
Front-end developer
& desi9n.pl CEO
●
front-end coach in SAGES
●
kscira@gmail.com