title: Accessing React Elements using Appium for Automation
body: <p>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.</p>
  
  <blockquote>
    <p>To my understanding and correct me if I am wrong, <a href="https://auth0.com/blog/2015/11/20/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/" rel="noreferrer">How React Works</a>
    is that it creates a Virtual DOM using the real DOM and generates a
    dynamic class name corresponding to those in the javascript. The <a href="http://calendar.perfplanet.com/2013/diff/" rel="noreferrer">Diff
    Algorithm</a> provides efficient way to differentiate the objects
    using those auto generated class names.</p>
  </blockquote>
  
  <hr>
  
  <p>The problem I am facing is that using Appium I am not able to access the elements from these webview using any of the <code>findElementsBy</code> 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. </p>
  
  <blockquote>
    <ol>
    <li>Is there a way so that I can refactor these auto-generated class names to some sensible names using the React library itself?</li>
    </ol>
  </blockquote>
  
  <p>The <a href="http://chrome://inspect/#devices" rel="noreferrer">chrome inspect</a> provides the details of the webview in my application as :</p>
  
  <pre><code>&lt;div class="_32f8NoUfyUtNSxo3w4Ptbp" data-reactid=".0.1.$=13:0.0.0"&gt;…&lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <ol start="2">
    <li>Any ideas on how to access the actual DOM elements using Appium for this case?</li>
    </ol>
  </blockquote>
  
  <p>Info : <code>WebView.setWebContentsDebuggingEnabled(true)</code> is set in the app code.</p>
  
  <p>Would appreciate any leads here as well.</p>