如何使用Espresso UI测试React Native？

Question

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

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

我找到了这篇文章,其中有人举例说明如何为React Native编写Espresso Test但它对我不起作用...我的组件都没有设置资源ID,所以我不知道如何执行某些操作我的应用程序.

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

如果您有任何疑问,请告诉我.

Answer 1

浓咖啡

目前没有办法用react-native设置resource-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 vs Android accessibilityLabels

似乎对于Android,您可以accessibiltyLabel在任何元素(如Text,View等)上自由使用,但iOS不会在Adnroid等所有元素上设置可访问性.

如果您设置标签,Text它将不等于您的标签

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

会content在iOS上给你相同的标签,所以基本上你可以accessible在这个平台的文本节点上设置属性

<Text accessible>content</Text>

同样的事情View- iOS将忽略您的标签.

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

下面是可用于测试跨平台反应本机测试的应用程序的元素列表

您可以使用:

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

无法工作(完全适用于两个平台):

• View

PS我们尚未测试所有可能的元素,因此请将结果添加到其他元素或等待我们的结果

调试

你可以得到根元素,打印的来源,它读成XML用于调试目的(webdriver.io: http://webdriver.io/api/property/getSource.html)

Answer 2

我有一个针对反应原生的PR来增加适当的支持resource-id.请查看并向上投票:https://github.com/facebook/react-native/pull/9942

只要定义了Id,一旦合并完毕testID就会添加.resource-idres/values/ids.xml