Appium Inspector Tutorial – Part 1

Appium Inspector jest kolejnym zestawem artykułów w naszej serii Appium Tutorial. Jest to seria 4-5 artykułów, które pomogą Ci nauczyć się procesu identyfikacji elementów w Twojej aplikacji mobilnej. Zacznijmy od zrozumienia czym właściwie jest proces inspekcji Appium.

Czym jest proces inspekcji Appium?

W bardzo prostych słowach, inspekcja Appium jest procesem, za pomocą którego możesz zidentyfikować lub znaleźć elementy w swojej aplikacji mobilnej. Jeśli chcesz zautomatyzować dowolny scenariusz w swojej aplikacji mobilnej, to musisz wykonać te 2 kroki –

• Krok 1: Zidentyfikuj element jednoznacznie
• Krok 2: Wykonaj akcję na zidentyfikowanym elemencie

Proces inspekcji Appium pomaga rozwiązać pierwszy krok wymieniony powyżej. Na przykład, załóżmy, że masz aplikację z ekranem logowania. Teraz Twoim zadaniem jest wprowadzenie nazwy użytkownika i hasła na tym ekranie. Tutaj, proces inspekcji Appium pomoże Ci „zbadać” ekran, a następnie pozwoli Ci jednoznacznie zidentyfikować pola tekstowe. W ten sposób będziesz w stanie napisać kod, który wprowadza login i hasło w prawidłowych polach.

Przyjrzyjrzyjmy się teraz narzędziom, których możesz użyć do inspekcji tych elementów.

Różne inspektory Appium, które pomagają w identyfikacji elementów w aplikacji mobilnej

Istnieje wiele różnych narzędzi, które pomagają w inspekcji elementów w aplikacjach mobilnych. Ale dla naszej serii Appium Tutorial, zajmiemy się najbardziej popularnymi i powszechnie używanymi narzędziami (i obsługiwanymi przez Android lub Appium). Te narzędzia to –

• UIAutomatorViewer: Jest to narzędzie dostarczane przez Android Studio, które pozwala na inspekcję elementów w aplikacji mobilnej
• Appium Desktop Inspector: Najnowsza wersja Appium GUI (Appium Desktop) pochodzi z inspektorem. Możesz używać tego inspektora zarówno dla aplikacji na Androida jak i iOS (dla aplikacji na iOS potrzebujesz Maca)

W tym artykule, zaczniemy od podstaw UIAutomatorViewer. Następne kilka artykułów z tej serii będzie szczegółowo omawiać różne sposoby, za pomocą których można sprawdzić swoją aplikację mobilną przy użyciu zarówno UIAutomatorViewer, jak i Appium Desktop Inspector.

Jak otworzyć UIAutomatorViewer

UIAutomatorViewer pochodzi z pakietem instalacyjnym Android Studio. Więc kiedy zainstalujesz Android Studio, UIAutomatorViewer zostanie automatycznie zainstalowany z nim. Istnieją 2 sposoby, w jaki można otworzyć UIAutomatorViewer. Możesz wykonać dowolną z tych metod, aby go otworzyć –

Important Note: Upewnij się, że zastosowałeś się do naszego przewodnika Appium Tutorial i zainstalowałeś najnowszą wersję Android Studio i poprawnie skonfigurowałeś zmienne środowiskowe Androida.

Metoda 1: Otwórz UIAutomatorViewer z Wiersza poleceń Jest to najprostszy sposób na otwarcie UIAutomatorViewer. Wystarczy wykonać kroki podane poniżej, aby go otworzyć –

Krok 1.1: Otwórz wiersz poleceń

Krok 1.2: Wpisz uiautomatorviewer, a następnie naciśnij Enter

Poczekaj kilka sekund. UIAutomatorViewer okno otworzy się jak pokazano poniżej

Metoda 2: Otwórz UIAutomatorViewer z jego lokalizacji folderu UIAutomatorViewer jest zainstalowany na komputerze jako plik .bat. Korzystanie z tej metody, będziesz nawigować do lokalizacji folderu, gdzie jest zainstalowany, a następnie otworzyć go. Postępuj zgodnie z krokami podanymi poniżej, aby użyć tego podejścia –

Krok 2.1: Otwórz lokalizację folderu, w którym zainstalowany jest UIAutomatorViewer. Generalnie, ta lokalizacja jest – C:\Users \Anish \AppData \Local \Android \sdk \tools \bin (Zastąp „Anish” z nazwą użytkownika, który masz na komputerze)

Krok 2.2: Sprawdź, czy ten folder bin zawiera uiautomatorviewer

Krok 2.3: Kliknij dwukrotnie na uiautomatorviewer. Spowoduje to otwarcie okna UI Automator Viewer w ciągu kilku sekund

Jak wspomnieliśmy powyżej, możesz użyć dowolnej z tych metod, aby otworzyć UI Automator Viewer.

Podłącz telefon komórkowy do komputera za pomocą USB

Zanim zaczniesz sprawdzać elementy swojej aplikacji mobilnej, musisz najpierw podłączyć urządzenie mobilne do komputera za pomocą USB. Wykonaj poniższe kroki, aby to zrobić –

Krok 1: Podłącz swój telefon komórkowy do maszyny za pomocą USB

Krok 2: Aby upewnić się, że telefon jest podłączony prawidłowo, otwórz wiersz poleceń i uruchom polecenie adb devices.

Kiedy uruchomisz to polecenie, wyświetli ono identyfikator urządzenia telefonu komórkowego. Oznacza to, że telefon komórkowy jest podłączony prawidłowo do maszyny.

Krok 3: Teraz trzeba będzie otworzyć aplikację, którą chcesz sprawdzić. Podobnie jak w poprzednich artykułach z serii Appium Tutorial, również i w tym przypadku będziemy używać aplikacji Google Play Store jako przykładu. Tak więc, otwórz aplikację Sklep Play na swoim telefonie

Sprawdź aplikację mobilną używając UI Automator Viewer

Postępuj zgodnie z krokami podanymi poniżej, aby sprawdzić aplikację mobilną za pomocą UI Automator Viewer –

Krok 1: Upewnij się, że Twój telefon komórkowy jest prawidłowo podłączony za pomocą USB. Również upewnij się, że jest odblokowany i Sklep Play app jest otwarty

Krok 2: Teraz kliknij na ikonę Device Screenshot w UI Automator Viewer (jest to druga ikona, jak pokazano na poniższym obrazku)

Uwaga: Można by zauważyć, że istnieją inne ikony obok ikony Device Screenshot właśnie kliknął. W tym artykule, nie zamierzamy wyjaśnić funkcjonalność tych ikon. Zajmiemy się nimi w naszych nadchodzących artykułach na temat Appium Inspector.

Krok 3: Zobaczysz wyskakujący komunikat, który pokazuje informacje o postępie, jak pokazano poniżej

Krok 4: Poczekaj kilka sekund, aby UI Automator Viewer przetworzył wszystkie informacje na ekranie. Gdy to się stanie, UI AUtomator Viewer załaduje zrzut ekranu telefonu, jak pokazano na poniższym obrazie

Krok 5: Teraz, przesuń kursor myszy w dowolnym miejscu na zrzucie ekranu urządzenia. Zobaczysz, że niektóre informacje dostaje wyświetlane na prawej stronie panes

Let’s understand whats happening here

Let us now pause for a moment and try to understand what happened here. Po kliknięciu ikony Device Screenshot, UI Automator Viewer wykonuje następujące trzy czynności –

• Najpierw przechwytuje szczegóły wszystkich obiektów widocznych na ekranie w formacie XML.
• Następnie przechwytuje zrzut ekranu urządzenia przenośnego w formacie PNG
• Po przechwyceniu powyższych szczegółów program UI Automator Viewer pokazuje obie te rzeczy w interfejsie użytkownika

Ważna uwaga: Technicznie rzecz biorąc, program UI Automator Viewer po prostu przechwytuje ekran urządzenia przenośnego. Więc cokolwiek jest wyświetlane na urządzeniu, UI Automator Viewer przechwyci to. Be it any app, or your home screen or even lock screen.

3 main sections in UI Automator Viewer

From the below image, you can see that UI Automator Viewer has 3 main sections –

1. Left Side Pane: Ten panel pokazuje zrzut ekranu urządzenia. Jest to interaktywny obraz, w którym można kliknąć lub najechać kursorem myszy na dowolny element na zrzucie ekranu.

2. Right Side Top Pane: Ten panel pokazuje całą strukturę XML ekranu. Ta struktura XML pokazuje bardzo podstawowe szczegóły dotyczące każdej kontrolki – nazwę kontrolki, jej tekst (jeśli jest dostępny) i jej współrzędne.

3. Right Side Bottom Pane: Jest to ważny panel, który pokazuje wszystkie szczegóły kontrolki. Niezależnie od tego, który element wybierzesz, ten panel pokaże wszystkie szczegóły, takie jak tekst, nazwa klasy, nazwa pakietu itp. Jest to panel, z którego można uzyskać informacje o tym, jak jednoznacznie zidentyfikować element.

Do tej pory mówiliśmy o podstawach UI Automator Viewer, jak go otworzyć i jak można załadować zrzut ekranu aplikacji mobilnej w nim. Zatrzymamy ten artykuł w tym miejscu i zajmiemy się pozostałą częścią w następnym artykule. Istnieje wiele sposobów, w jaki można zidentyfikować element w Appium. Omówimy to wszystko i wiele więcej w naszych nadchodzących artykułach na temat Appium Inspector.

Try it Yourself Activity: W jednej z powyższych sekcji wspomnieliśmy, że musisz podłączyć swoje urządzenie mobilne do komputera za pomocą kabla USB. Czy wiesz, że możesz to zrobić również w trybie bezprzewodowym? Sprawdź ten artykuł, który pokazuje jak możesz uruchamiać skrypty testowe Appium przez WiFi. Używając tego artykułu jako odniesienia, spróbuj podłączyć swoje urządzenie mobilne przez WiFi, a następnie sprawdź, czy możesz sprawdzić dowolne elementy.

Nie krępuj się skontaktować z nami, jeśli napotkałeś jakiekolwiek problemy z którąś z powyższych sekcji lub jeśli masz dla nas jakieś uwagi. Chętnie poznamy Twoją opinię, ponieważ pomoże nam ona ulepszyć nasze artykuły i uczynić je bardziej użytecznymi dla wszystkich naszych czytelników.

Następny zestaw artykułów na temat Appium Inspector

• Naucz się jak sprawdzać elementy używając UIAutomatorViewer
• Dowiedz się więcej o UI Automator Viewer, w tym o niektórych ograniczeniach automatyzacji mobilnej
• Poznaj podstawy Appium Desktop Inspector
• Sprawdź elementy mobilne używając Appium Desktop Inspector

.