Comment effectuer des tests de bout en bout (E2E) pour React Native Android à l'aide de Jest et Appium

Ce didacticiel est un guide simple, étape par étape, expliquant comment configurer Appium et Jest pour React Native Android. Je cherchais un guide étape par étape, mais j'avais du mal à en trouver un et j'ai donc décidé d'écrire le mien. J'espère que cela peut vous aider.

Remarque: ce tutoriel ne concerne que Android. Si vous souhaitez exécuter Appium sur AWS Device Farm pour tester votre application sur de vrais périphériques, vous devez utiliser Appium Python. Ils ne supportent pas Appium JS. Vous trouverez un tutoriel Appium Python centré sur AWS ici.

Appium est un moyen d'automatiser la saisie manuelle des utilisateurs pour les tests de bout en bout (E2E).

Jest est le framework de test Javascript de Facebook. Il contient à peu près tout ce dont vous aurez besoin pour les tests.

Installer

Suivez la lettre qui s’applique le mieux à vous pour configurer votre projet React Native.

R. Je commence juste un projet React Native!

Suivez le guide officiel Facebook pour démarrer un projet React Native. Assurez-vous de sélectionner Building Projects with Native Code.

B. J'ai déjà un projet React Native plus ancien!

Installer Jest: ajouter du fil - Jev jev

Activer la syntaxe ES6 + pour Jest (principalement pour import, async / wait):

fil ajouter --dev babel-preset-react-native

Ajoutez un fichier .babelrc à la racine de votre projet:

{
  "presets": ["react-native"]
}

Une fois que vous avez fait A ou B, continuez ci-dessous…

Installer appium, appium-docteur

fil ajouter --dev appium appium-docteur

Ajouter des scripts associés à package.json

Run appium-docteur

filé appium-docteur

Vous aurez besoin de corriger les erreurs jetées par un médecin. Cependant, pour tester Android, vous pouvez ignorer tout ce qui est lié à iOS (xCode, Carthage).

Installer le WebDriver

fil ajouter --dev wd

Démarrer le serveur appium

filé appium

Notez le port, vous en aurez besoin plus tard (le port par défaut est 4723).

Test de base

Maintenant que nous sommes tous configurés, écrivons notre premier test. Enregistrez-le dans: ./__tests__/appium.test.js. Nous allons nous appuyer sur ce fichier plus tard.

Ce test de base vérifie simplement qu’une vue avec accessibilityLabel = "testview" existe et qu’une vue avec accessibilityLabel = "notthere" n’existe pas.

Quelques points à surveiller:

  1. jasmine.DEFAULT_TIMEOUT_INTERVAL: Ceci est défini car sinon, vous rencontrez des erreurs avec l'expiration des fonctions asynchrones.
  2. Le chemin de l'application dans la configuration est relatif à la racine de votre projet. Pas relatif au fichier de test.
  3. Vous devez mettre le testeur en veille avec driver.sleep (...) pendant que vous attendez le chargement de l'application.

Vous vous demandez peut-être pourquoi l’accessibilité LabelLabel? C’est ainsi que nous recherchons des éléments lors des tests avec Appium et React Native. Ceci est également compatible avec les tests iOS sur Appium. Soi-disant, il y aura un support testID dans le futur, mais pour le moment c'est la méthode recommandée.

Ajoutons le accessibilityLabel = "testview" à la racine de la vue de notre application dans ./index.android.js.

Lancer le test

  1. Démarrer l'émulateur
  2. Démarrer le serveur de développement natif de React: react-native start
  3. test de fil
  4. Votre test devrait être réussi!

Bouton clic test

Ajoutez le code suivant à ./__tests__/appium.test.js.

Ajoutons un bouton qui incrémente un compteur à l’écran. Votre fichier ./index.android.js devrait ressembler à ceci:

Exécutez le test. Vous devriez voir l'application en cliquant sur le bouton seul et le compteur devrait incrémenter. Vos tests devraient tous passer.

Test de saisie de texte

Ajoutez le code suivant à ./__tests__/appium.test.js.

Ajoutons une entrée de texte qui met à jour une vue de texte à l’écran. Votre fichier ./index.android.js devrait ressembler à ceci:

Exécutez le test. Vous devriez voir l'application entrer du texte dans l'entrée. Vos tests devraient tous passer.

Félicitations!

Un dernier conseil…

Appium Desktop (mode inspecteur)

Appium Desktop dispose d'un mode Inspecteur utile qui:

… Vous pouvez utiliser pour examiner les éléments de votre application, obtenir des informations de base à leur sujet et effectuer des interactions de base avec eux. Ceci est utile pour en savoir plus sur Appium ou pour en savoir plus sur votre application afin que vous puissiez rédiger des tests à ce sujet.

Vous pouvez le télécharger à partir d'ici.

Installer

  1. Démarrer l'émulateur Android
  2. Démarrer le serveur Appium Desktop
  3. Cliquez sur «Start Inspector Session»
  4. Serveur automatique> Capacités souhaitées
  5. 1ère rangée: platformName, text, Android
  6. 2e ligne: nom de l'appareil, texte, émulateur Android
  7. 3ème ligne: application, texte, (chemin absolu de votre apk)
  8. Démarrer l'inspecteur

Code complet

Le code complet de ce tutoriel se trouve ici:

Lecture supplémentaire

  • Toutes les commandes pour webdriver (c’est un peu long)
  • Appium config
  • Un autre tutoriel: https://github.com/garthenweb/react-native-e2etest