Accessing WebView developed on React-Native using Appium

namannigam14 · January 26, 2016, 3:45pm

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.

bootstrap · January 26, 2016, 4:04pm

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.

github.com

appium/appium/blob/54c2b4e6500eddbca4bb3047116ceb8d177f7294/docs/en/advanced-concepts/hybrid.md

## Automating hybrid apps

One of the core principles of Appium is that you shouldn't have to change
your app to test it. In line with that methodology, it is possible to test
hybrid web apps (e.g., the [UIAWebView](https://developer.apple.com/library/ios/documentation/ToolsLanguages/Reference/UIAWebViewClassReference/)
elements in an iOS app) the same way
you can with Selenium for web apps. There is a bit of technical complexity
required so that Appium knows whether you want to automate the native aspects
of the app or the web views, but thankfully, we can stay within the
WebDriver protocol for everything.

Here are the steps required to talk to a web view in your Appium test:

1.  Navigate to a portion of your app where a web view is active
1.  Call [GET session/:sessionId/contexts](https://code.google.com/p/selenium/source/browse/spec-draft.md?repo=mobile)
1.  This returns a list of contexts we can access, like 'NATIVE_APP' or 'WEBVIEW_1'
1.  Call [POST session/:sessionId/context](https://code.google.com/p/selenium/source/browse/spec-draft.md?repo=mobile)
    with the id of the context you want to access
1.  (This puts your Appium session into a mode where all commands are
    interpreted as being intended for automating the web view,

This file has been truncated. show original

jonahss · January 27, 2016, 7:52pm

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

namannigam14 · January 28, 2016, 7:46pm

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

jonahss · February 1, 2016, 12:35pm

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: https://discuss.reactjs.org/t/selenium-testing-of-react-apps/481/13

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.