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_

https://github.com/vbanthia

https://twitter.com/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

https://www.slideshare.net/VishalBanthia1/android-e2e-testing-at-mercari

https://www.slideshare.net/VishalBanthia1/reliable-mobile-test-automation

https://medium.com/mercari-engineering/android-device-farm-at-mercari-3197237df0e1

https://github.com/vbanthia/appium-docker-demo

https://github.com/openstf/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



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

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

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!