Appium Inspector Tutorial – Del 1

Appium Inspector är nästa uppsättning artiklar i vår Appium Tutorial-serie. Detta är en serie på 4-5 artiklar som hjälper dig att lära dig processen för att identifiera element i din mobilapp. Låt oss börja med att förstå vad Appiums inspektionsprocess egentligen är.

Vad är Appiums inspektionsprocess?

Med mycket enkla ord är Appiums inspektion den process med vilken du kan identifiera eller hitta element i din mobilapp. Om du vill automatisera ett scenario i din mobilapp måste du följa dessa två steg –

• Steg 1: Identifiera elementet unikt
• Steg 2: Utför åtgärd på det identifierade elementet

Appium inspektionsprocess hjälper dig att lösa det första steget som nämns ovan. Låt oss till exempel anta att du har en app med en inloggningsskärm. Nu är din uppgift att ange användarnamn och lösenord på den här skärmen. Här skulle Appiums inspektionsprocess hjälpa dig att ”inspektera” skärmen och sedan låta dig identifiera textfälten på ett unikt sätt. På så sätt kan du skriva kod som anger inloggnings-id och lösenord i rätt fält.

Låt oss nu ta en titt på de verktyg som du kan använda för att inspektera dessa element.

Different Appium Inspectors that help you identify elements in mobile app

Det finns många olika verktyg som hjälper dig att inspektera element i mobilappar. Men för vår Appium Tutorial-serie kommer vi att täcka de mest populära och allmänt använda verktygen (och som stöds av Android eller Appium). Dessa verktyg är –

• UIAutomatorViewer: Detta är ett verktyg som tillhandahålls av Android Studio som låter dig inspektera element i din mobilapp
• Appium Desktop Inspector: Den senaste versionen av Appium GUI (Appium Desktop) har en inspektör. Du kan använda den här inspektören för både Android- och iOS-appar (för iOS-appar behöver du en Mac)

I den här artikeln börjar vi med grunderna för UIAutomatorViewer. De kommande artiklarna i den här serien kommer att täcka i detalj de olika sätt som du kan använda för att inspektera din mobilapp med hjälp av både UIAutomatorViewer och Appium Desktop Inspector.

Hur man öppnar UIAutomatorViewer

UIAutomatorViewer följer med Android Studio-installationspaketet. Så när du installerar Android Studio installeras UIAutomatorViewer automatiskt med det. Du kan öppna UIAutomatorViewer på två sätt. Du kan följa någon av dessa metoder för att öppna den –

Viktig anmärkning: Se till att du har följt vår Appium Tutorial guide och har installerat den senaste versionen av Android Studio och korrekt ställt in Android-miljövariablerna.

Metod 1: Öppna UIAutomatorViewer från kommandotolken Det här är det enklaste sättet att öppna UIAutomatorViewer. Följ bara stegen nedan för att öppna den –

Steg 1.1: Öppna kommandotolken

Steg 1.2: Skriv uiautomatorviewer och tryck sedan på Enter

Vänta i ett par sekunder. Fönstret UIAutomatorViewer öppnas enligt nedan

Metod 2: Öppna UIAutomatorViewer från mappens plats UIAutomatorViewer installeras på din maskin som en .bat-fil. Med den här metoden navigerar du till den mapp där den är installerad och öppnar den sedan. Följ stegen nedan för att använda denna metod –

Steg 2.1: Öppna den mapp där UIAutomatorViewer är installerad. Vanligtvis är denna plats – C:\Users\Anish\AppData\Local\Android\sdk\tools\bin (Ersätt ”Anish” med det användarnamn som du har på din maskin)

Steg 2.2: Kontrollera att denna bin-mapp innehåller uiautomatorviewer

Steg 2.3: Dubbelklicka på uiautomatorviewer. Det kommer att öppna UI Automator Viewer-fönstret på ett par sekunder

Som vi hade nämnt ovan kan du använda någon av dessa metoder för att öppna UI Automator Viewer.

Ansluta mobiltelefonen till maskinen med USB

För att du ska kunna börja inspektera delar av din mobilapp måste du först ansluta din mobila enhet till din maskin via USB. Följ nedanstående steg för att göra detta –

Steg 1: Anslut mobiltelefonen till maskinen via USB

Steg 2: För att kontrollera att telefonen är korrekt ansluten öppnar du kommandotolken och kör kommandot adb devices.

När du kör det här kommandot visas mobiltelefonens enhets-ID. Detta innebär att mobiltelefonen är korrekt ansluten till din maskin.

Steg 3: Du måste nu öppna den app som du vill inspektera. Precis som i de tidigare artiklarna i vår serie Appium Tutorials kommer vi att använda Google Play Store-appen som exempel även i det här fallet. Så öppna Play Store-appen på din telefon

Inspektera mobilappen med UI Automator Viewer

Följ stegen nedan för att inspektera din mobilapp med UI Automator Viewer –

Steg 1: Se till att din mobiltelefon är korrekt ansluten med USB. Se också till att den är olåst och att Play Store-appen är öppnad

Steg 2: Klicka nu på ikonen Enhetsskärmdumpning i UI Automator Viewer (detta är den andra ikonen som visas i bilden nedan)

Notera: Du har säkert lagt märke till att det finns andra ikoner bredvid ikonen Enhetsskärmdumpning som du just klickat på. I den här artikeln kommer vi inte att förklara funktionaliteten hos dessa ikoner. Vi kommer att täcka dessa i våra kommande artiklar om Appium Inspector.

Steg 3: Du kommer att se ett popup-meddelande som visar information om förloppet enligt nedan

Steg 4: Vänta några sekunder för att UI Automator Viewer ska behandla all information på din skärm. När detta är gjort kommer UI AUtomator Viewer att ladda in skärmbilden av din telefon som visas i bilden nedan

Steg 5: För nu muspekaren någonstans på enhetens skärmdump. Du kommer att se att viss information visas på den högra sidan

Låt oss förstå vad som händer här

Låt oss nu stanna upp ett ögonblick och försöka förstå vad som hände här. När du klickar på ikonen Device Screenshot gör UI Automator Viewer följande tre saker –

• Den fångar först detaljer om alla objekt som är synliga på skärmen i XML-format.
• Därefter fångar den skärmbilden av mobilskärmen i PNG-format
• När ovanstående detaljer har fångats visar UI Automator Viewer båda dessa saker i UI

Viktig anmärkning: Tekniskt sett fångar UI Automator Viewer bara din mobilskärm. Så vad som än visas på enheten, så fångar UI Automator Viewer det. Oavsett om det är en app, din hemskärm eller till och med låsskärmen.

3 huvudsektioner i UI Automator Viewer

Från bilden nedan kan du se att UI Automator Viewer har 3 huvudsektioner –

1. Vänster fönsterruta: Den här rutan visar enhetens skärmdump. Detta är en interaktiv bild, där du kan klicka eller föra muspekaren över ett element i skärmbilden.

2. Högra sidans övre ruta: Den här rutan visar hela XML-strukturen på skärmen. Denna XML-struktur visar mycket grundläggande information om varje kontroll – kontrollens namn, dess text (om tillgänglig) och dess koordinater.

3. Rutan längst ner på höger sida: Detta är en viktig ruta som visar alla detaljer om en kontroll. Oavsett vilket element du väljer från skärmbilden kommer den här rutan att visa alla detaljer om det, t.ex. dess text, klassnamn, paketnamn osv. Det är i den här rutan som du får information om hur du identifierar ett element unikt.

Till nu har vi talat om grunderna för UI Automator Viewer, hur du öppnar den och hur du kan ladda mobilappens skärmdump i den. Vi avslutar den här artikeln här och täcker den resterande delen i nästa artikel. Det finns flera sätt på vilka du kan identifiera ett element med Appium. Vi kommer att diskutera allt detta och mycket mer i våra kommande artiklar om Appium Inspector.

Aktivitet för att prova själv: I ett av avsnitten ovan har vi nämnt att du måste ansluta din mobila enhet till datorn med en USB-kabel. Visste du att du också kan göra detta i trådlöst läge? Kolla in den här artikeln som visar hur du kan köra dina Appium-testskript över WiFi. Använd den här artikeln som referens och försök att ansluta din mobila enhet via WiFi och se sedan om du kan inspektera några element.

Kom gärna i kontakt med oss om du har stött på problem med något av avsnitten ovan, eller om du har någon feedback till oss. Vi vill gärna höra din feedback eftersom det hjälper oss att förbättra våra artiklar och göra dem mer användbara för alla våra läsare.

Nästa uppsättning artiklar om Appium Inspector

• Lär dig att inspektera element med hjälp av UIAutomatorViewer
• Lär dig mer om UI Automator Viewer, inklusive vissa begränsningar för mobil automatisering
• Lär dig om grunderna i Appium Desktop Inspector
• Inspektera mobila element med hjälp av Appium Desktop Inspector

.