如何在React Native中使用Espresso UI测试？

Question

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

我按照这个教程将React Native集成到现有应用程序中，以便编写测试。但是当我开始编写我的UI测试时，我无法找到要编写什么以及如何定位组件并执行点击等操作的内容。

我发现这篇文章中，有人给出了编写React Native Espresso测试的示例，但它对我不起作用...我的组件中没有设置resource-id，所以我不知道如何对我的应用程序执行某些操作。

如果有人能帮我在React Native应用程序上使用Espresso编写UI测试，或者给我另一个自动化截屏的解决方案，那将是太棒了。

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

- G.Sabathier

Answer 1

浓缩咖啡

目前在react-native中没有设置资源ID的方法，因此为了执行复杂操作，您需要编写一些代码（例如等待元素），但通过android studio 'record espresso test'按钮执行其他操作似乎非常有效。

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

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

Appium

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

1. 使用属性accessibilityLabel作为元素的ID
2. 在Web驱动程序中使用waitForElementByAccessibilityId
3. 使用saveScreenshot('out.png')捕获屏幕截图 - 这将在运行测试的目录中创建“out.png”文件

在appium中，您最终将拥有类似以下的内容（JavaScript示例）：

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

iOS和Android的accessibilityLabels对比

在Android上，你可以自由地在任何元素（如Text、View等）上使用accessibilityLabel，但是iOS不像Android那样会在所有元素上设置无障碍标签。

如果你在Text上设置了标签，它将不等于你的标签。

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

在iOS上，会为你的标签赋予与content相等的标签，因此基本上你只需要为此平台上的文本节点设置accessible属性即可。

<Text accessible>content</Text>

View同样也是一样的 - iOS会忽略你的标签。

到目前为止，在iOS上很少有元素会与你的自定义可访问性标签一起工作。

以下是一个可以用来测试跨平台React Native测试应用程序的元素列表：

您可以使用：

• TouchableHighlight - 在iOS和Android上都可以正常工作，您只需设置accessibilityLabel即可
• Text - accessibilityLabel应该与内部文本相同+您必须设置accessible属性

不会同时在两个平台上工作：

• View

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

调试

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

- cybergrind

Answer 2

我在react-native中提交了一个PR，以添加对resource-id的适当支持。请查看并点赞： https://github.com/facebook/react-native/pull/9942 一旦合并，只要ID在res/values/ids.xml中定义，testID就会添加resource-id。

- jsdevel

---

我一直在关注你的PR和对话，但只想知道那个PR是否已经与React合并？在某些对话中，我看到它被拒绝了。 - Emjey

Answer 3

目前，如果您在React层中设置了testID，则会将其转换为Android中的标签。

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

然后，您只需执行以下操作即可查找视图：

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

- A. Maly