Accessing React Elements using Appium for Automation


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
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>

  1. 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.

  • You must to post comments

Based on this link :

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

DOC on accessiblity label:

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"
  • You must to post comments
Showing 1 result
Your Answer
Post as a guest by filling out the fields below or if you already have an account.