android - 如何为 React Native 使用 Espresso UI 测试？

Question

我正在尝试在我的 React Native Android 应用程序上使用 Espresso 进行一些 UI 测试，以使用 FaSTLane 的 Screengrab。

我关注了this tutorial将 React Native 集成到现有应用程序中，以便能够编写测试。但是当我开始编写我的 UI 测试时，我无法找到要编写的内容以及如何定位一个组件并单击它。

我找到了 this 帖子中有人举了一个例子，说明如何为 React Native 编写 Espresso 测试，但它对我不起作用......我的组件都没有设置资源 ID，所以我不知道如何对我的应用程序执行一些操作。

如果有人可以帮助我在 React Native 应用程序上使用 Espresso 编写 UI 测试，或者给我另一个解决方案来自动截取我的 Android 应用程序的屏幕截图，那就太棒了。

如果您有任何问题，请告诉我。

Answer 1

Espresso

目前无法使用 react-native 设置资源 ID，因此，要进行复杂的操作，您需要编写一些代码(例如等待元素)，其他事情似乎通过 android studio 'record espresso test 工作得很好' 按钮。

1. 使用 Prop accessibilityLabel作为元素的 id(例如“elementId”)
2. 使用 onView(allOf(withContentDescription("elementId"), isDisplayed()))获取元素
3. 对该元素执行操作(如 element.perform(click()))

在这里您可以找到完整的测试 https://gist.github.com/cybergrind/0a2ad855352a5cd47cb5fb6a486c5eaa

Appium

如果您只想执行操作并捕获屏幕截图，您可以使用 appium 执行此操作:

1. 使用 Prop accessibilityLabel作为元素的 id
2. 在 Web 驱动程序中使用 waitForElementByAccessibilityId
3. 使用 saveScreenshot('out.png') 截取屏幕截图 -> 这将在您运行测试的目录中创建 'out.png' 文件

在 appium 中你最终会得到类似的东西(js 示例):

driver.waitForElementByAccessibilityId('searchInputAcc', 5000)
      .type('bold\n')
      .sleep(5000)
      .saveScreenshot('out.png')

iOS 与 Android 无障碍标签

对于 Android，您似乎可以免费使用 accessibiltyLabel在任何元素(如 Text、View 等)上，但 iOS 不会为 Adnroid 等所有元素设置可访问性。

如果您在 Text 上设置标签它不会等于你的标签

<Text accessibilityLabel="my_text">content</Text>

会给你标签等于 content在 iOS 上，所以基本上你可以设置 accessible此平台的文本节点上的属性

<Text accessible>content</Text>

View 也是如此- iOS 会忽略你的标签。

到目前为止，iOS 上没有多少元素可以与您的自定义辅助功能标签一起使用。

以下是可用于测试应用程序以进行跨平台 react-native 测试的元素列表

你可以使用:

• TouchableHighlight - 在 iOS 和 Android 上都一样，你可以设置accessibilityLabel
• Text - 可访问性标签应与内部测试相同 + 您必须设置可访问属性

不起作用(同时适用于两个平台):

• View

附注我们尚未测试所有可能的元素，因此请添加其他元素的结果或等待我们的结果

调试

您可以获取根元素的来源，将其作为 xml 打印并读取以进行调试(对于 webdriver.io:http://webdriver.io/api/property/getSource.html)