如何将Espresso UI测试用于React Native? [英] How to use Espresso UI Testing for React Native?

问题描述

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

I'm trying to make some UI Testing with Espresso on my React Native Android application to use Screengrab by Fastlane.

我已遵循本教程来集成React现有应用程序中的本机，以便能够编写测试.但是，当我开始编写UI测试时，例如，我找不到要写的内容以及如何定位组件并单击它.

I have followed this tutorial to integrate React Native in an existing app to be able to write a test. But when I started writing my UI Test I was unable to find what to write and how to target a component and perform a click on it for example.

我发现了此帖子，其中有人给出一个有关如何为React Native编写Espresso Test的示例，但它对我不起作用...我的组件均未设置资源ID，因此我不知道如何对我的应用程序执行某些操作.

I found this post where someone give an example on how to write Espresso Test for React Native but it doesn't work for me ... None of my component have resource-id set so I don't know how to perform some action on my application.

如果有人可以帮助我在React Native应用程序上使用Espresso编写UI测试，或者给我另一种解决方案来为我的Android应用程序拍摄自动截图，那将会很棒.

If someone could help me to write a UI Test with Espresso on a React Native app or give me another solution to take automated screenshot of my Android application that'll be awesome.

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

If you have any question let me know.

推荐答案

浓咖啡

目前尚无办法使用react-native设置resource-id，因此，要执行复杂的动作，您需要编写一些代码(例如，等待元素)，其他事情似乎可以通过android studio'record espresso test很好地工作按钮.

Espresso

Currently there is no way to set resource-id with react-native, so, to make complex actions you need to write some code (like wait for elements), other things seems work quite good via android studio 'record espresso test' button.

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

1. use prop accessibilityLabel as id for elements (eg. "elementId")
2. use onView(allOf(withContentDescription("elementId"), isDisplayed())) to get element
3. peform actions on that element (like element.perform(click()))

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

Here you can find full test https://gist.github.com/cybergrind/0a2ad855352a5cd47cb5fb6a486c5eaa

如果您只想执行操作并捕获屏幕截图，则可以使用appium来做到这一点:

If you just want to perform actions and capture screenshots, you can do this with appium:

1. 使用道具accessibilityLabel作为元素的ID
2. 在网络驱动程序中使用waitForElementByAccessibilityId
3. 使用saveScreenshot('out.png')捕获屏幕截图->这将在您运行测试的目录中创建"out.png"文件

1. use prop accessibilityLabel as id for elements
2. in web driver use waitForElementByAccessibilityId
3. capture screenshots with saveScreenshot('out.png') -> this will create 'out.png' file in directory where you've run tests

在appium中，您最终会得到类似(js示例)的信息:

In appium you finally will have something like (js example):

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

iOS vs Android可访问性标签

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

iOS vs Android accessibilityLabels

It seems that for Android you're free to use accessibiltyLabel on any element (like Text, View and so on), but iOS won't set accessibility on all elements like Adnroid.

如果您在Text上设置标签，则该标签将与您的标签不相等

If you set label on Text it won't be equal your label

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

在iOS上将为您提供等于content的标签，因此基本上您可以在此平台的文本节点上设置accessible属性

will give you label equal content on iOS, so basically you can just set accessible attribute on your text nodes for this platform

<Text accessible>content</Text>

与View相同-iOS会忽略您的标签.

Same thing for View - iOS will ignore your labels.

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

So far, not much elements on iOS will work with your custom accessibility labels.

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

Below is a list of elements that you can use to test application for crossplatform react-native tests

您可以使用:

• TouchableHighlight-在iOS和Android上将相同，您只需设置accessibilityLabel
• Text-accessibilityLabel应该与内部测试相同，并且必须设置可访问属性

• TouchableHighlight - will work same on iOS and Android, you can just set accessibilityLabel
• Text - accessibilityLabel should be same as inner test + you have to set accessible attribute

不起作用(完全适用于两个平台):

Won't work (for both platforms altogether):

• View

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

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

You can get source of root element, print and read it as xml for debugging purposes (for webdriver.io: http://webdriver.io/api/property/getSource.html)

这篇关于如何将Espresso UI测试用于React Native?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！