Демистификация инспектора Appium:

Руководство по выбору элементов в React Native

Этот блог был написан с использованием React Native 0.71.11 и Appium 2.0.1.

Когда вы реализуете автоматизацию в React Native, вам нужен способ сослаться на элемент, чтобы вы могли взаимодействовать с ним. Из-за различий в платформах Android и iOS способ выбора элементов также немного отличается.

Есть несколько способов выбрать элементы в React Native, например, используя testID и accessibilityLabel . В Интернете ведутся огромные споры об использовании testID против accessibilityLabel . Давайте попробуем понять, как React Native применяет эти идентификаторы к нативному представлению с помощью Appium Inspector, и решим, какой из них использовать.

Мы будем использовать простое приложение, которое имеет ImageView, Button, TouchableOpactiy, Text и View. Мы увидим, как эти виды отображаются в инспекторе. Это компонент, с которым мы будем работать.

<View>

  <Text style={textStyle}>Image View</Text>
  <Image
    source={{ uri: 'https://plus.unsplash.com/premium_photo-1680871320511-8be2085ff281?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=959&q=80', width: 200, height: 200 }}
    style={{
      width: 200,
      height: 200,
    }}
  />

  <Text style={textStyle}>Button View</Text>
  <Button title='Test Button' onPress={() => { }} />

  <Text style={textStyle}>Touchable Opacity View</Text>
  <TouchableOpacity onPress={() => { }}>
    <Text>Touchable Opacity</Text>
  </TouchableOpacity>

  <Text style={textStyle}>Normal View</Text>
  <View style={{ width: 200, height: 200, backgroundColor: 'red' }} />
</View>

Как это выглядит в инспекторе?

Без каких-либо свойств

Давайте посмотрим, как это выглядит в инспекторе, когда мы не устанавливаем никаких свойств.

iOS

Как видите, Text , Button и TouchableOpacity задают свойство accessibility-id, а для свойства accessible установлено значение true. Значение accessibility-id равно текстовому содержимому. Однако для ImagView и View не установлено свойство доступности, поэтому для выбора этих элементов нам придется использовать XPath.

Андроид

На Android история немного другая. Ни в одном из этих представлений не заданы свойства специальных возможностей. Итак, нам придется использовать XPath, если мы хотим выбрать какие-либо элементы.

Использование идентификатора теста

Давайте установим свойство testID для компонентов и посмотрим, как это выглядит в инспекторе.

<View>

  <Text style={textStyle} testID='test-id-label-image-view'>Image View</Text>
  <Image
    source={{ uri: 'https://plus.unsplash.com/premium_photo-1680871320511-8be2085ff281?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=959&q=80', width: 200, height: 200 }}
    style={{
      width: 200,
      height: 200,
    }}
    testID='test-id-image'
  />

  <Text style={textStyle} testID='test-id-label-button-view'>Button View</Text>
  <Button title='Test Button' onPress={() => { }} testID='test-id-button' />

  <Text style={textStyle} testID='test-id-label-touchable-view'>Touchable Opacity View</Text>
  <TouchableOpacity onPress={() => { }} testID='test-id-touchable'>
    <Text>Touchable Opacity</Text>
  </TouchableOpacity>

  <Text style={textStyle} testID='test-id-label-view'>Normal View</Text>
  <View style={{ width: 200, height: 200, backgroundColor: 'red' }} testID='test-id-view' />
</View>

iOS

Все элементы имеют набор accessibility-id, значение которого равно свойству testID.

Андроид

В Android для всех элементов resource-id установлено свойство testID. Это отличается от Android, и мы должны помнить об этом при написании наших тестов.

Использование метки доступности

Давайте установим свойство метки доступности и посмотрим, как оно отображается в инспекторе.

<View>

  <Text style={textStyle} accessibilityLabel='label image view'>Image View</Text>
  <Image
    source={{ uri: 'https://plus.unsplash.com/premium_photo-1680871320511-8be2085ff281?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=959&q=80', width: 200, height: 200 }}
    style={{
      width: 200,
      height: 200,
    }}
    accessibilityLabel='image view'
  />

  <Text style={textStyle} accessibilityLabel='label button view'>Button View</Text>
  <Button title='Test Button' onPress={() => { }} accessibilityLabel='button view' />

  <Text style={textStyle} accessibilityLabel='label touchable view'>Touchable Opacity View</Text>
  <TouchableOpacity onPress={() => { }} accessibilityLabel='touchable view'>
    <Text>Touchable Opacity</Text>
  </TouchableOpacity>

  <Text style={textStyle} accessibilityLabel='label view'>Normal View</Text>
  <View style={{ width: 200, height: 200, backgroundColor: 'red' }} accessibilityLabel='normal view' />
</View>

iOS

В iOS для представлений accessibility-id установлено значение accessibilityLabel .

Андроид

Это то же самое, что и в iOS, для представлений accessibility-id установлено значение accessibilityLabel .

Использование как accessibilityLabel, так и идентификатора теста

<View>

  <Text style={textStyle} testID='test-id-label-image-view' accessibilityLabel='label image view'>Image View</Text>
  <Image
    source={{ uri: 'https://plus.unsplash.com/premium_photo-1680871320511-8be2085ff281?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=959&q=80', width: 200, height: 200 }}
    style={{
      width: 200,
      height: 200,
    }}
    testID='test-id-image'
    accessibilityLabel='image view'
  />

  <Text style={textStyle} testID='test-id-label-button-view' accessibilityLabel='label button view'>Button View</Text>
  <Button title='Test Button' onPress={() => { }} testID='test-id-button' accessibilityLabel='button view' />

  <Text style={textStyle} testID='test-id-label-touchable-view' accessibilityLabel='label touchable view'>Touchable Opacity View</Text>
  <TouchableOpacity onPress={() => { }} testID='test-id-touchable' accessibilityLabel='touchable view'>
    <Text>Touchable Opacity</Text>
  </TouchableOpacity>

  <Text style={textStyle} testID='test-id-label-view' accessibilityLabel='label view'>Normal View</Text>
  <View style={{ width: 200, height: 200, backgroundColor: 'red' }} testID='test-id-view' accessibilityLabel='normal view' />
</View>

iOS

При этом accessibility-id устанавливается на testID, а label устанавливается на accessibilityLabel. name устанавливается на testID .

Андроид

На Android для accessibility-id установлено значение accessibilityLabel, а для id или resource-id установлено значение testID. content-desc также устанавливается на accessibilityLabel.

Как видите, поведение отличается на iOS и Android. Только третий подход дает одинаковый результат на обеих платформах. Другие подходы приводят к различному поведению на Android и iOS. Раньше я выступал за testID, но теперь я думаю, что буду использовать accessibilityLabel, так как он убивает двух зайцев одним выстрелом. Мы получаем accessibility-id за выбор элементов, а также делаем приложение доступным для людей с ограниченными возможностями.

Выбор между testID и accessibilityLabel является противоречивой темой и зависит от ваших реальных потребностей.

Вот и все, надеюсь, вы, ребята, узнаете что-то новое. Увидимся на следующем, мир!

Спасибо, что дочитали до конца. Пожалуйста, следите за автором и этой публикацией. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное обучение программированию по всему миру.