Appium Inspector Tutorial – Deel 1

Appium Inspector is de volgende set artikelen in onze Appium Tutorial serie. Dit is een serie van 4-5 artikelen die u zouden helpen leren het proces van het identificeren van elementen op uw mobiele app. Laten we dit beginnen door te begrijpen wat Appium inspectie proces eigenlijk is.

Wat is Appium Inspectie Proces?

In zeer eenvoudige woorden, Appium inspectie is het proces waarmee u kunt identificeren of elementen te vinden in uw mobiele app. Als u wilt een scenario in uw mobiele app te automatiseren, dan zou je nodig hebt om deze 2 stappen te volgen –

• Stap 1: Identificeer het element uniek
• Stap 2: Actie uit te voeren op het geïdentificeerde element

Appium inspectie proces helpt u bij het oplossen van de eerste stap hierboven vermeld. Stel bijvoorbeeld dat u een app hebt met een inlogscherm. Nu is het uw taak om gebruikersnaam en wachtwoord in dit scherm in te voeren. Hier zou het Appium inspectieproces u helpen het scherm te “inspecteren” en u vervolgens de tekstvelden uniek te laten identificeren. Op deze manier zult u in staat zijn om code te schrijven die login id en wachtwoord in de juiste velden invoert.

Laten we nu eens kijken naar de tools die u kunt gebruiken om deze elementen te inspecteren.

Different Appium Inspectors that help you identify elements in mobile app

Er zijn veel verschillende tools die u helpen bij het inspecteren van elementen in mobiele apps. Maar voor onze Appium Tutorial serie, zullen we de meest populaire en meest gebruikte tools behandelen (en ondersteund door Android of Appium). Deze tools zijn –

• UIAutomatorViewer: Dit is een tool geleverd door Android Studio waarmee je elementen in je mobiele app kunt inspecteren
• Appium Desktop Inspector: De nieuwste versie van Appium GUI (Appium Desktop) komt met een inspector. Je kunt deze inspector gebruiken voor zowel Android als iOS apps (voor iOS apps heb je een Mac nodig)

In dit artikel beginnen we met de basis van UIAutomatorViewer. De volgende artikelen in deze serie zullen in detail de verschillende manieren behandelen waarop u uw mobiele app kunt inspecteren met behulp van zowel UIAutomatorViewer als Appium Desktop Inspector.

Hoe UIAutomatorViewer te openen

UIAutomatorViewer wordt geleverd met het Android Studio-installatiepakket. Dus wanneer u Android Studio installeert, wordt UIAutomatorViewer automatisch mee geïnstalleerd. Er zijn 2 manieren waarop u UIAutomatorViewer kunt openen. U kunt een van deze methoden volgen om het te openen –

Belangrijke opmerking: Zorg ervoor dat u onze Appium Tutorial gids heeft gevolgd en dat u de laatste versie van Android Studio heeft geïnstalleerd en de Android omgevingsvariabelen correct heeft ingesteld.

Methode 1: Open UIAutomatorViewer vanuit Command Prompt Dit is de gemakkelijkste manier om UIAutomatorViewer te openen. Volg gewoon de hieronder gegeven stappen om het te openen –

Stap 1.1: Open command prompt

Stap 1.2: Typ uiautomatorviewer en druk dan op Enter

Wacht een paar seconden. Het venster UIAutomatorViewer wordt geopend zoals hieronder getoond

Methode 2: Open UIAutomatorViewer vanuit zijn maplocatie UIAutomatorViewer is op uw machine geïnstalleerd als een .bat-bestand. Met deze methode navigeert u naar de maplocatie waar het is geïnstalleerd en opent u het vervolgens. Volg de onderstaande stappen om deze aanpak te gebruiken –

Stap 2.1: Open de maplocatie waar UIAutomatorViewer is geïnstalleerd. Over het algemeen is deze locatie – C:\Users\AnishAppData\Local\Android\sdk\toolsbin (Vervang ‘Anish’ door de gebruikersnaam die u op uw machine hebt)

Step 2.2: Controleer of deze bin map uiautomatorviewer bevat

Step 2.3: Dubbelklik op uiautomatorviewer. Het zal UI Automator Viewer venster openen in een paar seconden

Zoals we hierboven hadden vermeld, kunt u een van deze methoden gebruiken om UI Automator Viewer te openen.

Sluit uw mobiele telefoon aan op uw machine met behulp van USB

Voordat u begint met het inspecteren van elementen van uw mobiele app, moet u eerst uw mobiele apparaat op uw machine aansluiten via USB. Volg de onderstaande stappen om dit te doen –

Stap 1: Sluit uw mobiele telefoon aan op uw machine via USB

Stap 2: Om ervoor te zorgen dat de telefoon goed is aangesloten, opent u de opdrachtprompt en voert u het commando adb devices uit.

Wanneer u dit commando uitvoert, wordt de apparaat-ID van de mobiele telefoon weergegeven. Dit betekent dat de mobiele telefoon goed is aangesloten op uw machine.

Stap 3: U moet nu de app openen die u wilt inspecteren. Net als bij de vorige artikelen in onze Appium Tutorial serie, zullen we ook in dit geval de Google Play Store app als voorbeeld gebruiken. Dus, open Play Store app op uw telefoon

Inspecteer mobiele app met UI Automator Viewer

Volg de onderstaande stappen om uw mobiele app te inspecteren met UI Automator Viewer –

Stap 1: Zorg ervoor dat uw mobiele telefoon goed is aangesloten met USB. Zorg er ook voor dat het is ontgrendeld en Play Store app is geopend

Step 2: Klik nu op Device Screenshot icoon in UI Automator Viewer (dit is het tweede pictogram zoals weergegeven in de onderstaande afbeelding)

Note: U zou hebben gemerkt dat er andere pictogrammen naast Device Screenshot icoon dat u zojuist hebt geklikt. In dit artikel gaan we de functionaliteit van deze iconen niet uitleggen. We zullen deze behandelen in onze komende artikelen over Appium Inspector.

Stap 3: U ziet een popup-bericht dat de voortgangsinformatie toont zoals hieronder getoond

Stap 4: Wacht een paar seconden voor UI Automator Viewer om alle informatie op uw scherm te verwerken. Zodra dit is gebeurd, zal UI Automator Viewer de schermafbeelding van uw telefoon laden zoals getoond in de onderstaande afbeelding

Stap 5: Beweeg nu uw muisaanwijzer ergens op de schermafbeelding van het apparaat. U zult zien dat sommige informatie wordt weergegeven op de rechter zijpanelen

Laten we begrijpen wat hier gebeurt

Laten we nu even pauzeren en proberen te begrijpen wat hier gebeurde. Wanneer u op het pictogram Apparaat screenshot klikt, dan doet UI Automator Viewer de volgende drie dingen –

• Hij legt eerst de details vast van alle objecten die zichtbaar zijn op het scherm in XML-formaat.
• Dan legt het de schermafbeelding van het mobiele scherm vast in PNG formaat
• Als de bovenstaande details zijn vastgelegd, toont UI Automator Viewer deze beide dingen in de UI

Belangrijke opmerking: Technisch gesproken legt UI Automator Viewer alleen het mobiele scherm vast. Dus wat er ook wordt weergegeven op het apparaat, UI Automator Viewer zou dat vastleggen. Of het nu een app, of uw startscherm of zelfs lock screen.

3 belangrijke secties in UI Automator Viewer

Van de onderstaande afbeelding, kunt u zien dat UI Automator Viewer heeft 3 belangrijke secties –

1. Linker zijdeelvenster: Dit deelvenster toont de schermafbeelding van het apparaat. Dit is een interactieve afbeelding, waar u kunt klikken of uw muisaanwijzer op elk element op de screenshot.

2. Rechterzijde Top Pane: Dit deelvenster toont de volledige XML-structuur van het scherm. Deze XML-structuur toont zeer basisdetails over elk besturingselement – besturingsnaam, de tekst (indien beschikbaar) en de coördinaten.

3. Rechterkant Onderste deelvenster: Dit is een belangrijk deelvenster dat alle details van een controle toont. Welk element je ook selecteert uit de schermafbeelding, dit deelvenster toont alle details, zoals de tekst, de klassenaam, de pakketnaam enz. Dit is het deelvenster waar je informatie krijgt over hoe je een element uniek kunt identificeren.

Tot nu toe hebben we het gehad over de basisprincipes van UI Automator Viewer, hoe je het kunt openen en hoe je het screenshot van een mobiele app erin kunt laden. We zullen dit artikel hier stoppen en het resterende deel in het volgende artikel behandelen. Er zijn meerdere manieren waarop je een element kunt identificeren met Appium. We zullen dat allemaal bespreken en nog veel meer in onze komende artikelen over Appium Inspector.

Try it Yourself Activity: In een van de secties hierboven hebben we vermeld dat u uw mobiele apparaat op uw computer moet aansluiten met behulp van een USB-kabel. Wist je dat je dit ook in draadloze modus kunt doen? Bekijk dit artikel dat laat zien hoe je Appium testscripts kunt uitvoeren via WiFi. Gebruik dit artikel als referentie, probeer je mobiele apparaat aan te sluiten via WiFi en kijk dan of je elementen kunt inspecteren.

Voel je vrij om contact met ons op te nemen als je problemen hebt ondervonden met een van de bovenstaande secties, of als je feedback voor ons hebt. We zouden graag uw feedback te horen als het ons helpt verbeteren onze artikelen en maken het nuttiger voor al onze lezers.

Volgende set artikelen over Appium Inspector

• Leer hoe u elementen kunt inspecteren met UIAutomatorViewer
• Leer meer over UI Automator Viewer inclusief enkele beperkingen voor mobiele automatisering
• Leer over de basis van Appium Desktop Inspector
• Inspecteer mobiele elementen met Appium Desktop Inspector