Как да направя тестване от край до край (E2E) за React Native Android с помощта на Jest и Appium

Този урок е просто ръководство стъпка по стъпка как да настроите Appium и Jest за React Native Android. Търсех стъпка по стъпка ръководство, но имах затруднения да намеря такова, затова реших да напиша своето. Дано това да ви помогне.

Забележка: Този урок обхваща само Android. Ако искате да стартирате Appium в AWS Device Farm, за да тествате приложението си на реални устройства, ще трябва да използвате Appium Python. Те не поддържат Appium JS. Урок за Appium Python, съсредоточен около AWS, можете да намерите тук.

Appium е начин за автоматизиране на ръчно въвеждане на потребител за тестване от край до край (E2E).

Jest е рамката за тестване на Javascript във Facebook. Той идва с почти всичко, което ще ви е необходимо за тестване.

Настройвам

Следвайте писмото, което най-добре се отнася за вас, за да настроите вашия проект React Native.

А. Започвам проект React Native!

Следвайте официалното ръководство на Facebook, за да стартирате проект React Native. Не забравяйте да изберете Проекти за изграждане с Native Code.

Б. Вече имам по-стар проект React Native!

Инсталирайте Jest: добавяне на прежда --dev jest

Активирайте ES6 + синтаксиса за Jest (главно за импортиране, асинхронизиране / изчакване):

прежда добавете --dev babel-predeset-react-native

Добавете .babelrc файл в основата на вашия проект:

{
  "предварително зададени настройки": ["реагира-роден"]
}

След като сте направили или А, или Б, продължете по-долу ...

Инсталирайте appium, appium-лекар

прежда добавете --dev appium appium-лекар

Добавете скриптове, свързани с appium, към package.json

Пусни лекар-апиум

прежда управлява аппиум-лекар

Ще трябва да коригирате грешките, които хвърля лекар-апиум. Въпреки това, за целите на тестване на Android, можете да игнорирате всичко, свързано с iOS (xCode, Carthage).

Инсталирайте webdriver

прежда добавете --dev wd

Стартирайте appium сървъра

прежда тече прежда

Обърнете внимание на порта, ще ви е необходим по-късно (порт по подразбиране е 4723).

Основен тест

Сега, когато всички сме готови, нека напишем първия си тест. Запазете го на: ./__tests__/appium.test.js. Ще надграждаме този файл по-късно.

Този основен тест просто проверява дали изглед с accessibilityLabel = "testview" съществува и изглед с accessibilityLabel = "notthere" не съществува.

Някои неща, на които трябва да внимавате:

  1. jasmine.DEFAULT_TIMEOUT_INTERVAL: Това е зададено, защото в противен случай се сблъсквате с грешки с изтичане на функциите на async.
  2. Пътят на приложението в конфигурацията е относителен към корена на вашия проект. Не се отнася до тестовия файл.
  3. Трябва да спите пробния бегач с driver.sleep (...), докато изчаквате приложението да се зареди.

Може би се питате: „Защо достъпностОбезопасен?“. Ето как търсим елементи, когато правим тестове с Appium и React Native. Това е съвместимо и с iOS тестване на Appium. Предполага се, че в бъдеще ще има поддръжка на testID, но засега това е препоръчителният начин.

Нека добавим accessibilityLabel = "testview" в корена на изгледа на нашето приложение в ./index.android.js.

Изпълнете теста

  1. Стартирайте емулатор
  2. Стартирайте React Native dev сървър: стартира реагиране с реагиране
  3. тест за прежда
  4. Вашият тест трябва да бъде преминаващ!

Тест с натискане на бутон

Добавете следния код към ./__tests__/appium.test.js.

Нека добавим бутон, който увеличава брояча на екрана. Вашият ./index.android.js трябва да изглежда така:

Изпълнете теста. Трябва да видите приложението да натиска бутона сам по себе си и броячът да се увеличава. Всички тестове трябва да преминат.

Тест за въвеждане на текст

Добавете следния код към ./__tests__/appium.test.js.

Нека добавим въвеждане на текст, който актуализира екранен изглед на текст. Вашият ./index.android.js трябва да изглежда така:

Изпълнете теста. Трябва да видите приложението да въведе някакъв текст във входа. Всички тестове трябва да преминат.

Поздравления!

Само един последен съвет ...

Appium Desktop (режим на инспектор)

Appium Desktop има полезен режим на инспектор, който:

... можете да използвате елементите на приложението си, да получите основна информация за тях и да извършите основни взаимодействия с тях. Това е полезно като начин да научите за Appium или като начин да научите за приложението си, за да можете да пишете тестове за него.

Можете да го изтеглите от тук.

Настройвам

  1. Стартирайте Android емулатор
  2. Стартирайте Appium Desktop сървър
  3. Кликнете върху „Старт сесия на инспектора“
  4. Автоматичен сървър> Желани възможности
  5. 1-ви ред: platformName, текст, Android
  6. Втори ред: deviceName, текст, Android Emulator
  7. 3-ти ред: приложение, текст, (Абсолютен път към вашия apk)
  8. Стартирайте инспектора

Пълен код

Пълният код за този урок се намира тук:

Допълнително четене

  • Всички команди за webdriver (отнема малко)
  • Appium config
  • Друг урок: https://github.com/garthenweb/react-native-e2etest