Appium Inspector Tutorial – Teil 1

Appium Inspector ist die nächste Reihe von Artikeln in unserer Appium Tutorial Serie. Dies ist eine Serie von 4-5 Artikeln, die Ihnen helfen, den Prozess der Identifizierung von Elementen in Ihrer mobilen App zu erlernen. Beginnen wir damit, zu verstehen, was der Appium Inspektionsprozess eigentlich ist.

Was ist der Appium Inspektionsprozess?

In sehr einfachen Worten ist Appium Inspector der Prozess, mit dem Sie Elemente in Ihrer mobilen App identifizieren oder finden können. Wenn Sie ein beliebiges Szenario in Ihrer mobilen App automatisieren möchten, müssen Sie diese 2 Schritte befolgen –

• Schritt 1: Identifizieren Sie das Element eindeutig
• Schritt 2: Führen Sie eine Aktion für das identifizierte Element durch

Der Appium Inspektionsprozess hilft Ihnen, den ersten oben genannten Schritt zu lösen. Nehmen wir zum Beispiel an, dass Sie eine App mit einem Anmeldebildschirm haben. Ihre Aufgabe ist es nun, Benutzername und Passwort in diesen Bildschirm einzugeben. Hier würde Ihnen der Appium-Inspektionsprozess helfen, den Bildschirm zu „inspizieren“ und dann die Textfelder eindeutig zu identifizieren. Auf diese Weise sind Sie in der Lage, einen Code zu schreiben, der die Anmelde-ID und das Passwort in die richtigen Felder eingibt.

Werfen wir nun einen Blick auf die Tools, die Sie verwenden können, um diese Elemente zu inspizieren.

Unterschiedliche Appium-Inspektoren, die Ihnen helfen, Elemente in mobilen Apps zu identifizieren

Es gibt viele verschiedene Tools, die Ihnen helfen, Elemente in mobilen Apps zu inspizieren. Aber für unsere Appium-Tutorial-Reihe werden wir die beliebtesten und am weitesten verbreiteten Tools behandeln (und von Android oder Appium unterstützt). Diese Tools sind –

• UIAutomatorViewer: Dies ist ein von Android Studio bereitgestelltes Tool, mit dem Sie Elemente in Ihrer mobilen App inspizieren können
• Appium Desktop Inspector: Die neueste Version von Appium GUI (Appium Desktop) enthält einen Inspektor. Sie können diesen Inspektor sowohl für Android- als auch für iOS-Apps verwenden (für iOS-Apps benötigen Sie einen Mac)

In diesem Artikel werden wir mit den Grundlagen des UIAutomatorViewers beginnen. Die nächsten Artikel dieser Serie werden im Detail die verschiedenen Möglichkeiten behandeln, mit denen Sie Ihre mobile App sowohl mit dem UIAutomatorViewer als auch mit dem Appium Desktop Inspector inspizieren können.

So öffnen Sie den UIAutomatorViewer

Der UIAutomatorViewer ist im Installationspaket von Android Studio enthalten. Wenn Sie also Android Studio installieren, wird UIAutomatorViewer automatisch mit installiert. Es gibt 2 Möglichkeiten, wie Sie UIAutomatorViewer öffnen können.

Wichtiger Hinweis: Bitte stellen Sie sicher, dass Sie unseren Appium Tutorial Leitfaden befolgt haben und die neueste Version von Android Studio installiert und die Android Umgebungsvariablen korrekt eingerichtet haben.

Methode 1: UIAutomatorViewer von der Eingabeaufforderung aus öffnen Dies ist der einfachste Weg, UIAutomatorViewer zu öffnen. Folgen Sie einfach den unten angegebenen Schritten, um ihn zu öffnen –

Schritt 1.1: Öffnen Sie die Eingabeaufforderung

Schritt 1.2: Geben Sie uiautomatorviewer ein und drücken Sie dann die Eingabetaste

Warten Sie ein paar Sekunden lang. Das UIAutomatorViewer-Fenster öffnet sich wie unten gezeigt

Methode 2: Öffnen Sie UIAutomatorViewer aus dem entsprechenden Ordner UIAutomatorViewer wird auf Ihrem Computer als .bat-Datei installiert. Bei dieser Methode navigieren Sie zu dem Ordner, in dem die Datei installiert ist, und öffnen sie dann. Befolgen Sie die folgenden Schritte, um diese Methode anzuwenden –

Schritt 2.1: Öffnen Sie den Ordner, in dem der UIAutomatorViewer installiert ist. In der Regel ist dieser Ort – C:\Users\Anish\AppData\Local\Android\sdk\tools\bin (Ersetzen Sie ‚Anish‘ durch den Benutzernamen, den Sie auf Ihrem Rechner haben)

Schritt 2.2: Überprüfen Sie, ob dieser bin-Ordner uiautomatorviewer enthält

Schritt 2.3: Doppelklicken Sie auf uiautomatorviewer. Das Fenster von UI Automator Viewer wird sich in wenigen Sekunden öffnen

Wie bereits erwähnt, können Sie jede dieser Methoden verwenden, um UI Automator Viewer zu öffnen.

Verbinden Sie Ihr Mobiltelefon über USB mit Ihrem Rechner

Bevor Sie mit der Inspektion von Elementen Ihrer mobilen App beginnen, müssen Sie zunächst Ihr mobiles Gerät über USB mit Ihrem Rechner verbinden. Befolgen Sie dazu die folgenden Schritte –

Schritt 1: Verbinden Sie Ihr Mobiltelefon über USB mit Ihrem Rechner

Schritt 2: Um sicherzustellen, dass das Telefon richtig angeschlossen ist, öffnen Sie die Eingabeaufforderung und führen Sie den Befehl adb devices aus.

Wenn Sie diesen Befehl ausführen, wird die Geräte-ID des Mobiltelefons angezeigt. Das bedeutet, dass das Mobiltelefon ordnungsgemäß mit Ihrem Rechner verbunden ist.

Schritt 3: Sie müssen nun die App öffnen, die Sie überprüfen möchten. Wie in den vorherigen Artikeln unserer Appium-Tutorial-Reihe werden wir auch in diesem Fall die Google Play Store-App als Beispiel verwenden. Öffnen Sie also die Play Store App auf Ihrem Telefon

Untersuchen Sie die mobile App mit dem UI Automator Viewer

Befolgen Sie die folgenden Schritte, um Ihre mobile App mit dem UI Automator Viewer zu untersuchen –

Schritt 1: Vergewissern Sie sich, dass Ihr Mobiltelefon ordnungsgemäß mit USB verbunden ist. Stellen Sie außerdem sicher, dass es entsperrt und die Play Store App geöffnet ist

Schritt 2: Klicken Sie nun auf das Symbol für den Geräte-Screenshot im UI Automator Viewer (dies ist das zweite Symbol, wie im folgenden Bild gezeigt)

Hinweis: Sie werden bemerkt haben, dass es neben dem Symbol für den Geräte-Screenshot, auf das Sie gerade geklickt haben, weitere Symbole gibt. In diesem Artikel werden wir nicht auf die Funktionalität dieser Symbole eingehen. Wir werden diese in unseren kommenden Artikeln über Appium Inspector behandeln.

Schritt 3: Sie werden eine Popup-Meldung sehen, die die Fortschrittsinformationen wie unten gezeigt anzeigt

Schritt 4: Warten Sie ein paar Sekunden, bis UI Automator Viewer alle Informationen auf Ihrem Bildschirm verarbeitet hat. Sobald dies geschehen ist, lädt UI AUtomator Viewer den Screenshot Ihres Telefons, wie im folgenden Bild gezeigt

Schritt 5: Bewegen Sie nun Ihren Mauszeiger irgendwo auf den Screenshot des Geräts. Sie werden sehen, dass einige Informationen auf der rechten Seite angezeigt werden

Lassen Sie uns verstehen, was hier passiert

Lassen Sie uns jetzt einen Moment innehalten und versuchen zu verstehen, was hier passiert. Wenn Sie auf das Symbol „Geräte-Screenshot“ klicken, führt der UI Automator Viewer die folgenden drei Schritte aus:

• Er erfasst zunächst die Details aller auf dem Bildschirm sichtbaren Objekte im XML-Format.
• Dann wird der Screenshot des mobilen Bildschirms im PNG-Format erfasst
• Nachdem die oben genannten Details erfasst wurden, zeigt UI Automator Viewer diese beiden Dinge in der Benutzeroberfläche an

Wichtiger Hinweis: Technisch gesehen erfasst UI Automator Viewer nur Ihren mobilen Bildschirm. Was auch immer also auf dem Gerät angezeigt wird, UI Automator Viewer würde es erfassen. Sei es eine App, der Startbildschirm oder sogar der Sperrbildschirm.

3 Hauptbereiche im UI Automator Viewer

Aus dem untenstehenden Bild können Sie erkennen, dass der UI Automator Viewer 3 Hauptbereiche hat –

1. Linkes Seitenfenster: Dieser Bereich zeigt den Bildschirmausdruck des Geräts. Es handelt sich um ein interaktives Bild, bei dem Sie mit dem Mauszeiger auf ein beliebiges Element auf dem Screenshot klicken oder darüber fahren können.

2. Rechts oben: Dieser Bereich zeigt die gesamte XML-Struktur des Bildschirms. Diese XML-Struktur zeigt sehr grundlegende Details über jedes Steuerelement – Name des Steuerelements, seinen Text (falls vorhanden) und seine Koordinaten.

3. Rechtes Fenster unten: Dies ist ein wichtiger Bereich, der alle Details zu einem Steuerelement anzeigt. Welches Element Sie auch immer aus dem Screenshot auswählen, in diesem Fenster werden alle Details wie Text, Klassenname, Paketname usw. angezeigt. In diesem Bereich erhalten Sie Informationen darüber, wie Sie ein Element eindeutig identifizieren können.

Bis jetzt haben wir über die Grundlagen des UI Automator Viewers gesprochen, wie man ihn öffnet und wie man den Screenshot einer mobilen App in ihn lädt. Wir werden diesen Artikel hier beenden und den restlichen Teil im nächsten Artikel behandeln. Es gibt mehrere Möglichkeiten, wie Sie ein Element mit Appium identifizieren können. All das und noch viel mehr werden wir in unseren kommenden Artikeln über Appium Inspector besprechen.

Try it Yourself Activity: In einem der obigen Abschnitte haben wir erwähnt, dass Sie Ihr mobiles Gerät mit einem USB-Kabel an Ihren Computer anschließen müssen. Wussten Sie, dass Sie dies auch im drahtlosen Modus tun können? In diesem Artikel erfahren Sie, wie Sie Ihre Appium-Testskripte über WiFi ausführen können. Versuchen Sie anhand dieses Artikels, Ihr mobiles Gerät über WiFi zu verbinden, und sehen Sie dann, ob Sie irgendwelche Elemente inspizieren können.

Sie können uns gerne kontaktieren, wenn Sie Probleme mit einem der oben genannten Abschnitte haben oder wenn Sie uns Feedback geben möchten. Wir würden uns über Ihr Feedback freuen, da es uns hilft, unsere Artikel zu verbessern und sie für alle unsere Leser noch nützlicher zu machen.

Nächste Artikelreihe zu Appium Inspector

• Lernen Sie, wie man Elemente mit dem UIAutomatorViewer inspiziert
• Lernen Sie mehr über den UI Automator Viewer, einschließlich einiger Einschränkungen der mobilen Automatisierung
• Lernen Sie die Grundlagen von Appium Desktop Inspector
• Inspektieren Sie mobile Elemente mit Appium Desktop Inspector