Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Jonathan Lipps

May 16, 2014
Tweet

More Decks by Jonathan Lipps

Other Decks in Programming

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