如何使用React Native的Espresso UI测试？

Question

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

我已按照this tutorial在现有应用中集成React Native，以便能够编写测试。但是当我开始编写UI测试时，我无法找到要编写的内容以及如何定位组件并对其执行单击操作。

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

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

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

Answer 1

咖啡

目前没有办法用react-native设置resource-id，因此，为了制作复杂的动作你需要编写一些代码（比如等待元素），其他的东西似乎通过android studio'记录espresso测试很好用'按钮。

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. 在网络驱动程序中使用waitForElementByAccessibilityId
3. 使用saveScreenshot（'out.png'）捕获屏幕截图 - ＆gt;这将在你运行测试的目录中创建'out.png'文件

在appium中你最终会有类似的东西（例如）：

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

iOS vs Android accessibilityLabels

对于Android，您可以在任何元素（如文本，视图等）上自由使用accessibiltyLabel，但iOS不会在Adnroid等所有元素上设置辅助功能。

如果您在Text上设置标签，那么它将与您的标签不相同

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

会在iOS上为您提供相同的content标签，所以基本上您只需在此平台的文本节点上设置accessible属性

<Text accessible>content</Text>

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

到目前为止，iOS上没有太多元素可用于您的自定义辅助功能标签。

以下是可用于测试跨平台反应原生测试的应用程序的元素列表

您可以使用：

• TouchableHighlight - 在iOS和Android上运行相同，您只需设置accessibilityLabel
• Text - accessibilityLabel应与内部测试相同+您必须​​设置可访问属性

不起作用（对于两个平台而言）：

• View

P.S。我们尚未测试所有可能的元素，因此请将结果添加到其他元素或等待我们的结果

调试

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

Answer 2

我有针对react-native的PR，以便为resource-id添加适当的支持。请查看并向上投票：https://github.com/facebook/react-native/pull/9942

只要在testID中定义了ID，就会resource-id合并res/values/ids.xml。

Answer 3

目前，如果你在反应层中设置了testID，它将被转换成android中的标签。

然后使用Espresso，您可以使用提供的ViewMatcher withTagValue link

然后你要做的就是找到一个视图

onView(withTagValue(is((Object) tagValue))).perform(click());