Accessing React Elements using Appium for Automation

Question

I have been using Appium to test an hybrid android application including frequent transition between NATIVE and WEBVIEW context. These Webviews are developed using React Libraries.

To my understanding and correct me if I am wrong, How React Works is that it creates a Virtual DOM using the real DOM and generates a dynamic class name corresponding to those in the javascript. The Diff Algorithm provides efficient way to differentiate the objects using those auto generated class names.

---

The problem I am facing is that using Appium I am not able to access the elements from these webview using any of the findElementsBy method. The class name being only parameter visible to the UIAutomator on which we could really rely on is changed by React on every new build generated.

1. Is there a way so that I can refactor these auto-generated class names to some sensible names using the React library itself?

The chrome inspect provides the details of the webview in my application as :

<div class="_32f8NoUfyUtNSxo3w4Ptbp" data-reactid=".0.1.$=13:0.0.0">…</div>

2. Any ideas on how to access the actual DOM elements using Appium for this case?

Info : WebView.setWebContentsDebuggingEnabled(true) is set in the app code.

Would appreciate any leads here as well.

Answer 1

Based on this link : https://github.com/facebook/react-native/issues/7135

The workaround for this problem : use both accessible and accessibleLabel on your views

DOC on accessiblity label: https://facebook.github.io/react-native/docs/accessibility.html#accessibilitylabel-ios-android

On my react native component :

<TextInput accessible={true} accessibilityLabel={'Tap Me'}></TextInput>

On my script Test :

mobileElement = find_Element(accessibilty_id, "Tap Me")
mobileElement.send_keys "hello world"

Answer 2

The standalone inspector can be used to identify the react elements like "react-devtools".

Steps to Install the react-devtools standalone app:

• yarn global add react-devtools

• Once installed run the following command in terminal "react-devtools". From the in app developer menu click on "Toggle Inspector" and click on inspect to inspect element.

  It will connect automatically for RN 0.43 or higher. An element can be found easily with this. Consider reading this