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

Я начал этот проект с исследования пользователей, а затем использовал его для создания серии макетов в Figma для проведения тестирования на удобство решения, которое, как мне казалось, принесло пользователю наибольшую пользу.

После того, как я был доволен тем, что приложение было полезным и ценным, я начал превращать эти проекты в компоненты React с помощью Storybook и Expo. Это позволило мне быстро развернуть компоненты, но не хватало одного аспекта.

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

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

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

Следующим инструментом, на который я обратил внимание, был Appium, в котором не указано, что он работает с Expo. Есть способы заставить его работать достаточно хорошо с Expo Client, чтобы вы могли запускать автоматизацию без необходимости создавать автономный двоичный файл.

Я расскажу, как запускать Appium как с Expo Client, так и с автономным приложением, поскольку единственная разница заключается в возможностях и способе настройки клиента перед запуском тестов.

Настройка Appium

По сравнению с Detox, настройка Appium может показаться немного сложной, но инструмент appium-doctor значительно экономит время, поскольку он сообщит вам, правильно ли настроена ваша среда.

Я не собираюсь рассказывать, как установить все зависимости, поскольку это будет сама статья, но в Интернете есть несколько сообщений в блогах, которые помогают в этом.

Главное, на чем вы хотите сосредоточиться, - это запуск Appium Desktop и эмулятора Android или симулятора iOS (я обнаружил, что настройка Android проще как на Linux, так и на Mac, поэтому я советую начать с этого).

После того, как Appium Desktop работает с эмулятором, вы можете использовать эмулятор для запуска Expo Client и загрузки своего приложения, после чего вы можете использовать интерфейс сеанса Appium Desktop (используйте возможности ниже), чтобы подключиться к эмулятору и начать видеть структуру пользовательский интерфейс вашего приложения.

{
  "platformName": "android",
  "deviceName": "[NAME OF YOUR EMULATOR]"
}

Автоматизация клиента Expo с помощью Appium

В Интернете не так много информации об использовании Appium с Expo Client, но после того, как вы узнаете «секретный трюк», на самом деле довольно легко заставить его работать на разных платформах.

Когда вы запускаете Expo Client, вы можете заметить, что приложения Expo имеют ссылку exp://, и мы будем использовать эту ссылку для запуска тестируемого приложения в Expo Client.

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

Последовательность запуска приложения в Expo Client на Android выглядит следующим образом:

  1. Запустите приложение Expo Client.
  2. Закройте приложение Expo Client.
  3. Снова запустите приложение Expo Client.
  4. Выполните от mobile:deeplink до exp://127.0.0.1:19000 (или применимое имя хоста)
  5. Подождите, пока элемент на первой странице приложения не станет видимым

Технически шаги 2 и 3 можно заменить отправкой ключевого кода 82, так как это должно вызвать перезагрузку Expo Client, которая необходима для обеспечения сброса состояния приложения.

Для iOS немного сложнее:

  1. Запустить Safari
  2. Введите exp://127.0.0.1:19000 (или подходящее имя хоста) в адресную строку Safari.
  3. Подтвердите загрузку Expo Client (с помощью автоматизации или использования возможности autoAcceptAlerts)
  4. При необходимости обработайте всплывающее окно первого запуска (нажмите кнопку «Понятно», а затем кнопку закрытия для меню разработчика)
  5. Перезагрузите Expo Client, отправив shake() команду и нажав кнопку «Reload» в меню разработчика.
  6. Подождите, пока элемент на первой странице приложения не станет видимым

iOS стала еще более неудобной из-за того, что Apple, похоже, меняет поведение ввода URL-адреса Safari между версиями iOS, например, в iOS 13.3 строка URL-адреса - это кнопка, которую необходимо нажать, прежде чем вы сможете ввести что-либо, кроме iOS 13.6. это текстовое поле с автофокусом.

После того, как вы загрузили тестируемое приложение в Expo Client и перезагрузили Expo Client, чтобы состояние приложения было сброшено, вы можете начать фактическую автоматизацию своего приложения.

Вот возможности и функции, которые я использую для Android.

И возможности и функции, которые я использую для iOS

Автоматизация автономного двоичного файла, созданного Expo

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

Я считаю, что последний вариант более надежен, по крайней мере, на Android, где я использую adb install [PATH TO APK] для установки .apk на эмулятор перед запуском Appium со следующими возможностями.

Автоматизация пользовательского интерфейса Storybook React Native

Как я упоминал в начале статьи, мой вариант использования Expo на данный момент состоит в том, чтобы создать свою библиотеку компонентов для приложения, которое я в конечном итоге буду создавать.

Вот несколько причин, по которым я решил автоматизировать библиотеку компонентов, а не просто использовать автоматизацию в основном приложении.

  • Я создаю автоматизацию, используя шаблон атомарного дизайна, поэтому имеет смысл иметь мои объекты страницы «атом», «молекула» и «организм» в той же кодовой базе, что и на уровне «атом», «молекула» и «организм». компоненты, составляющие пользовательский интерфейс моего приложения
  • Если я смогу отловить проблемы автоматизации в библиотеке компонентов, я могу предотвратить их попадание в основное приложение и исправить их раньше.
  • Библиотека компонентов используется для демонстрации различных состояний, которые могут иметь компоненты, поэтому она является идеальным кандидатом для построения объектов страницы на основе
  • Это оставляет основную базу кода приложения заботой только о компоновке экрана и обработке состояния приложения. Аналогичным образом автоматизация на этом уровне будет моделировать объекты страницы уровня «шаблон» и «страница».

Для автоматизации пользовательского интерфейса сборника рассказов необходимо выполнить всего несколько действий:

  • Нам нужно иметь возможность выбрать историю для загрузки из списка историй.
  • Нам нужно иметь возможность загружать превью для выбранной истории.
  • Нам нужно иметь возможность искать историю, особенно если список историй становится слишком длинным.

Ниже приведен фрагмент простой атомарной структуры для этого:

Следующие шаги: автоматизация приложений для Android и iOS с помощью Appium

В течение следующих недель я буду публиковать сообщения о Appium и о том, как я его использую, а также о любых подводных камнях, архитектурных паттернах и о том, как запустить его в CI.

Если вы работаете с Appium или хотите начать его использовать, не стесняйтесь оставлять комментарии ниже с любыми вопросами, которые могут у вас возникнуть, и я постараюсь ответить. Дайте мне подписаться, если хотите прочитать мои следующие посты из этой серии.