Accessing WebView developed on React-Native using Appium

We have an hybrid application developed in Android which includes frequent transition from the Native context to the Webview context and vice versa.
Our Webview development framework is using React Libraries to improve app performance stats. Basic understanding on 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.
Now the problem(also stated here SO-33937898 ) faced by us is : Using Appium we are not able to access the elements from these webview using any of the findElementsBy method. The class name being only parameter visible to the ui-automator on which we could really rely on is changed by React on every fresh launch and install. Because of frequent updations in the application code, even in the worst case we wouldn’t want to access the objects using the XPATH.
So cut short, though react webview gives us a good way of optimising the performance yet it has bought a concern in our plans to effectively automate the test cases written around the Webview accesses.
We are eager to know about any solutions that Appium community could provide to get access to these elements and help us automate the react developed webviews. Looking forward to some help. Open to all suggestions.

With appium, you’re suppose to switch into the webview context then all the normal selenium commands (find by css, id, class name, etc.) are available.

1 Like

Yes, using the Context commands will allow you to access the webview elements :slight_smile:

@jonahss @bootstrap The problem here is not to be able to access the elements on the Webview, but more specifically the Webview developed on React-Native. You might want to go through the SO-33937898 for the details of the webview we have.

Oh I see. The elements are visible in the webview just fine, but you can’t access them in any sane way because they’re all generated by React.

Here’s one possible route:

Another option is to inject javascript into the webview that can interact with the virtual DOM. Like a way to query React for specific elements. If you found a way to do this, we could create a separate ReactDriver for appium.