Как использовать тестовое тестирование Espresso для React Native?

Я пытаюсь сделать некоторые тесты пользовательского интерфейса с помощью эспрессо в моем приложении Android React Native для использования Screengrab от Fastlane.

Я следил за этот учебник, чтобы интегрировать React Native в существующее приложение, чтобы иметь возможность написать тест. Но когда я начал писать свой тест пользовательского интерфейса, я не смог найти, что писать и как настроить таргетинг на компонент и выполнить клик по нему, например.

Я нашел этот пост, где кто-то дает пример о том, как написать Espresso Test for React Native, но он не работает для меня.. Ни один из моих компонентов не имеет идентификатор ресурса, поэтому я не знаю, как выполнять некоторые действия в моем приложении.

Если кто-то может помочь мне написать тест пользовательского интерфейса с помощью Espresso в приложении React Native или дать мне еще одно решение для автоматического снимка экрана моего приложения для Android, которое будет потрясающе.

Если у вас есть какие-либо вопросы, дайте мне знать.

Ответ 1

Эспрессо

В настоящее время нет способа установить идентификатор ресурса с помощью реакции-native, поэтому для выполнения сложных действий вам нужно написать какой-то код (например, ждать элементов), другие вещи, похоже, работают неплохо с помощью андроид-студии 'record espresso test '.

  • используйте prop accessibilityLabel как идентификатор для элементов (например, "elementId" )
  • использовать onView(allOf(withContentDescription("elementId"), isDisplayed())) для получения элемента
  • Действия над элементом на этом элементе (например, element.perform(click()))

Здесь вы можете найти полный тест https://gist.github.com/cybergrind/0a2ad855352a5cd47cb5fb6a486c5eaa

Appium

Если вы просто хотите выполнять действия и снимать скриншоты, вы можете сделать это с помощью appium:

  • использовать prop accessibilityLabel как идентификатор элементов
  • в веб-драйвере используйте waitForElementByAccessibilityId
  • снимок экрана с 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

P.S. мы еще не тестировали все возможные элементы, поэтому добавьте результаты для других элементов или дождитесь наших результатов.

Отладка

Вы можете получить источник корневого элемента, распечатать и прочитать его как xml для целей отладки (для webdriver.io: http://webdriver.io/api/property/getSource.html)

Ответ 2

У меня есть PR против response-native, чтобы добавить правильную поддержку для resource-id. Проверьте это и проголосуйте пожалуйста: https://github.com/facebook/react-native/pull/9942

Как только это объединение в testID добавит resource-id, пока идентификатор определен в res/values/ids.xml.

Ответ 3

В настоящее время, если вы установите testID в свой слой реакции, который будет переведен в тег в android.

Затем с помощью Espresso вы можете использовать предоставленный ViewMatcher withTagValue ссылка

Затем все, что вам нужно сделать, чтобы найти представление, -

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

Ответ 4

Я бы предпочел выбрать Applitools, когда дело доходит до визуального или пользовательского тестирования. Я использую инструменты в течение некоторого времени, и я очень доволен! Они поддерживают множество фреймворков и имеют отличную команду поддержки.

Кроме того, недавно они выпустили инструмент анализа корневых причин (RCA). Это поможет вам найти источник визуального различия и, следовательно, сэкономит вам много времени, пытаясь найти то, что пошло не так или что было изменено. В основном, он сообщает о любых изменениях DOM или CSS. Остальное - просто тратить время на решение проблем, а не пытаться найти источник различий.

Попробуйте!