One Page to test them all - An automation framework for cross platform

This is presented at Selenium conference, Bangalore, 2016.

1. 1 ONE PAGE TO TEST THEM ALL ! A Cross platform mobile automation framework
 Priti Biyani | @pritibiyani
 Selenium Conference, 2016
3. ABOUT ME 3
4. 4 MOBILE ?
5. U.S. AIRLINE MOBILE APP 5 ๏ iOS, Android, iPad, Blackberry, Windows and Mobile Web
 
 ๏ Apple Appstore featured app (Travel)
 

6. 6 FUNCTIONAL TESTS ?
7. FUNCTIONAL TESTS 7
8. 8 Saves Time Quality gatekeeper Documentation Regression Domain
9. AUTOMATION EXPECTATION ๏ Easy to add tests. 
 ๏ Simple to accommodate changes.
 ๏ Allow Reuse of the code. 
 ๏ Promote high level thinking.
 ๏ Keep it simple
 ๏ Keep it simple.
 9
10. 10 CASE STUDY
11. EXAMPLE - FOOD DELIVERY SYSTEM 11 Food Menu Order food User details (name, address) Payment option Summary Credit Card details Credit Card option Cash on delivery
12. ๏ Platforms: ๏ Android ๏ mobile Web ๏ iOS 
 ๏ Native screens + Hybrid screens
 ๏ Different automation tools for each platforms. 12 EXAMPLE - FOOD DELIVERY SYSTEM
13. PROBLEM STATEMENT 13 
 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
14. 14 EXISTING APPROACHES
15. 1. EXISTING APPROACHES - BY CALABASH Cross-platform Acceptance Testing Best Practices by calabash
 
 http://bit.do/github_calabash_automation_practice
 1. Different pages for ios and android 2. Each page will implement respective contract for given platform 3. Conditional loading of pages 
 

16. 2. EXISTING APPROACHES - STRATEGY PATTERN Android and ios app automation - by 3pillar
 
 http://bit.do/3pillar_blog

17. 3. EXISTING APPROACHES - SCREEN OBJECT PATTERN http://bit.do/screen_object_pattern

18. 18 APPROACHES - ANALYSIS Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions Android 
 Pages 18 iOS 
 Pages Mobile web 
 Pages
19. ๏ ADDING NEW AUTOMATION?
 ๏ CODE REUSABILITY?
 ๏ MAKE CHANGE AT ONLY ONE PLACE?
 ๏ CLASS EXPLOSION 19 SOLUTION ANALYSIS OF APPROACHES
20. 20 APPROACHES - ANALYSIS Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions Android 
 Pages 20 iOS 
 Pages Mobile web 
 Pages
21. 21 DIFFERENT PAGE FOR 
 
 EACH PLATFORM !
22. 22 APPROACHES - ONE PAGE FOR ALL PLATFORM 22 Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions Single 
 Page
 for each 
 Platform
23. ๏ ADDING NEW AUTOMATION?
 ๏ CODE REUSABILITY?
 ๏ MAKE CHANGE AT ONLY ONE PLACE?
 ๏ CLASS EXPLOSION 23 SOLUTION ANALYSIS OF SINGLE PAGE FOR EACH PLATFORM
24. 24 COMMON PAGE OBJECT : CONCERNS Single 
 Page
 for each 
 Platform Automation Tools Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar
25. 25 SINGLE PAGE FOR ALL!

26. ๏ Single page 
 ➡ Key fields? ➡ Key behavior ? 26 ONE PAGE OBJECT : OBJECT MODELING EXERCISE
27. 27 ONE PAGE OBJECT : PAGE IDENTIFIER Page Name : String
 Id : Map {
 :web => "'#login_form'",
 :ios => "label marked:'LoginPageHeaderLabel'",
 :droid => "* id:'title_login'"
 } Identify each page uniquely on the device

28. 28 ONE PAGE OBJECT : ID EXISTS CHECK 
 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

29. 29 ONE PAGE OBJECT : DRIVER ABSTRACTION Driver Platform : droid
 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
 Page Name : String
 Id : PageId PageId Field : Map
 exists? () 
 Driver Platform : ios
 exists? () 
 Driver Platform : web
 exists? () 

30. 30 ONE PAGE OBJECT : CHECKLIST Single 
 Page
 for each 
 Platform Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar Automation Tools
31. 31 ONE PAGE OBJECT : ELEMENTS Page Name : String
 Id : PageId
 Elements 
 Element.new({
 :web => ‘#save_and_continue_button’,
 :ios => "navigationButton marked:'DONE'",
 :droid => "* marked:'Done'"
 } 
 Element Id: Map
 click() def click
 case platform
 when ANDROID
 touch(query(locator))
 when IOS
 touch(query(locator))
 when WEB
 Browser.element(:css => locator).click()
 end end

32. ONE PAGE OBJECT : ELEMENT DELEGATING ACTION TO DRIVER 32 Page Name : String
 Id : Map Elements Element Id : Map
 Driver : Driver click() 32 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 : droid
 exists? () 
 Driver Platform : ios
 exists? () 
 Driver Platform : web
 exists? () 

33. ONE PAGE OBJECT : MORE ELEMENTS 33 33 Element id_map click()
 exists? () Checkbox id_map check()
 checked? () Textbox id_map set_text()
 get_text() Dropdown id_map select() Driver <platform> click()
 exists? ()

34. 34 ONE PAGE OBJECT : ONE END TO END ACTION Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions page page.service element.ui_interaction Driver
35. 35 ONE PAGE OBJECT : ONE END TO END ACTION Feature File
 ——————— 
 Given ..
 When .. 
 Then .. Step 
 Definitions page food_cart_page.checkout element.ui_interaction Driver order_food
 .feature def _checkout
 @checkout.click
 end
36. 36 ONE PAGE OBJECT : CHECKLIST Single 
 Page
 for each 
 Platform Automation Tools Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar
37. ONE PAGE OBJECT : NAVIGATION PATTERN 37 37 Iphone Mobile Web Android 37
38. ๏ Menu is a PAGE? ๏ ID ? ๏ Name ? ๏ Elements - Menu Items.
 38 NAVIGATION PATTERN
39. ONE PAGE OBJECT : MENU DESIGN 39 39 Menu Name: <String>
 Id : <PageId>
 MenuItems : [] launch() show_secondary() show() MenuItem Name: <String>
 TargetPage : <Page>
 MenuButton: <Element> Type: <enum> click() is_secondary?()
40. 40 ONE PAGE OBJECT : CHECKLIST Single 
 Page
 for each 
 Platform Automation Tools Different UI actions touch click Locators Navigation Patterns Nav Drawer Menu Bar Tab Bar
41. 41 ONE PAGE OBJECT : TRANSITION Order food User details def proceed
 order_food.click
 wait_for_user_page_to_load
 return UserDetails.new
 end [ success ] 
 def <action>
 click_button
 wait_for_<next_page>_to_load
 return <NextPage.new>
 end
42. 42 TRANSITION FROM 
 
 ONE PAGE TO 
 
 ANOTHER ?
43. 43 ONE PAGE OBJECT : TRANSITION 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.
44. 44 ONE PAGE OBJECT : TRANSITION Driver Platform: droid exists?
 click()
 getText()
 checked() Driver Platform: iOS exists?
 click()
 getText()
 checked() Driver Platform: iOS exists?
 click()
 getText()
 checked() Transition element id : map click()
 
 Checkbox id : map checked()
 check() Textbox id : map setText()
 getText() Page Name: String
 Id: pageId
 Elements
 Element Id: pageId
 Driver: Driver
 exists?()
45. 45 ONE PAGE OBJECT : TRANSITION @checkout_button = TransitionElement.new(
 { 
 :web => '#continue_button',
 :ios => "* marked:'Order'",
 :droid => "* marked:'Order Food'"
 }
 
 
 
 
 
 
 )
 
 ,
 {
 :to => UserDetails,
 }
46. 46 ONE PAGE OBJECT :MULTIPLE TRANSITION Credit Card option Cash O n delivery [success] User details Credit Card page Purchase summary Payment option
47. 47 ONE PAGE OBJECT :MULTIPLE TRANSITION @user_details_checkout = TransitionElement.new(
 { 
 :web => '#continue_button',
 :ios => "* marked:'Checkout'",
 :droid => "* marked:’Checkout For Payment'"
 },
 
 
 
 
 
 )
 
 Multiple Transition {
 :to => [CreditCardPage, PurchaseSummary],
 
 }

48. 48 ONE PAGE OBJECT :MULTIPLE TRANSITION @user_details_checkout = TransitionElement.new(
 { 
 :web => '#continue_button',
 :ios => "* marked:'Checkout'",
 :droid => "* marked:’Checkout For Payment'"
 },
 
 
 
 
 
 
 )
 
 Error {
 :to => [ CreditCardPage, PurchaseSummary ],
 :error => [ UserDialog ]
 }
 

49. 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.
 

50. 50 ONE PAGE OBJECT : TRANSITION Error 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
 — - - 
 end
 
 end
 

51. IMPLEMENTATION DETAILS ๏ We "require" specific driver class during test execution. 
 ๏ Page registry, can be queried for page object instances.
 ๏ Rspec Unit Tests
 ๏ Rake task to create new page classes.
52. LEARNING ๏ Object design is key. 
 ๏ Use case driven development
 ๏ Keep on building up on problem. Iterative solving. 

53. LINKS 1. Github 
 
 https://github.com/CrossPlatformPageObject/cross-platform-single-page-example
 2. Link of the talk given at VodQA Bangalore 
 
 https://pritibiyani.github.io/blog/speaking-at-vodqa-banglore/
54. 54 DEMO
56. EXAMPLE - FOOD DELIVERY SYSTEM 56 Food Menu Order food User details (name, address) Payment option Summary Credit Card details Credit Card option Cash on delivery
57. LEARNING 57 
 Today, to add automation to support new feature development across the three different platforms requires changes in One Place!
58. THANKS 1. Aroj George (@arojp)
 
 2. Rajdeep Verma
 
 

59. Priti Biyani @pritibiyani
 
 pritibiyani.github.io
 THANK YOU