如何使用React Native的Espresso UI測試？

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等）上自由使用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

PS我們尚未測試所有可能的元素，因此請將結果添加到其他元素或等待我們的結果

調試

你可以得到根元素，打印的來源，它讀成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

只要在res/values/ids.xml定義了Id，那么在testID合並后將添加resource-id 。

Answer 3

目前，如果你在反應層中設置了testID，它將被轉換為android中的標簽。

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

然后你要做的就是找到一個視圖

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