Slide 1
Slide 1 text
1
ONE PAGE TO TEST THEM ALL !
A Cross platform mobile automation framework
Priti Biyani | @pritibiyani
Selenium Conference, 2016
Slide 2
Slide 2 text
2
Slide 3
Slide 3 text
ABOUT ME
3
Slide 4
Slide 4 text
4
MOBILE ?
Slide 5
Slide 5 text
U.S. AIRLINE MOBILE APP
5
๏ iOS, Android, iPad, Blackberry, Windows and Mobile Web
๏ Apple Appstore featured app (Travel)
Slide 6
Slide 6 text
6
FUNCTIONAL TESTS ?
Slide 7
Slide 7 text
FUNCTIONAL TESTS
7
Slide 8
Slide 8 text
8
Saves Time Quality gatekeeper
Documentation
Regression
Domain
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
10
CASE STUDY
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
๏ Platforms:
๏ Android
๏ mobile Web
๏ iOS
๏ Native screens + Hybrid screens
๏ Different automation tools for each platforms.
12
EXAMPLE - FOOD DELIVERY SYSTEM
Slide 13
Slide 13 text
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
Slide 14
Slide 14 text
14
EXISTING APPROACHES
Slide 15
Slide 15 text
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
Slide 16
Slide 16 text
2. EXISTING APPROACHES - STRATEGY PATTERN
Android and ios app automation - by 3pillar
http://bit.do/3pillar_blog
Slide 17
Slide 17 text
3. EXISTING APPROACHES - SCREEN OBJECT PATTERN
http://bit.do/screen_object_pattern
Slide 18
Slide 18 text
18
APPROACHES - ANALYSIS
Feature File
———————
Given ..
When ..
Then ..
Step
Definitions
Android
Pages
18
iOS
Pages
Mobile web
Pages
Slide 19
Slide 19 text
๏ ADDING NEW AUTOMATION?
๏ CODE REUSABILITY?
๏ MAKE CHANGE AT ONLY ONE PLACE?
๏ CLASS EXPLOSION
19
SOLUTION ANALYSIS OF APPROACHES
Slide 20
Slide 20 text
20
APPROACHES - ANALYSIS
Feature File
———————
Given ..
When ..
Then ..
Step
Definitions
Android
Pages
20
iOS
Pages
Mobile web
Pages
Slide 21
Slide 21 text
21
DIFFERENT PAGE FOR
EACH PLATFORM !
Slide 22
Slide 22 text
22
APPROACHES - ONE PAGE FOR ALL PLATFORM
22
Feature File
———————
Given ..
When ..
Then ..
Step
Definitions
Single
Page
for each
Platform
Slide 23
Slide 23 text
๏ ADDING NEW AUTOMATION?
๏ CODE REUSABILITY?
๏ MAKE CHANGE AT ONLY ONE PLACE?
๏ CLASS EXPLOSION
23
SOLUTION ANALYSIS OF SINGLE PAGE FOR EACH PLATFORM
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
25
SINGLE PAGE FOR ALL!
Slide 26
Slide 26 text
๏ Single page
➡ Key fields?
➡ Key behavior ?
26
ONE PAGE OBJECT : OBJECT MODELING EXERCISE
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
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
Slide 29
Slide 29 text
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? ()
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
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? ()
Slide 33
Slide 33 text
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
click()
exists? ()
Slide 34
Slide 34 text
34
ONE PAGE OBJECT : ONE END TO END ACTION
Feature File
———————
Given ..
When ..
Then ..
Step
Definitions page
page.service
element.ui_interaction Driver
Slide 35
Slide 35 text
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
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
ONE PAGE OBJECT : NAVIGATION PATTERN
37
37
Iphone
Mobile Web
Android
37
Slide 38
Slide 38 text
๏ Menu is a PAGE?
๏ ID ?
๏ Name ?
๏ Elements - Menu Items.
38
NAVIGATION PATTERN
Slide 39
Slide 39 text
ONE PAGE OBJECT : MENU DESIGN
39
39
Menu
Name:
Id :
MenuItems : []
launch()
show_secondary()
show()
MenuItem
Name:
TargetPage :
MenuButton:
Type:
click()
is_secondary?()
Slide 40
Slide 40 text
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
Slide 41
Slide 41 text
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
click_button
wait_for__to_load
return
end
Slide 42
Slide 42 text
42
TRANSITION FROM
ONE PAGE TO
ANOTHER ?
Slide 43
Slide 43 text
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.
Slide 44
Slide 44 text
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?()
Slide 45
Slide 45 text
45
ONE PAGE OBJECT : TRANSITION
@checkout_button = TransitionElement.new(
{
:web => '#continue_button',
:ios => "* marked:'Order'",
:droid => "* marked:'Order Food'"
}
)
,
{
:to => UserDetails,
}
Slide 46
Slide 46 text
46
ONE PAGE OBJECT :MULTIPLE TRANSITION
Credit Card
option
Cash
O
n
delivery
[success]
User details
Credit Card page
Purchase summary
Payment
option
Slide 47
Slide 47 text
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],
}
Slide 48
Slide 48 text
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 ]
}
Slide 49
Slide 49 text
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.
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
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.
Slide 52
Slide 52 text
LEARNING
๏ Object design is key.
๏ Use case driven development
๏ Keep on building up on problem. Iterative solving.
Slide 53
Slide 53 text
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/
Slide 54
Slide 54 text
54
DEMO
Slide 55
Slide 55 text
55
Slide 56
Slide 56 text
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
Slide 57
Slide 57 text
LEARNING
57
Today, to add automation to support new feature development across the
three different platforms requires changes in
One Place!
Slide 58
Slide 58 text
THANKS
1. Aroj George (@arojp)
2. Rajdeep Verma
Slide 59
Slide 59 text
Priti Biyani @pritibiyani
pritibiyani.github.io
THANK YOU