Android ReactNative UITesting
-
Upload
vishal-banthia -
Category
Software
-
view
183 -
download
0
Transcript of Android ReactNative UITesting
VishalAndroid Test Night #2
Android React Native UITesting
Software Engineer in Test
Case Study (Mobile Automation)
SWET (past)
Core Member
Vishal Banthia @vbanthia @vbanthia_
Some Previous Talks, Blogs & Tutorials
• Android E2E Testing at Mercari @ Android Test Night
• Reliable Mobile Test Automation @SRE-SET Automation Night
• Android Device Farm at Mercari
• Appium Docker Demo
• STF Appium Example
• About React Native
• Automating React Native UITests using Appium
• Current problems with React Native tests
• Next plan
Agenda
マスタータイトルの書式設定
• マスターテキストの書式設定In June, we had a major update in mercari US app.
mercari US app
Native Native Native React-Native
マスタータイトルの書式設定
• マスターテキストの書式設定• Because its NATIVE not hybrid• Cross Platform. Works for both android and iOS• Reusable UI components• Faster development with Live-Reload feature• Can deploy anytime like backend. No Apple pain!• Many more ...
Why React-Native
マスタータイトルの書式設定
• マスターテキストの書式設定
UITesting ...
マスタータイトルの書式設定
• マスターテキストの書式設定
Automation Architecture
RubyAppium
(UIAutomator2)
Test Script Automation tool App Under Test
マスタータイトルの書式設定
• マスターテキストの書式設定
Automation Architecture
RubyAppium
(UIAutomator2)
Test Script Automation tool App Under Test
マスタータイトルの書式設定
• マスターテキストの書式設定
Problem ...
マスタータイトルの書式設定
• マスターテキストの書式設定
React Native View Hierarchy
マスタータイトルの書式設定
• マスターテキストの書式設定
Appium supports following finders
id => view resource-id
accessibility_id => view content-description
マスタータイトルの書式設定
• マスターテキストの書式設定
React Native View Hierarchy
マスタータイトルの書式設定
• マスターテキストの書式設定
React Native Documentation for TestID
https://facebook.github.io/react-native/docs/view.html#testid
マスタータイトルの書式設定
• マスターテキストの書式設定
Let’s add testId
マスタータイトルの書式設定
• マスターテキストの書式設定
Nothing changed …
マスタータイトルの書式設定
• マスターテキストの書式設定
In case of android react-native testId property does not add either resource-id or content-desc. They add this value into a different view property called `tags`.
Unfortunately, there is no way to find an element using tags through UIAutomator driver.
Also, currently there is no way to add `resource-id` in react-native. All efforts (PR) have been rejected because they conflict with facebook internal test framework.
Long Battle: https://github.com/facebook/react-native/pull/9942
マスタータイトルの書式設定
• マスターテキストの書式設定
Solution ...
マスタータイトルの書式設定
• マスターテキストの書式設定
Add accessibilityLabel
● testID for iOS
● accessibilityLabel for Android which set content-desc
マスタータイトルの書式設定
• マスターテキストの書式設定
Add accessibilityLabel ...
マスタータイトルの書式設定
• マスターテキストの書式設定
After this test automation was possible using Appium similar to Native App
マスタータイトルの書式設定
• マスターテキストの書式設定
Current Problems
• Adding testID does not work as expected sometime because we need to make all above parents also accessible
• Adding testID and accessibilityLabel does not have same effect on iOS and android respectively. So, need to confirm on both platform after addition
• With accessibilityLabel approach, application will not be friendly for Visually Impaired people
マスタータイトルの書式設定
• マスターテキストの書式設定• ReactNative tests are more flaky compare to Native Test
Current Problems
マスタータイトルの書式設定
• マスターテキストの書式設定• UI Rendering approach and lifecycle is different in ReactNative compare to Native app
• Approaches or Practices being used for Native app tests sometime fails because of this reason
Why tests are more flaky?
マスタータイトルの書式設定
• マスターテキストの書式設定
Future Plan ...
https://hackernoon.com/detox-gray-box-end-to-end-testing-framework-for-mobile-apps-196ccd9564ce
マスタータイトルの書式設定
• マスターテキストの書式設定
Detox
Gray box, not black box
マスタータイトルの書式設定
• マスターテキストの書式設定Tests run in same process
Can access memory
Cannot ship binary which is used for
testing
Black Box Gray Box
Test Script does not know about what
is happening inside Test Target App
Can use only API provided by OS
It is more like testing similar to what
an end user can do
Can ship same binary which went
under testing
マスタータイトルの書式設定
• マスターテキストの書式設定
Gray Box Testing ...
マスタータイトルの書式設定
• マスターテキストの書式設定
Detox …
Detox uses Espresso for Android and EarlGray for iOS
マスタータイトルの書式設定
• マスターテキストの書式設定
How Detox Works ...
マスタータイトルの書式設定
• マスターテキストの書式設定
Conclusion
Till now, I was also in favour of Black box testing but
now I also think Gray Box approach is better and
more reliable
マスタータイトルの書式設定
• マスターテキストの書式設定
Thank You!