Inspecionando Elementos no app iOS com MacacaJs

Muitas pessoas que trabalham com QA especificamente no mundo mobile encontram um certo problema na hora de inspecionar alguns elementos, devido a descontinuação de ferramentas como foi o caso do UIAutomation que era o framework principal no Appium para inspeção de elementos.

Com isso, novas soluções tendem a aparecer e principalmente quando são open source que é o caso do macacajs. O macaca é uma solução para inspecionar elementos de tela em aplicativos híbridos, nativos e web.

E agora por onde devo começar? Lembrando que aqui vamos falar apenas de app iOS, blz?

Primeiramente para rodar o macaca você deve ter instalado o node.js e o npm. Se você tiver o brew instalado na sua máquina, tudo irá ficar mais fácil e passar os seguintes comandos na linha de comando :

brew install node

logo após vamos checar se foi instalado?

npm? O npm (node package manager) é o gerenciador de dependências de Node, assim como o pip de python e gradle de Java.

Então, até aqui tranquilo?

Lembrete: é importante ter o XCode instalado, caso não tenha, pode ser encontrado Aqui

E precisaremos também do ios_webkit_debug_proxy;

brew install ios-webkit-debug-proxy

Agora vamos instalar o macaca cli.

npm i -g macaca-cli macaca-ios

Sucesso até aqui? Calma estamos quase lá.

Agora é a vez de instalar o inspector;

npm i app-inspector -g

E pra finalizar vamos verificar se tá tudo ok?

macaca doctor

Tudo verdinho? Ufa!! até que enfim, vamos rodar?

simples, rápido e fácil…

app-inspector -u xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

…Mas e esses xxx todo o que significa?

Significa que é ai onde vai passar o ID do teu simulador iOS, e como pegar? vamos lá.

xcrun simctl list

Esse comando lista todos os simuladores disponíveis. Para achar um simulador específico e que já esteja inicializado só acrescentar o parâmetro grep 'Booted'.

xcrun simctl list | grep 'Booted'

Agora é só escolher um e executar:

e.g.

Depois que executou o comando acima, vai abrir o navegador com a tela do simulador iOS.

Basicamente funciona como o uiautomatorviewer, só seleciona o ícone e as informações irão aparecer no lado direto. Também é possível navegar pela árvore na coluna do meio.

Alguns pontos a ressaltar:

• Podemos usar também o ARC (Appium Ruby Console) como uma segunda alternativa para inspeção de elementos.
• Uma dica como boa prática, é sempre legal bater um papo com os Devs do time para colocarem id e/ou names nos elementos, assim evitamos usar os temidos xpaths gerados pelo Macaca, assim ficando mais performático.

Espero ter ajudado, qualquer dúvida ou sugestão deixem no comentário que vou fazer o máximo para responder tudo o mais rápido possível :).