Automated Unit & Functional Tests for HTML5 Mobile Apps [Workshop]

HTML5 and hybrid mobile apps are becoming increasingly important, whether as alternative instances of successful web apps, or as mobile-only experiences. A combination of JS unit testing and functional UI testing helps ensure every HTML5 project stays bug-free throughout release cycles, and opens up the possibility for continuously-delivered mobile apps.

In this workshop, we’ll get hands-on with QUnit (for unit testing) and Appium (for functional testing), and write some tests together for a jQuery Mobile-based HTML5 site packaged as a cross-platform hybrid mobile app using Phonegap/Cordova. Then we’ll run the tests using the Sauce Labs cloud service, dig into the results, and talk about speeding up build times using parallelisation of test runs.

Transcript

1. mobile automation made awesome
   Jonathan Lipps • Director of Ecosystem & Integrations • Sauce Labs
   @AppiumDevs • @jlipps • @saucelabs
   jQueryUK Workshop • Oxford, UK
   May 16 2014
   

   View Slide

2. Ecosystem &
   Integrations
   Project Lead &
   Architect
   Unit/Functional Mobile Testing with Appium and Sauce Labs
   Jonathan Lipps • Director of Ecosystem & Integrations • Sauce Labs
   @AppiumDevs • @jlipps • @saucelabs
   

   View Slide

3. appium introduction
   

   View Slide

4. The Dev Cycle of
   Optimal Happiness
   [ ]
   

   View Slide

5. appium is the cross-platform
   solution for native and hybrid
   mobile automation
   

   View Slide

6. Philosophy
   R1. Test the same app you submit to the
   marketplace
   R2. Write your tests in any language, using
   any framework
   R3. Use a standard automation specification
   and API
   R4. Build a large and thriving open-source
   community effort
   

   View Slide

7. View Slide

8. appium architecture
   

   View Slide

9. Automation Orchestra
   Apple Instruments & UIAutomation for iOS
   Google UiAutomator for Android (4.2.1 up)
   Selendroid for older Android
   WebDriver interface
   

   View Slide

10. appium is an HTTP server
    that creates and handles
    WebDriver sessions
    

    View Slide

11. appium extends the
    WebDriver protocol with
    mobile-specific behaviors
    

    View Slide

12. appium setup
    

    View Slide

13. Requirements (1/2)
    • Mac (10.8/10.9)
    • Android automation works on PC/Linux too
    • Node >= 0.10
    • Xcode 5.1 with CLI tools and iOS 7.1
    

    View Slide

14. Requirements (2/2)
    • Android Developer Tools >= 22
    • http://developer.android.com/sdk/index.html
    • mv to /usr/local/adt
    • export ANDROID_HOME=/usr/local/adt/sdk
    • add (.bashrc, .zshrc, etc):
    export PATH=”$PATH:$ANDROID_HOME/tools:
    $ANDROID_HOME/platform-tools”
    

    View Slide

15. Install HAXM for Android Speed!
    • open /usr/local/adt/sdk/extras/intel/
    Hardware_Accelerated_Execution_Manager/
    IntelHAXM.dmg
    • https://software.intel.com/en-us/android/
    articles/intel-hardware-accelerated-
    execution-manager
    

    View Slide

16. Make an Android Device
    • android
    • Check ‘Intel x86 Atom System Image’ - Android (4.4)
    • Click ‘Install 1 package...’
    • Tools > Manage AVDs
    • New...
    

    View Slide

17. • AVD Name: workshop
    • Device: Nexus S
    • Target: Android 4.4
    • CPU: Intel/Atom
    • Skin: hw controls
    • Host GPU
    Create the Image
    

    View Slide

18. Launch AVD
    • In a new terminal window:
    • emulator @workshop -netfast
    • Go through the new device tour
    • $ANDROID_HOME/sdk/tools/emulator @workshop -netfast (without env)
    

    View Slide

19. Get the workshop code
    • git clone https://github.com/jlipps/
    jqueryuk-workshop-2014.git
    • cd jqueryuk-workshop-2014
    

    View Slide

20. Install dependencies
    • npm install -g appium # no sudo!
    • npm install -g cordova
    • npm install -g mocha
    • npm install .
    

    View Slide

21. unit tests
    

    View Slide

22. Run local server
    • node server.js
    • # visit http://localhost:8081
    

    View Slide

23. View Slide

24. Run QUnit tests
    • http://localhost:8081/test.html
    • # moviesearch/www/test.html
    • # moviesearch/www/test.js
    

    View Slide

25. Set up Sauce Labs env vars
    • http://saucelabs.com/signup/plan/free
    • http://saucelabs.com/account
    • # add to .bashrc or equivalent
    • export SAUCE_USERNAME=”myusername”
    • export SAUCE_ACCESS_KEY=”xxxxxxxx”
    

    View Slide

26. Get Sauce Connect
    • https://saucelabs.com/docs/connect
    • cp ~/Downloads/sc-4.2-osx/bin/sc \
    /usr/local/bin
    

    View Slide

27. Start Sauce Connect
    • sc -u $SAUCE_USERNAME -k $SAUCE_ACCESS_KEY
    

    View Slide

28. Run JS unit tests on Sauce Labs
    • ./test/jsunit.sh
    • http://saucelabs.com/tests
    

    View Slide

29. appium test model
    

    View Slide

30. Start/stop a session
    

    View Slide

31. Find & Interact with Elements
    

    View Slide

32. Automate a WebView
    

    View Slide

33. appium tests
    

    View Slide

34. Build & run sample apps
    • ./go_ios.sh
    • ./go_android.sh
    

    View Slide

35. Launch Appium
    • sudo authorize_ios
    • appium
    

    View Slide

36. Moment of truth...
    • mocha -t 90000 -R spec test/ios.js
    • mocha -t 90000 -R spec test/android.js
    

    View Slide

37. Upload app to Sauce Storage
    • ./test/upload.sh
    • # or use pre-uploaded app url
    

    View Slide

38. Run Appium tests on Sauce
    • SAUCE=1 mocha -t 90000 -R spec test/ios.js
    

    View Slide

39. Questions?
    http://appium.io
    https://github.com/appium/appium
    @AppiumDevs • @jlipps • @saucelabs
    

    View Slide

40. Thanks!
    http://appium.io
    https://github.com/appium/appium
    @AppiumDevs • @jlipps • @saucelabs
    

    View Slide