使用 Appium 访问 React 元素以实现自动化答案

【问题标题】：Accessing React Elements using Appium for Automation使用 Appium 访问 React 元素以实现自动化
【发布时间】：2016-02-29 12:08:08
【问题描述】：

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

据我所知，如果我错了，请纠正我，How React Works 是它使用真实 DOM 创建一个虚拟 DOM 并生成一个对应于javascript中的动态类名。 Diff Algorithm 提供了区分对象的有效方法使用那些自动生成的类名。

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

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

chrome inspect 在我的应用程序中提供 web 视图的详细信息：

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

对于在这种情况下如何使用 Appium 访问实际 DOM 元素有什么想法吗？

信息：WebView.setWebContentsDebuggingEnabled(true) 在应用代码中设置。

也将不胜感激这里的任何线索。

【问题讨论】：

【解决方案1】：

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

这个问题的解决方法：在你的视图上同时使用accessible 和accessibleLabel

在我的 react 原生组件上：

<TextInput accessible={true} accessibilityLabel={'Tap Me'}></TextInput>

在我的脚本测试中：

mobileElement = find_Element(accessibilty_id, "Tap Me")
mobileElement.send_keys "hello world"

【讨论】：

是否要求在视图代码中使用accessible 和accessiblityLabel？您提供的脚本是否也适用于 appium，因为我还没有使用任何此类属性作为选择器？
是的，我的脚本适用于 Appium，但仅适用于具有 accessibilityLabel 属性的组件。阅读 react native 文档后，并不是所有的 react native 组件都有accessibilityLabel 属性。我更喜欢在 react native 中使用葫芦进行自动化测试，在葫芦中你可以根据组件的索引、组件内的文本或可访问性标签找到元素

【解决方案2】：

独立检查器可用于识别反应元素，如“react-devtools”。

安装 react-devtools 独立应用的步骤：

yarn 全局添加 react-devtools
安装后，在终端“react-devtools”中运行以下命令。从应用内开发者菜单中点击“Toggle Inspector”，然后点击检查来检查元素。

对于 RN 0.43 或更高版本，它将自动连接。用这个可以很容易地找到一个元素。考虑阅读this

【讨论】：