使用 Appium for Automation 访问 React 元素 [英] Accessing React Elements using Appium for Automation

问题描述

我一直在使用 Appium 来测试混合 android 应用程序，包括 NATIVE 和 WEBVIEW 上下文之间的频繁转换.这些 Web 视图是使用 React 库开发的.

<块引用>

据我所知，如果我错了，请纠正我，React 是如何工作的是它使用真实的 DOM 创建了一个虚拟 DOM 并生成了一个与 javascript 中的动态类名对应的动态类名.差异算法提供了区分对象的有效方法使用那些自动生成的类名.

<小时>

我面临的问题是，使用 Appium 我无法使用任何 findElementsBy 方法从这些 webview 访问元素.类名是唯一对 UIAutomator 可见的参数，我们可以真正依赖它，在每次生成新构建时，React 都会更改该参数.

<块引用>

1. 有没有办法让我可以使用 React 库本身将这些自动生成的类名重构为一些合理的名称?

chrome inspect 在我的应用程序中提供了 webview 的详细信息:

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

<块引用>

2. 对于如何在这种情况下使用 Appium 访问实际 DOM 元素有任何想法吗?

Info : WebView.setWebContentsDebuggingEnabled(true) 在应用程序代码中设置.

也非常感谢这里的任何线索.

解决方案

基于此链接:https://github.com/facebook/react-native/issues/7135

此问题的解决方法:在您的视图中同时使用可访问和可访问标签

关于可访问性标签的文档:https://facebook.github.io/react-native/docs/accessibility.html#accessibilitylabel-ios-android

在我的本机组件上:

在我的脚本测试中:

mobileElement = find_Element(accessibilty_id, "Tap Me")mobileElement.send_keys "你好世界"

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.

解决方案

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"

这篇关于使用 Appium for Automation 访问 React 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！