Functionally Mobile (Automation)

One of Silicon Valley’s most accomplished internet veterans, Marc Andreessen, declared software as a driving factor of innovation and economic growth with the famous statement: “In short, software’s eating the world”.

As software quickly innovates, we witness a growing shift in the way humans interact with software applications. The most obvious trend is the shift from consumer and enterprise grade desktop applications to the mobile/smartphone platform.

My talk will outline a comprehensive approach for tackling the key challenges attached to the delivering smartphone users with a reliable and continuously tested mobile experience. My toolkit relies on emerging and exciting new open source components (some of which to be announced for the first time at JSConf.eu).

I’m looking forward to taking JSConf EU attendees on a ride into the future of mobile app delivery, to spread some of my excitement around the powerful coordination of emerging open source services and javascript technologies.

Transcript

1. Functionally Mobile I believe every mobile app should be tested through automation. Sebastian Tiedtke @sourishkrout Sunday, September 15, 13
2. Paradigm Shift? More mobile devices More consumers More apps Sunday, September 15, 13
3. Mobile creates New Opportunities Sunday, September 15, 13
4. Opportunities come with Challenges Sunday, September 15, 13
5. Multitude of Platforms Sunday, September 15, 13
6. Device Fragmentation * Rectangle area represents number of device units sold as of July 2012 Sunday, September 15, 13
7. Different Screen Sizes Sunday, September 15, 13
8. AppStore Approval Sunday, September 15, 13
9. Quality Assurance is a key factor to success - Find bugs before app users do - Execute tests quickly and repetitively - Systematically and automated Sunday, September 15, 13
10. Comprehensive App Development Approach using Web Technologies Sunday, September 15, 13
11. Test App - Quick Demo Courtesy of Christophe Coenraets from Adobe https://github.com/ccoenraets/directory-backbone-topcoat Sunday, September 15, 13
12. Apache Cordova / PhoneGap Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript. Sunday, September 15, 13
13. Topcoat CSS for clean and fast web apps. Benchmarked for performance. Think twitter bootstrap for apps. Sunday, September 15, 13
14. Appium Appium is an open source test automation framework for use with native and hybrid mobile apps. It drives iOS and Android apps using the WebDriver JSON wire protocol. Sunday, September 15, 13
15. Why Appium? R1. Test the same app you submit to the market place 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 Test execution on emulators and real devices. Sunday, September 15, 13
16. What’s a Hybrid App? Apache Cordova runs a web app hosted within a native app (iOS, Android, etc) and make its UI accessible through a “fullscreen” WebView Cordova exposes native platform APIs to the web app using a unified Javascript API + Sunday, September 15, 13
17. Native vs Webview Context Same protocol to talk to native as well as webview parts of mobile apps API calls available to switch contexts + Sunday, September 15, 13
18. Native vs Webview Context it('should confirm table cell element is visible', function(done) { h.driver.elementsByTagName('tableCell', function(err, els) { // do something with native table cell (iOS) elements }); }); it('should confirm spans are visible', function(done) { h.driver.elementsByTagName('span', function(err, els) { // do something with span elements (DOM) }); }); + Sunday, September 15, 13
19. Test All The Things! Execute the exact same test suite on iOS and Android Demo + Code Sunday, September 15, 13
20. Test Implementation Based on node.js 0.11’s generators (ES6 Harmony) - Mocha - WD.js through yiewd.js (generator based) - monocle.js Sunday, September 15, 13
21. yit("should open location map and dismiss modal dialog", function*() { var options = yield h.driver.elementsByCssSelector('.actions a'); options.length.should.equal(6); yield options[3].click(); yield nativeSeq(h, function*() { yield dismiss(h.driver); }); }); Harmony? Generators? Based on Jonathan Lipps’ work: https://npmjs.org/package/monocle-js https://npmjs.org/package/yiewd Sunday, September 15, 13
22. What’s next? Continuous Integration with Jenkins, Travis, Strider, etc Appium Functional Testing at Scale using Sauce Labs (free for Open Source projects) Smoke tests are a good starting point Perfect to back up your Javascript unit tests Sunday, September 15, 13
23. Please Help Us! Appium: http://appium.io/ Gappium: https://github.com/appium/ io.appium.gappium.sampleapp Apache Cordova: http://cordova.apache.org/ Topcoat: http://topcoat.io/ @sourishkrout Sunday, September 15, 13