Tutoriel Appium Inspector – Partie 1

Appium Inspector est la prochaine série d’articles de notre série de tutoriels Appium. Il s’agit d’une série de 4-5 articles qui vous aideraient à apprendre le processus d’identification des éléments sur votre application mobile. Commençons par comprendre ce qu’est réellement le processus d’inspection d’Appium.

Qu’est-ce que le processus d’inspection d’Appium ?

En termes très simples, l’inspection d’Appium est le processus à l’aide duquel vous pouvez identifier ou trouver des éléments dans votre application mobile. Si vous voulez automatiser n’importe quel scénario dans votre application mobile, alors vous auriez besoin de suivre ces 2 étapes –

• Étape 1 : Identifier l’élément de manière unique
• Étape 2 : Effectuer une action sur l’élément identifié

Le processus d’inspection d’Appium vous aide à résoudre la première étape mentionnée ci-dessus. Par exemple, supposons que vous avez une application avec un écran de connexion. Maintenant, votre tâche consiste à entrer le nom d’utilisateur et le mot de passe dans cet écran. Dans ce cas, le processus d’inspection d’Appium vous aidera à « inspecter » l’écran et vous permettra ensuite d’identifier de manière unique les champs de texte. De cette façon, vous serez en mesure d’écrire un code qui saisit l’identifiant de connexion et le mot de passe dans les champs corrects.

Regardons maintenant les outils que vous pouvez utiliser pour inspecter ces éléments.

Différents inspecteurs Appium qui vous aident à identifier les éléments dans l’application mobile

Il existe de nombreux outils différents qui vous aident à inspecter les éléments dans les applications mobiles. Mais pour notre série de tutoriels Appium, nous allons couvrir les outils les plus populaires et les plus utilisés (et supportés par Android ou Appium). Ces outils sont –

• UIAutomatorViewer : C’est un outil fourni par Android Studio qui vous permet d’inspecter les éléments de votre application mobile
• Appium Desktop Inspector : La dernière version de l’interface graphique d’Appium (Appium Desktop) est livrée avec un inspecteur. Vous pouvez utiliser cet inspecteur pour les applications Android et iOS (pour les applications iOS, vous auriez besoin d’un Mac)

Dans cet article, nous allons commencer par les bases de UIAutomatorViewer. Les prochains articles de cette série couvriront en détail, les différentes façons en utilisant lesquelles vous pouvez inspecter votre application mobile en utilisant à la fois UIAutomatorViewer et Appium Desktop Inspector.

Comment ouvrir UIAutomatorViewer

UIAutomatorViewer est livré avec le paquet d’installation d’Android Studio. Ainsi, lorsque vous installez Android Studio, UIAutomatorViewer serait automatiquement installé avec lui. Il y a 2 manières dans lesquelles vous pouvez ouvrir UIAutomatorViewer. Vous pouvez suivre l’une de ces méthodes pour l’ouvrir –

Note importante : Veuillez vous assurer que vous avez suivi notre guide Appium Tutorial et que vous avez installé la dernière version d’Android Studio et configuré correctement les variables d’environnement Android.

Méthode 1 : Ouvrir UIAutomatorViewer à partir de l’invite de commande C’est la façon la plus simple d’ouvrir UIAutomatorViewer. Il suffit de suivre les étapes données ci-dessous pour l’ouvrir –

Étape 1.1 : Ouvrez l’invite de commande

Étape 1.2 : Tapez uiautomatorviewer puis appuyez sur Entrée

Attendez quelques secondes. La fenêtre de UIAutomatorViewer s’ouvrirait comme indiqué ci-dessous

Méthode 2 : Ouvrir UIAutomatorViewer à partir de son emplacement de dossier UIAutomatorViewer est installé sur votre machine comme un fichier .bat. En utilisant cette méthode, vous allez naviguer jusqu’à l’emplacement du dossier où il est installé et ensuite l’ouvrir. Suivez les étapes données ci-dessous pour utiliser cette approche –

Étape 2.1 : Ouvrez l’emplacement du dossier où UIAutomatorViewer est installé. Généralement, cet emplacement est – C:\Users\Anish\AppData\Local\Android\sdk\tools\bin (Remplacez ‘Anish’ par le nom d’utilisateur que vous avez sur votre machine)

Étape 2.2 : Vérifiez que ce dossier bin contient uiautomatorviewer

Étape 2.3 : Double-cliquez sur uiautomatorviewer. Il ouvrira la fenêtre de UI Automator Viewer en quelques secondes

Comme nous l’avions mentionné ci-dessus, vous pouvez utiliser n’importe laquelle de ces méthodes pour ouvrir UI Automator Viewer.

Connecter votre téléphone mobile à votre machine en utilisant l’USB

Avant de commencer à inspecter les éléments de votre application mobile, vous devez d’abord connecter votre appareil mobile à votre machine via USB. Suivez les étapes ci-dessous pour le faire –

Étape 1 : Connectez votre téléphone mobile à votre machine via USB

Étape 2 : Pour vous assurer que le téléphone est correctement connecté, ouvrez l’invite de commande et exécutez la commande adb devices.

Lorsque vous exécutez cette commande, elle afficherait le Device ID du téléphone mobile. Cela signifie que le téléphone mobile est correctement connecté à votre machine.

Etape 3 : Vous devrez maintenant ouvrir l’application que vous voulez inspecter. Comme pour les articles précédents de notre série de tutoriels Appium, nous allons utiliser l’app Google Play Store comme exemple dans ce cas également. Donc, ouvrez l’application Play Store sur votre téléphone

Inspecter l’application mobile en utilisant UI Automator Viewer

Suivez les étapes données ci-dessous pour inspecter votre application mobile avec UI Automator Viewer –

Étape 1 : Assurez-vous que votre téléphone mobile est connecté correctement avec USB. Assurez-vous également qu’il est déverrouillé et que l’application Play Store est ouverte

Etape 2 : Cliquez maintenant sur l’icône Device Screenshot dans UI Automator Viewer (c’est la deuxième icône comme indiqué dans l’image ci-dessous)

Note : Vous auriez remarqué qu’il y a d’autres icônes à côté de l’icône Device Screenshot sur laquelle vous venez de cliquer. Dans cet article, nous n’allons pas expliquer la fonctionnalité de ces icônes. Nous les couvrirons dans nos prochains articles sur l’inspecteur Appium.

Etape 3 : Vous verrez un message popup qui montre les informations de progression comme indiqué ci-dessous

Etape 4 : Attendez quelques secondes pour que UI Automator Viewer traite toutes les informations sur votre écran. Une fois que cela est fait, UI AUtomator Viewer chargera la capture d’écran de votre téléphone comme indiqué dans l’image ci-dessous

Étape 5 : Maintenant, passez le pointeur de votre souris n’importe où sur la capture d’écran de l’appareil. Vous verrez que certaines informations s’affichent sur les volets latéraux de droite

Comprenons ce qui se passe ici

Parlons maintenant un moment et essayons de comprendre ce qui s’est passé ici. Lorsque vous cliquez sur l’icône de capture d’écran du périphérique, alors la visionneuse de l’automate d’interface fait les trois choses suivantes –

• Il capture d’abord les détails de tous les objets visibles à l’écran au format XML.
• Puis il capture la capture d’écran de l’écran mobile au format PNG
• Une fois que les détails ci-dessus sont capturés, UI Automator Viewer montre ces deux choses dans l’UI

Note importante : Techniquement parlant, UI Automator Viewer ne fait que capturer votre écran mobile. Donc tout ce qui est affiché sur l’appareil, UI Automator Viewer le capturerait. Que ce soit une application, ou votre écran d’accueil ou même l’écran de verrouillage.

3 sections principales dans UI Automator Viewer

D’après l’image ci-dessous, vous pouvez voir que UI Automator Viewer a 3 sections principales –

1. Volet gauche : Ce volet montre la capture d’écran du périphérique. C’est une image interactive, où vous pouvez cliquer ou survoler le pointeur de votre souris sur n’importe quel élément de la capture d’écran.

2. Volet supérieur droit : Ce volet montre l’ensemble de la structure XML de l’écran. Cette structure XML montre des détails très basiques sur chaque contrôle – le nom du contrôle, son texte (si disponible) et ses coordonnées.

3. Volet inférieur droit : C’est un volet important qui montre tous les détails d’un contrôle. Quel que soit l’élément que vous sélectionnez dans la capture d’écran, ce volet affichera tous ses détails tels que son texte, son nom de classe, son nom de paquetage, etc. C’est le volet à partir duquel vous obtiendrez des informations sur la façon d’identifier un élément de façon unique.

Jusqu’à présent, nous avons parlé des bases de la visionneuse UI Automator, de la façon de l’ouvrir et de la façon dont vous pouvez y charger la capture d’écran de l’application mobile. Nous allons arrêter cet article ici et couvrir la partie restante dans le prochain article. Il existe de multiples façons d’identifier un élément avec Appium. Nous discuterons de tout cela et de bien d’autres choses dans nos prochains articles sur l’inspecteur Appium.

Activité d’essai : Dans l’une des sections ci-dessus, nous avons mentionné que vous devez connecter votre appareil mobile à votre ordinateur en utilisant un câble USB. Saviez-vous que vous pouvez également le faire en mode sans fil ? Consultez cet article qui montre comment vous pouvez exécuter vos scripts de test Appium en WiFi. En utilisant cet article comme référence, essayez de connecter votre appareil mobile via le WiFi et voyez ensuite si vous pouvez inspecter des éléments.

N’hésitez pas à nous contacter si vous avez rencontré des problèmes avec l’une des sections ci-dessus, ou si vous avez des commentaires pour nous. Nous aimerions entendre vos commentaires car ils nous aident à améliorer nos articles et à les rendre plus utiles pour tous nos lecteurs.

Série suivante d’articles sur Appium Inspector

• Apprendre à inspecter les éléments à l’aide de UIAutomatorViewer
• En savoir plus sur UI Automator Viewer, y compris certaines limitations de l’automatisation mobile
• Apprendre les bases d’Appium Desktop Inspector
• Inspecter les éléments mobiles à l’aide d’Appium Desktop Inspector

.