Appium Inspector Tutorial – Del 1

Appium Inspector er det næste sæt artikler i vores Appium Tutorial-serie. Dette er en serie på 4-5 artikler, som vil hjælpe dig med at lære processen med at identificere elementer på din mobilapp. Lad os starte dette ved at forstå, hvad Appium-inspektionsprocessen faktisk er.

Hvad er Appium-inspektionsprocessen?

I meget enkle ord er Appium-inspektion den proces, hvormed du kan identificere eller finde elementer i din mobilapp. Hvis du vil automatisere et scenarie i din mobilapp, skal du følge disse 2 trin –

• Trin 1: Identificer elementet entydigt
• Trin 2: Udfør handling på det identificerede element

Appium inspektionsproces hjælper dig med at løse det første trin, der er nævnt ovenfor. Lad os f.eks. antage, at du har en app med en login-skærm. Nu er din opgave at indtaste brugernavn og adgangskode på denne skærm. Her vil Appium-inspektionsprocessen hjælpe dig med at “inspicere” skærmen og derefter lade dig identificere tekstfelterne entydigt. På den måde vil du kunne skrive kode, som indtaster login id og password i de korrekte felter.

Lad os nu se på de værktøjer, som du kan bruge til at inspicere disse elementer.

Different Appium Inspectors that help you identify elements in mobile app

Der findes mange forskellige værktøjer, som hjælper dig med at inspicere elementer i mobilapps. Men i vores Appium Tutorial-serie vil vi dække de mest populære og udbredte værktøjer (og understøttet af Android eller Appium). Disse værktøjer er –

• UIAutomatorViewer: Dette er et værktøj, der leveres af Android Studio, som giver dig mulighed for at inspicere elementer i din mobilapp
• Appium Desktop Inspector: Den nyeste version af Appium GUI (Appium Desktop) leveres med en inspektør. Du kan bruge denne inspektør til både Android- og iOS-apps (til iOS-apps skal du bruge en Mac)

I denne artikel vil vi starte med det grundlæggende i UIAutomatorViewer. De næste par artikler i denne serie vil i detaljer dække de forskellige måder, hvorpå du kan inspicere din mobilapp ved hjælp af både UIAutomatorViewer og Appium Desktop Inspector.

Sådan åbner du UIAutomatorViewer

UIAutomatorViewer leveres med Android Studio-installationspakken. Så når du installerer Android Studio, vil UIAutomatorViewer automatisk blive installeret sammen med det. Der er 2 måder, hvorpå du kan åbne UIAutomatorViewer. Du kan følge en af disse metoder for at åbne den –

Vigtig bemærkning: Sørg for, at du har fulgt vores Appium Tutorial-guide og har installeret den nyeste version af Android Studio og konfigureret Android-miljøvariablerne korrekt.

Metode 1: Åbn UIAutomatorViewer fra kommandoprompt Dette er den nemmeste måde at åbne UIAutomatorViewer på. Følg blot nedenstående trin for at åbne den –

Strin 1.1: Åbn kommandoprompt

Stræk 1.2: Skriv uiautomatorviewer, og tryk derefter på Enter

Venter i et par sekunder. UIAutomatorViewer-vinduet vil blive åbnet som vist nedenfor

Metode 2: Åbn UIAutomatorViewer fra dens mappeplacering UIAutomatorViewer er installeret på din maskine som en .bat-fil. Ved hjælp af denne metode skal du navigere til den mappeplacering, hvor den er installeret, og derefter åbne den. Følg nedenstående trin for at bruge denne metode –

Strin 2.1: Åbn den mappeplacering, hvor UIAutomatorViewer er installeret. Generelt er denne placering – C:\Users\Anish\AppData\Local\Android\sdk\tools\bin (Erstat ‘Anish’ med det brugernavn, som du har på din maskine)

Stræk 2.2: Trin 2.2: Kontroller, at denne bin-mappe indeholder uiautomatorviewer

Stræk 2.3: Dobbeltklik på uiautomatorviewer. Det vil åbne UI Automator Viewer-vinduet i løbet af et par sekunder

Som vi havde nævnt ovenfor, kan du bruge en af disse metoder til at åbne UI Automator Viewer.

Slut din mobiltelefon til din maskine via USB

Hvor du begynder at inspicere elementer i din mobilapp, skal du først tilslutte din mobilenhed til din maskine via USB. Følg nedenstående trin for at gøre dette –

Strin 1: Tilslut din mobiltelefon til din maskine via USB

Strin 2: For at sikre dig, at telefonen er tilsluttet korrekt, skal du åbne kommandoprompten og køre kommandoen adb devices.

Når du kører denne kommando, vil den vise mobiltelefonens Enheds-id. Det betyder, at mobiltelefonen er tilsluttet korrekt til din maskine.

Stræk 3: Du skal nu åbne den app, som du vil inspicere. Som i de tidligere artikler i vores Appium Tutorial-serie vil vi også i dette tilfælde bruge Google Play Store-appen som et eksempel. Så åbn Play Store-appen på din telefon

Inspicer mobilappen ved hjælp af UI Automator Viewer

Følg nedenstående trin for at inspicere din mobilapp med UI Automator Viewer –

Stræk 1: Sørg for, at din mobiltelefon er tilsluttet korrekt med USB. Sørg også for, at den er låst op, og at Play Store-appen er åbnet

Skridt 2: Klik nu på ikonet Enhedsskærmbillede i UI Automator Viewer (dette er det andet ikon, som vist på nedenstående billede)

Bemærk: Du har sikkert bemærket, at der er andre ikoner ved siden af ikonet Enhedsskærmbillede, som du lige har klikket på. I denne artikel vil vi ikke forklare funktionaliteten af disse ikoner. Vi vil dække disse i vores kommende artikler om Appium Inspector.

Stræk 3: Du vil se en popup-meddelelse, der viser fremskridtsoplysningerne som vist nedenfor

Stræk 4: Vent et par sekunder på, at UI Automator Viewer behandler alle oplysningerne på din skærm. Når dette er gjort, vil UI AUtomator Viewer indlæse skærmbilledet af din telefon som vist i nedenstående billede

Stræk 5: Før nu musemarkøren et sted hen på enhedens skærmbillede. Du vil se, at der vises nogle oplysninger i højre side af skærmen

Lad os forstå, hvad der sker her

Lad os nu holde en pause et øjeblik og forsøge at forstå, hvad der skete her. Når du klikker på ikonet Device Screenshot, gør UI Automator Viewer følgende tre ting –

• Den opfanger først detaljer om alle de objekter, der er synlige på skærmen, i XML-format.
• Dernæst opfanger den skærmbilledet af mobilskærmen i PNG-format
• Når ovenstående detaljer er opfanget, viser UI Automator Viewer begge disse ting i UI

Vigtig bemærkning: Teknisk set opfanger UI Automator Viewer blot din mobilskærm. Så uanset hvad der vises på enheden, vil UI Automator Viewer fange det. Det være sig en app eller din startskærm eller endda låseskærm.

3 hovedafsnit i UI Automator Viewer

Fra nedenstående billede kan du se, at UI Automator Viewer har 3 hovedafsnit –

1. Venstre side rude: Denne rude viser skærmbilledet af enheden. Dette er et interaktivt billede, hvor du kan klikke eller føre musemarkøren hen over et hvilket som helst element på skærmbilledet.

2. Højre side øverst i ruden: Denne rude viser hele XML-strukturen på skærmen. Denne XML-struktur viser meget grundlæggende detaljer om hver kontrol – kontrolnavn, dens tekst (hvis tilgængelig) og dens koordinater.

3. Højre side nederste rude: Dette er en vigtig rude, som viser alle detaljer om en kontrol. Uanset hvilket element du vælger fra skærmbilledet, vil denne rude vise alle detaljerne om det, f.eks. dets tekst, klassens navn, pakkenavn osv. Dette er den rude, hvorfra du får oplysninger om, hvordan du kan identificere et element entydigt.

Indtil nu har vi talt om det grundlæggende i UI Automator Viewer, hvordan du åbner den, og hvordan du kan indlæse mobilappens skærmbillede i den. Vi vil stoppe denne artikel her og dække den resterende del i den næste artikel. Der er flere måder, hvorpå du kan identificere et element med Appium. Vi vil diskutere alt dette og meget mere i vores kommende artikler om Appium Inspector.

Try it Yourself Activity: I et af afsnittene ovenfor har vi nævnt, at du skal tilslutte din mobilenhed til din computer ved hjælp af et USB-kabel. Vidste du, at du også kan gøre dette i trådløs tilstand? Tjek denne artikel, som viser, hvordan du kan køre dine Appium-testscripts via WiFi. Brug denne artikel som reference, og prøv at tilslutte din mobilenhed via WiFi, og se derefter, om du kan inspicere nogen elementer.

Du er velkommen til at kontakte os, hvis du har stået over for problemer med nogen af de ovenstående afsnit, eller hvis du har feedback til os. Vi vil meget gerne høre din feedback, da det hjælper os med at forbedre vores artikler og gøre dem mere nyttige for alle vores læsere.

Næste sæt artikler om Appium Inspector

• Lær hvordan du inspicerer elementer ved hjælp af UIAutomatorViewer
• Lær mere om UI Automator Viewer, herunder nogle begrænsninger for mobil automatisering
• Lær om det grundlæggende i Appium Desktop Inspector
• Inspicer mobile elementer ved hjælp af Appium Desktop Inspector