Appium Inspector Tutorial – Parte 1

Appium Inspector è la prossima serie di articoli della nostra serie Appium Tutorial. Questa è una serie di 4-5 articoli che ti aiuterà a imparare il processo di identificazione degli elementi della tua app mobile. Cominciamo comprendendo cosa sia effettivamente il processo di ispezione di Appium.

Che cos’è il processo di ispezione di Appium?

In parole molto semplici, l’ispezione di Appium è il processo con cui puoi identificare o trovare elementi nella tua app mobile. Se vuoi automatizzare qualsiasi scenario nella tua app mobile, allora dovresti seguire questi 2 passi –

• Passo 1: Identificare l’elemento in modo univoco
• Passo 2: Eseguire un’azione sull’elemento identificato

Il processo di ispezione di Appium ti aiuta a risolvere il primo passo menzionato sopra. Per esempio, supponiamo che abbiate un’app con una schermata di login. Ora il vostro compito è quello di inserire nome utente e password in questa schermata. Qui, il processo di ispezione di Appium vi aiuterebbe a “ispezionare” lo schermo e poi vi permetterebbe di identificare in modo univoco i campi di testo. In questo modo sarete in grado di scrivere il codice che inserisce l’id e la password di accesso nei campi corretti.

Diamo ora un’occhiata agli strumenti che potete usare per ispezionare questi elementi.

Diversi ispettori di Appium che vi aiutano a identificare gli elementi nelle app mobili

Ci sono molti strumenti diversi che vi aiutano a ispezionare gli elementi nelle app mobili. Ma per la nostra serie di tutorial Appium, copriremo gli strumenti più popolari e ampiamente utilizzati (e supportati da Android o Appium). Questi strumenti sono –

• UIAutomatorViewer: Questo è uno strumento fornito da Android Studio che ti permette di ispezionare gli elementi nella tua app mobile
• Appium Desktop Inspector: L’ultima versione di Appium GUI (Appium Desktop) è dotata di un ispettore. Puoi usare questo ispettore sia per le app Android che iOS (per le app iOS, avresti bisogno di un Mac)

In questo articolo, inizieremo con le basi di UIAutomatorViewer. I prossimi articoli di questa serie copriranno in dettaglio i diversi modi in cui puoi ispezionare la tua app mobile usando sia UIAutomatorViewer che Appium Desktop Inspector.

Come aprire UIAutomatorViewer

UIAutomatorViewer viene fornito con il pacchetto di installazione di Android Studio. Quindi quando si installa Android Studio, UIAutomatorViewer viene automaticamente installato con esso. Ci sono 2 modi in cui è possibile aprire UIAutomatorViewer. Puoi seguire uno di questi metodi per aprirlo –

Nota importante: Assicurati di aver seguito la nostra guida Appium Tutorial e di aver installato l’ultima versione di Android Studio e impostato correttamente le variabili di ambiente Android.

Metodo 1: Aprire UIAutomatorViewer dal prompt dei comandi Questo è il modo più semplice di aprire UIAutomatorViewer. Basta seguire i passi indicati di seguito per aprirlo –

Passo 1.1: Apri il prompt dei comandi

Passo 1.2: Digita uiautomatorviewer e poi premi Invio

Aspetta un paio di secondi. La finestra di UIAutomatorViewer si aprirà come mostrato qui sotto

Metodo 2: Aprire UIAutomatorViewer dalla sua cartella UIAutomatorViewer è installato sulla tua macchina come un file .bat. Usando questo metodo, si naviga fino alla cartella in cui è installato e poi lo si apre. Segui i passi indicati di seguito per usare questo approccio –

Passo 2.1: Aprire la cartella dove è installato UIAutomatorViewer. Generalmente, questo percorso è – C:\Users\Anish\AppData\Local\Android\sdk\tools\bin (sostituisci ‘Anish’ con il nome utente che hai sulla tua macchina)

Step 2.2: Controlla che questa cartella bin contenga uiautomatorviewer

Passo 2.3: Doppio clic su uiautomatorviewer. Si aprirà la finestra UI Automator Viewer in un paio di secondi

Come abbiamo detto sopra, puoi usare uno di questi metodi per aprire UI Automator Viewer.

Connetti il tuo cellulare alla tua macchina usando USB

Prima di iniziare a ispezionare gli elementi della tua applicazione mobile, devi prima connettere il tuo dispositivo mobile alla tua macchina tramite USB. Segui i seguenti passi per farlo –

Passo 1: Collega il tuo cellulare alla tua macchina via USB

Passo 2: Per assicurarti che il telefono sia collegato correttamente, apri il prompt dei comandi ed esegui il comando adb devices.

Quando esegui questo comando, mostrerà l’ID del dispositivo del telefono cellulare. Questo significa che il cellulare è collegato correttamente alla tua macchina.

Step 3: Ora dovrai aprire l’app che vuoi controllare. Come per i precedenti articoli della nostra serie Appium Tutorial, anche in questo caso useremo l’app Google Play Store come esempio. Quindi, apri l’app Play Store sul tuo telefono

Ispetta l’app mobile usando UI Automator Viewer

Segui i passi indicati di seguito per ispezionare la tua app mobile con UI Automator Viewer –

Passo 1: Assicurati che il tuo telefono cellulare sia collegato correttamente con USB. Inoltre, assicurati che sia sbloccato e che l’app Play Store sia aperta

Step 2: Ora clicca sull’icona Device Screenshot in UI Automator Viewer (questa è la seconda icona come mostrato nell’immagine sottostante)

Nota: Avrai notato che ci sono altre icone accanto all’icona Device Screenshot che hai appena cliccato. In questo articolo, non spiegheremo la funzionalità di queste icone. Le copriremo nei nostri prossimi articoli su Appium Inspector.

Step 3: Vedrai un messaggio popup che mostra le informazioni di progresso come mostrato qui sotto

Step 4: Aspetta qualche secondo per UI Automator Viewer per elaborare tutte le informazioni sullo schermo. Una volta fatto questo, UI AUtomator Viewer caricherà lo screenshot del tuo telefono come mostrato nell’immagine sottostante

Step 5: Ora, passa il puntatore del mouse in qualsiasi punto dello screenshot del dispositivo. Vedrai che alcune informazioni vengono visualizzate nei riquadri di destra

Capiamo cosa sta succedendo qui

Facciamo ora una pausa per un momento e cerchiamo di capire cosa è successo qui. Quando clicchi sull’icona Device Screenshot, UI Automator Viewer fa le seguenti tre cose –

• Prima cattura i dettagli di tutti gli oggetti visibili sullo schermo in formato XML.
• Poi cattura lo screenshot dello schermo del cellulare in formato PNG
• Una volta catturati i dettagli di cui sopra, UI Automator Viewer mostra entrambe queste cose nell’UI

Nota importante: Tecnicamente parlando, UI Automator Viewer cattura solo lo schermo del cellulare. Quindi, qualsiasi cosa venga visualizzata sul dispositivo, UI Automator Viewer la catturerà. Che si tratti di qualsiasi app, della tua schermata iniziale o anche della schermata di blocco.

3 sezioni principali in UI Automator Viewer

Dall’immagine sottostante, puoi vedere che UI Automator Viewer ha 3 sezioni principali –

1. Riquadro di sinistra: Questo pannello mostra la schermata del dispositivo. Questa è un’immagine interattiva, dove puoi cliccare o passare il puntatore del mouse su qualsiasi elemento della schermata.

2. Riquadro superiore destro: Questo pannello mostra l’intera struttura XML dello schermo. Questa struttura XML mostra dettagli molto basilari su ogni controllo – nome del controllo, il suo testo (se disponibile) e le sue coordinate.

3. Riquadro inferiore destro: Questo è un pannello importante che mostra tutti i dettagli di un controllo. Qualsiasi elemento selezioniate dalla schermata, questo pannello mostrerà tutti i suoi dettagli come il suo testo, il nome della classe, il nome del pacchetto ecc. Questo è il pannello da cui otterrai informazioni su come identificare un elemento in modo univoco.

Fino ad ora, abbiamo parlato delle basi di UI Automator Viewer, come aprirlo e come puoi caricare lo screenshot dell’applicazione mobile in esso. Fermeremo questo articolo qui e copriremo la parte rimanente nel prossimo articolo. Ci sono più modi in cui è possibile identificare un elemento con Appium. Discuteremo tutto questo e molto di più nei nostri prossimi articoli su Appium Inspector.

Prova da solo l’attività: In una delle sezioni precedenti, abbiamo menzionato che è necessario collegare il dispositivo mobile al computer utilizzando il cavo USB. Sapevi che puoi farlo anche in modalità wireless? Dai un’occhiata a questo articolo che mostra come puoi eseguire i tuoi script di test Appium su WiFi. Usando questo articolo come riferimento, prova a collegare il tuo dispositivo mobile via WiFi e poi vedi se puoi ispezionare qualche elemento.

Sentitevi liberi di contattarci se avete problemi con una qualsiasi delle sezioni di cui sopra, o se avete qualche feedback per noi. Ci piacerebbe sentire il vostro feedback perché ci aiuta a migliorare i nostri articoli e a renderli più utili per tutti i nostri lettori.

Prossima serie di articoli su Appium Inspector

• Impara come ispezionare gli elementi usando UIAutomatorViewer
• Impara di più su UI Automator Viewer comprese alcune limitazioni dell’automazione mobile
• Impara le basi di Appium Desktop Inspector
• Ispetta gli elementi mobili usando Appium Desktop Inspector