A Cross platform mobile automation framework
 Created & Presented by, Priti Biyani
 
 http://pritibiyani.github.io/ @pritibiyani ONE PAGE TO TEST THEM ALL

WE SHOULD REMEMBER… ! ๏ Easy to add tests. 
 ๏ Allow Reuse of the code. 
 ๏ Promote high level thinking. 
 ๏ Simple to accommodate changes in framework 
 ๏ Keep it simple. 2

AUTOMATION PATTERN 3

U.S. AIRLINE MOBILE APP ๏ iOS, Android, iPad, Blackberry, Windows and Mobile Web
 
 ๏ Apple Appstore featured app (Travel)
 4

U.S. AIRLINE MOBILE APP 5

CALATRAVA Custom open source cross platform javascript framework - Calatrava. https://github.com/calatrava/calatrava ‣ Pure native screens ‣ Pure HTML ‣ HTML + Native widgets ‣ Native + HTML Webviews 6

AUTOMATION ๏ Android 
 Calabash Android 
 ๏ iOS 
 Calabash iOS ๏ Mobile Web 
 Watir Webdriver 
 7

PROBLEM STATEMENT 8 
 Create a generic automation framework which could support each of the 
 three UI automation tools and work seamlessly across both native and 
 hybrid UI screens

9 Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions Android 
 Pages iOS 
 pages web
 pages PAGE OBJECT MODEL

SOLUTION ANALYSIS ๏ ADDING NEW AUTOMATION? 
 ๏ CODE REUSABILITY?
 ๏ MAKE CHANGE AT ONLY ONE PLACE? ๏ CLASS EXPLOSION 
 
 
 10

11 Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions Single 
 Page
 for each 
 Platform COMMON PAGE OBJECT

SOLUTION ANALYSIS ๏ ADDING NEW AUTOMATION?
 ๏ CODE REUSABILITY ?
 ๏ MAKE CHANGE AT ONLY ONE PLACE ? ๏ CLASS EXPLOSION 
 
 
 12

13 COMMON PAGE OBJECT — CONCERNS Single 
 Page
 for each 
 Platform Automation Tools Calabash droid Calabash iOS Watir Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar

OBJECT MODELING Lets try and do a Object Modeling exercise! Single page object class
 ➡ What are the key fields? ➡ What’s the key behavior? 14

PAGE IDENTIFIER 15 Page Name : String
 Id : Map Identify each page uniquely on the device
 {
 :web => "//div[@id='payment_info']",
 :ios => "all webView css:'#payment_info'",
 :droid => "all webView css:'#payment_info'"
 }

PAGE ID CLASS 16 PageId Id : Map
 exists? () Check if locator specified by id exists on the UI Calabash Android and IOS: 
 query(locator).empty?
 
 
 Mobile Web (Watir):
 
 Browser.element(:css => locator).present?

ID EXISTS CHECK 17 
 def exists?
 case platform
 when ANDROID
 query(ui_query).empty?
 when IOS
 query(ui_query).empty?
 when WEB
 Browser.element(:css => locator).present?
 end end


DRIVER ABSTRACTION 18 Page Name : String
 Id : PageId PageId Field : Map
 exists? () 
 PageId Driver Platform : droid
 exists? () 
 Driver Platform: ios exists? () 
 Driver Platform: web
 exists? () 
 def exists?(id_map) # ----- # DROID SPECIFIC CODE # ----- end 
 def exists?(id_map) # ----- # iOS SPECIFIC CODE # ----- end def exists?(id_map) # ----- # web SPECIFIC CODE # ----- end


19 COMMON PAGE OBJECT — CONCERNS Single 
 Page
 for each 
 Platform Automation Tools Calabash droid Calabash iOS Watir Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar

ELEMENTS 20 Page Name : String
 Id : PageId
 Elements 
 Element.new({
 :web => ‘#save_and_continue_button’,
 :ios => "navigationButton marked:'DONE'",
 :droid => "* marked:'Done'"
 } 
 Element Id: Map
 click () 20 def click
 case platform
 when ANDROID
 touch(query(locator))
 when IOS
 touch(query(locator))
 when WEB
 Browser.element(:css => locator).click()
 end end


ELEMENTS DELEGATE TO DRIVER 21 Page Name : String
 Id : Map Elements Element Id : Map
 Driver : Driver click() 21 Driver Platform: droid
 exists? 
 click() 
 Driver Platform: ios exists? 
 click() 
 def click(id_map)
 # ----- # DROID SPECIFIC CODE # ----- end
 def click(id_map)
 # ----- # iOS SPECIFIC CODE # ----- end
 def click(id_map)
 # ----- # WEB SPECIFIC CODE # ----- Driver Platform: web
 exists? click()

MORE ELEMENTS 22 Page Name : String
 Id : PageId
 Element 1: Element Element 2: Element …. 22 Driver Platform : droid
 exists? 
 click() 
 setText()
 getText()
 checked()
 
 Textbox setText()
 getText() id : map Checkbox checked?()
 check(item) id : map Dropdown select(item)
 id : map Driver Platform : ios
 exists? 
 click() 
 setText()
 getText()
 checked()
 
 Driver Platform : web
 exists? 
 click() 
 setText()
 getText()
 checked()
 
 Element Id : Map
 Driver : Driver exists? ()


23 COMMON PAGE OBJECT — CONCERNS Single 
 Page
 for each 
 Platform Automation Tools Calabash droid Calabash iOS Watir Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar

24 Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions PAGE OBJECT MODEL page page.service element.ui_interaction Driver

PAGE TRANSITION 25 25 Login Home def login
 click_login_button
 wait_for_home_page_to_load
 return HomePage.new
 end [ success ] 
 def 
 click_button
 wait_for__to_load
 return 
 end

TRANSITION MODELING 1. driver.click ๏ Driver should be responsible only for UI interaction. ๏ Driver should not know about higher level abstraction Page.
 2. element.click ๏ It will not be applicable to all elements. 
 3. Transition Aware Element ➡ An element that understands page transitions. 26

TRANSITION ELEMENT 27 Page Name : String
 Id : PageId
 Elements Element 27 Driver Platform: droid
 exists? 
 click() 
 setText()
 getText()
 checked()
 
 Textbox setText()
 getText() id : map Checkbox checked?()
 check(item) id : map Dropdown select(item)
 id : map Id : Map
 Driver : Driver Driver Platform: ios
 exists? 
 click() 
 setText()
 getText()
 checked()
 
 Driver Platform: web
 exists? 
 click() 
 setText()
 getText()
 checked()
 
 exists? ()
 TransitionElement click(item)
 id : map

TRANSITION ELEMENT 28 @login_button = TransitionElement.new(
 { 
 :web => '#continue_button',
 :ios => "* marked:'Login'",
 :droid => "* marked:'Login'"
 },
 {
 :to => HomePage,
 }
 )
 
 Next Page Class

TRANSITION ELEMENT - MULTIPLE TRANSITION 29 29 Login Admin Home Page Member Home Page userType? Adm in M em ber [success]

TRANSITION ELEMENT - MULTIPLE TRANSITION @login_button = TransitionElement.new(
 { 
 :web => '#continue_button',
 :ios => "* marked:'Login'",
 :droid => "* marked:'Login'"
 },
 {
 :to => [AdminPage, UserPage],
 
 }
 )
 Multiple Transition

TRANSITION ELEMENT - ERROR TRANSITION Login Admin Home Page Member Home Page userType? Adm in [ SUCCESS ] [ FAIL ] M em ber

TRANSITION ELEMENT - ERROR TRANSITION @login_button = TransitionElement.new(
 { 
 :web => '#continue_button',
 :ios => "* marked:'Login'",
 :droid => "* marked:'Login'"
 },
 {
 :to => [AdminPage, UserPage],
 :error => Login
 }
 )
 
 Error Representation

MULTIPLE TRANSITIONS - WRONG TRANSITION ‣ Scenario: If there is a bug in code, app transitions to wrong page from list of multiple transitions. 
 
 
 ➡ Tests should take care for assertions of correct page, not the framework.
 


TRANSITION ELEMENT 34 def wait_till_next_page_loads(next_pages, error_page)
 
 has_error, found_next_page = false, false
 
 begin
 wait_for_element(timeout: 30) do
 found_next_page = next_pages.any? { |page| page.current_page?}
 has_error = error_page.has_error? if error_page
 found_next_page or has_error
 end
 has_error ? error_page : next_pages.find { |page| page.current_page?}
 rescue WaitTimeoutError
 raise WaitTimeoutError, "None of the next page transitions were found. Checked for: => #{next_page_transitions.join(' ,')}"
 end
 end
 
 


35 COMMON PAGE OBJECT — CONCERNS Single 
 Page
 for each 
 Platform Automation Tools Calabash droid Calabash iOS Watir Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar

IMPLEMENTATION NOTES ‣ We "require" specific driver class during test execution. 
 ‣ Page registry, can be queried for page object instances. ‣ PageRegistry.get "Login Page”
 ‣ Rspec Unit Tests ‣ Rake task to create new page classes. 36

LEARNINGS ‣ QA/Dev Pairing
 ‣ Use case driven development
 ‣ Evolution 37

SUMMARY ๏ Good OO design is the key 
 ๏ Good abstractions can help solve hard problems 38

CONCLUSION 39 
 Today, to add automation to support new feature development across the three different platforms requires changes in just one place.

LINKS TO CODE SAMPLES 1. Github 
 
 https://github.com/pritibiyani/cross-platform-single-page-example
 2. Link of the talk given at VodQA Bangalore 
 
 http://pritibiyani.github.io/blog/speaking-at-vodqa-banglore/ 40

Reach out to us at Priti Biyani @pritibiyani
 
 
 http://pritibiyani.github.io/
 THANK YOU