A Journey Inside a React Native App No Pain No Gain

THESSALONIKI SOFTWARE TESTING & QA MEETUP / March 2023
A Journey inside
a React Native App
No pain, no gain

" "
I have changed only 1 line of code. No testing is needed….
Anonymous dev
George Romanas
Software Engineer in Test Lead
@CamelotLS since 2016

" "
Make it work, make it right, make it fast
Kent Beck
Ilias Giannoulis
Software Engineer in Test Lead
@CamelotLS since 2019

No parallelization needed just implementing and running some tests
Only 1 emulator and 1 simulator available
Implementing functional tests and running tests one by one
Only one Mac machine locally used to build the app
How Everything Started

The
Framework
The Journey / The Framework
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts

The Framework

The Framework
Tools:

The Framework
Reqs:
Tool must be cross-platform
1
Ideally developers should be involved on testing (Javascript)
2
Test on emulators / simulators / real devices
3
CI/CD
4
5 Reporting
6 Test BDD style (Given, When, Then)

Appium in order to be able to perform speci
fi
c actions
like swipe, webview context
1
Wdio solid solution, easy to setup, JS based framework, using
several plugins (Appium, image comparison, reporting) in order
to have a robust test suite, built in assertion library, parallel
execution, plays locally/grid/cloud
2
Cucumber for the behavior driven development customer wants
3
The Framework

The
Framework
The Journey / Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts
Selectors
Mocking

Approach
How
Accessibility ID
XPath
iOS class chain
Android UI selector
testProperties
Selectors

Accessibility ID is a cross platform solution
1
XPath selectors only in very rare cases where accessibility
Ids cannot be implemented
2
iOS class chain, a hybrid solution between an XPath and a predicate string,
developed by Appium for hierarchical queries in more performant way
3
Android UISelector speci
fi
es the elements in the layout hierarchy
fi
ltered
by properties (text value, class name etc) usually used for interacting
with Android emulator menu elements
4
Selectors

Selectors
In case of an automation build we are returning
the accessibility labels inside the automation build
1
When test-properties are used into the code of a
view label then it has the accessibility label on it
2In case of an IOS automation build we
introduce testID
3

Selectors

The
Framework
The Journey / Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts
Mocking

Approach
Mimic the HTTP API’s behaviour
Minimal dependency by 3rd party services
Minimise Flakiness
Testing Edge case/ Error /Delay cases
How
Wiremock
Mocking

Mocking
GET: /api/system/status?op-hours=true
"headers": {
"X-CLIENT-VERSION": {
"matches": ".*"
},
"X-CLIENT-PLATFORM": {
"matches": ".*"
}
}
RESPONSE:
"response": {
"status": 200,
"bodyFileName": "200/system/status/system_status_twenty_four_ophours.json",
"headers": {
"Content-Type": "application/json"
},
}

Mocking
{
"request": {
"method": "GET",
"url": "/api/system/status?op-hours=true",
"headers": {
"matches": ".*"
},
"matches": ".*"
}
}
},
"response": {
"status": 200,
"bodyFileName": “200/system/status/
system_status_w_all_games_o
ffl
ine.json",
"headers": {
},
"transformers": ["response-template"]
}
}
POST: /__admin/mappings
"headers": {
"matches": ".*"
},
"matches": ".*"
}
}
RESPONSE:
"response": {
"status": 200,
"bodyFileName": "200/system/status/system_status_w_all_games_o
ffl
ine.json",
"headers": {
},
}

Mocking
{
"priority": 1,
"request": {
"method": "GET",
"url": "/api/system/status?op-hours=true",
"headers": {
"X-Test-Client-UniqueId":{
"equalTo": "992B86B3-63EC-425C-9053-4EF5AF9649"
},
"matches": ".*"
},
"matches": ".*"
}
}
},
"response": {
"status": 200,
"bodyFileName": “200/system/status/
system_status_w_all_games_o
ffl
ine.jsonson",
"headers": {
},
"transformers": ["response-template"]
}
}
POST: /__admin/mappings
RESPONSE:
"response": {
"status": 200,
"bodyFileName": "200/system/status/system_status_w_all_games_o
ffl
ine.json",
"headers": {
},
}
"headers": {
"matches": ".*"
},
"matches": ".*"
},
"X-Test-Client-UniqueId":{
"equalTo": "992B86B3-63EC-425C-9053-4EF5AF9649"
}
}
UDID: 992B86B3-63EC-425C-9053-4EF5AF9649

The
Framework
The Journey / Testing Strategy
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts

Platforms : iOS && Android
Devices : Based on customer reports
Tests type : Happy Paths / Edge scenarios
Device type : Emulators / Simulators / Real
All device tests : Do not test on all
Tests Execution : Run tests in parallel
Approach
Cucumber JS Tags
Single wdio conf
fi
les using parameters con
fi
gurable during
build
SauceLabs
How
Testing Strategy

Testing Strategy

The
Framework
The Journey / Reporting
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts

Quick overview of all tested features
Thorough analysis of how many scenarios failed / passed
Search for a speci
fi
c scenario
Metadata used
Screenshot of the last screen of a test before a test fails
Share results with client
Approach
multiple-cucumber-html-reporter
How
Reporting

Reporting

The
Framework
The Journey / Visual Testing
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts

Screenshots are generated the
fi
rst time a Visual test is triggered
All screens or speci
fi
c elements to be compared against a baseline
screenshot
Speci
fi
c elements to be excluded when capturing a screenshot
Animations to be disabled
Approach
How
Wdio-natine-app-compare-service
Visual Testing

Visual Testing

The
Framework
The Journey / im|possible
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts

im|possible

im|possible - Geolocation

im|possible - Biometrics

im|possible - Ticket Scanning

The
Framework
The Journey / CI/CD
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
CI/CD
Final
Thoughts

CI/CD

Approach
Fast Feedback
Scheduled builds are triggered every night in order to provide extra
stability
No PR is merged unless speci
fi
c builds are triggered and concluded
successfully
Trigger builds manually
How
Bitrise
Saucelabs
CI/CD

CI/CD

The
Framework
The Journey / Final Thoughts
Mocking
Selectors
Testing
Strategy
Reporting
Visual Testing
im|possible
Final
Thoughts
CI/CD

Increased quality
Development process speedup
Test execution speedup
Most of the time one code for both platforms
Con
fi
dence for the team, QAs focusing mainly
on exploratory testing
No 3rd parties services tested
App is not a production app
Animations disabled
Pros Cons
Final Thoughts

App Ratings

Recognition

Thank you.
Ilias Gianoulis George Romanas

A Journey Inside a React Native App No Pain No Gain

Recommandé

Recommandé

Contenu connexe

Similaire à A Journey Inside a React Native App No Pain No Gain

Similaire à A Journey Inside a React Native App No Pain No Gain (20)

Plus de Thessaloniki Software Testing and QA meetup

Plus de Thessaloniki Software Testing and QA meetup (9)

Dernier

Dernier (20)

A Journey Inside a React Native App No Pain No Gain