Appium Inspector Tutorial – Parte 1

Appium Inspector é o próximo conjunto de artigos da nossa série Appium Tutorial. Esta é uma série de 4-5 artigos que o ajudariam a aprender o processo de identificação de elementos no seu aplicativo móvel. Vamos começar entendendo o que é realmente o processo de inspeção Appium.

O que é o processo de inspeção Appium?

Em palavras muito simples, a inspeção Appium é o processo através do qual você pode identificar ou encontrar elementos no seu aplicativo móvel. Se você quiser automatizar qualquer cenário no seu aplicativo móvel, então você precisará seguir estas 2 etapas –

• Etapa 1: Identifique o elemento de forma única
• Etapa 2: Execute uma ação sobre o elemento identificado

O processo de inspeção Appium ajuda você a resolver a primeira etapa mencionada acima. Por exemplo, vamos supor que você tenha uma aplicação com uma tela de login. Agora sua tarefa é entrar com nome de usuário e senha nesta tela. Aqui, o processo de inspeção Appium ajudaria a “inspecionar” a tela e, em seguida, permitiria identificar de forma única os campos de texto. Desta forma, você poderá escrever o código que digita login id e senha nos campos corretos.

Deixe-nos agora uma olhada nas ferramentas que você pode usar para inspecionar esses elementos.

Diferentes Inspetores Appium que ajudam a identificar elementos em aplicativos móveis

Existem muitas ferramentas diferentes que ajudam a inspecionar elementos em aplicativos móveis. Mas para a nossa série Appium Tutorial, vamos cobrir as ferramentas mais populares e amplamente utilizadas (e suportadas pelo Android ou Appium). Essas ferramentas são –

• UIAutomatorViewer: Esta é uma ferramenta fornecida pelo Android Studio que lhe permite inspecionar elementos no seu aplicativo móvel
• Appium Desktop Inspector: A última versão do Appium GUI (Appium Desktop) vem com um inspetor. Você pode usar esse inspetor para ambos aplicativos Android e iOS (para aplicativos iOS, você precisaria de um Mac)

Neste artigo, vamos começar com o básico do UIAutomatorViewer. Os próximos artigos desta série cobrirão em detalhes, as diferentes maneiras de usar as aplicações móveis usando tanto o UIAutomatorViewer quanto o Appium Desktop Inspector.

Como abrir o UIAutomatorViewer

UIAutomatorViewer vem com o pacote de instalação do Android Studio. Assim, quando você instalar o Android Studio, o UIAutomatorViewer será automaticamente instalado com ele. Existem duas formas de abrir o UIAutomatorViewer. Você pode seguir qualquer um desses métodos para abri-lo –

Importante Nota: Por favor, certifique-se de ter seguido nosso guia Tutorial Appium e ter instalado a última versão do Android Studio e configurar corretamente as variáveis de ambiente Android.

Método 1: Abra o UIAutomatorViewer a partir do prompt de comando Esta é a maneira mais fácil de abrir o UIAutomatorViewer. Basta seguir os passos dados abaixo para abri-lo –

Passo 1.1: Abra o prompt de comando

Passo 1.2: Digite uiautomatorviewer e então pressione Enter

Espere por alguns segundos. A janela UIAutomatorViewer abriria como mostrado abaixo

Método 2: Abra o UIAutomatorViewer a partir de sua localização de pasta O UIAutomatorViewer é instalado em sua máquina como um arquivo .bat. Usando este método, você navegará até o local de pasta onde ele está instalado e então o abrirá. Siga os passos dados abaixo para usar esta abordagem –

Passo 2.1: Abra o local da pasta onde o UIAutomatorViewer está instalado. Geralmente, esta localização é – C:\Users\Anish\AppData\Local\Android\sdk\tools\bin (Substitua ‘Anish’ pelo nome de usuário que você tem na sua máquina)

Passo 2.2: Verifique se esta pasta contém o uiautomatorviewer

Passo 2.3: Clique duas vezes no uiautomatorviewer. Ele abrirá a janela UI Automator Viewer em alguns segundos

Como mencionamos acima, você pode usar qualquer um desses métodos para abrir o UI Automator Viewer.

Conecte seu celular ao seu aparelho usando USB

Antes de começar a inspecionar elementos do seu aplicativo móvel, você precisa primeiro conectar seu dispositivo móvel ao seu aparelho via USB. Siga os passos abaixo para fazer isso –

Passo 1: Conecte seu celular ao seu aparelho via USB

Passo 2: Para ter certeza de que o celular está conectado corretamente, abra o prompt de comando e execute o comando adb devices.

Quando você executar este comando, ele mostrará a ID do dispositivo do telefone celular. Isto significa que o telemóvel está ligado correctamente à sua máquina.

Passo 3: Agora terá de abrir a aplicação que pretende inspeccionar. Como nos artigos anteriores da nossa série Appium Tutorial, também neste caso vamos usar o aplicativo da Google Play Store como exemplo. Então, abra o aplicativo Play Store no seu celular

Inspeccione o aplicativo móvel usando o UI Automator Viewer

Seguir os passos dados abaixo para inspecionar seu aplicativo móvel com o UI Automator Viewer –

Passo 1: Certifique-se de que o seu celular esteja conectado corretamente com USB. Além disso, certifique-se de que ele está desbloqueado e Play Store app está aberto

Passo 2: Agora clique no ícone Device Screenshot no UI Automator Viewer (este é o segundo ícone como mostrado na imagem abaixo)

Note: Você teria notado que existem outros ícones ao lado do ícone Device Screenshot que você acabou de clicar. Neste artigo, nós não vamos explicar a funcionalidade destes ícones. Iremos cobri-los em nossos próximos artigos no Appium Inspector.

Passo 3: Você verá uma mensagem popup que mostra as informações de progresso como mostrado abaixo

Passo 4: Espere alguns segundos para que o Visualizador do Automator UI processe todas as informações em sua tela. Uma vez feito isso, o UI AUtomator Viewer carregará a captura de tela do seu telefone como mostrado na imagem abaixo

Passo 5: Agora, passe o ponteiro do seu mouse sobre qualquer parte da captura de tela do dispositivo. Você verá que algumas informações serão exibidas nos painéis do lado direito

Vamos entender o que está acontecendo aqui

Deixe-nos agora fazer uma pausa por um momento e tentar entender o que aconteceu aqui. Quando você clica no ícone do Dispositivo Screenshot, então o UI Automator Viewer faz as três coisas a seguir –

• Primeiro captura os detalhes de todos os objetos visíveis na tela em formato XML.
• Então ele captura a captura de tela da tela do celular no formato PNG
• Após os detalhes acima serem capturados, o UI Automator Viewer mostra essas duas coisas no UI

Importante Nota: Tecnicamente falando, o UI Automator Viewer apenas captura a tela do seu celular. Portanto, o que quer que seja exibido no dispositivo, o Visualizador do Automador de IU capturaria isso. Seja qualquer aplicativo, ou sua tela inicial ou até mesmo tela de bloqueio.

3 seções principais do Visualizador do Automador de IU

Da imagem abaixo, você pode ver que o Visualizador do Automador de IU tem 3 seções principais –

1. Painel do lado esquerdo: Este painel mostra a captura de tela do dispositivo. Esta é uma imagem interativa, onde você pode clicar ou passar o ponteiro do mouse sobre qualquer elemento da captura de tela.

2. Painel superior do lado direito: Este painel mostra toda a estrutura XML do ecrã. Esta estrutura XML mostra detalhes muito básicos sobre cada controle – nome do controle, seu texto (se disponível) e suas coordenadas.

3. Painel Lateral Direito do Fundo: Este é um painel importante que mostra todos os detalhes de um controle. Qualquer que seja o elemento selecionado na captura de tela, este painel mostrará todos os seus detalhes, como seu texto, nome da classe, nome do pacote, etc. Este é o painel de onde você irá obter informações sobre como identificar um elemento de forma única.

Até agora, falamos sobre o básico do UI Automator Viewer, como abri-lo e como você pode carregar a captura de tela de um aplicativo móvel nele. Nós vamos parar este artigo aqui e cobrir a parte restante no próximo artigo. Existem várias maneiras de identificar um elemento com o Appium. Iremos discutir tudo isso e muito mais em nossos próximos artigos no Appium Inspector.

Try it Yourself Activity: Em uma das seções acima, nós mencionamos que você precisa conectar seu dispositivo móvel ao seu computador usando cabo USB. Você sabia que você pode fazer isso no modo sem fio também? Confira este artigo que mostra como você pode executar seus scripts de teste Appium sobre WiFi. Usando este artigo como referência, tente ligar o seu dispositivo móvel via WiFi e depois veja se consegue inspeccionar qualquer elemento.

Feel free to contact us if you have face any issues with any of the sections above, or if you have any feedback for us. Adoraríamos ouvir o seu feedback, pois ele nos ajuda a melhorar os nossos artigos e a torná-los mais úteis para todos os nossos leitores.

Próximo conjunto de artigos no Appium Inspector

• Saiba como inspecionar elementos usando o UIAutomatorViewer
• Saiba mais sobre o UI Automator Viewer incluindo algumas limitações de automação móvel
• Saiba mais sobre o básico do Appium Desktop Inspector
• Inspeccione elementos móveis usando o Appium Desktop Inspector