Integrando Cucumber.js com o Appium para testes E2E em Android React Native

Este tutorial é um passo a passo sobre como configurar o Appium e o Cucumber.js para escrever testes End-to-End (E2E) automatizados em Android React Native. Boa parte dos tutoriais do Cucumber utilizam a linguagem Ruby, porém manter a mesma linguagem para implementar o aplicativo e os testes auxilia na manutenção e evolução dos testes. Assim, este tutorial irá utilizar o Cucumber.js, a versão do Cucumber para Javascript, e o Appium, também utilizando a linguagem Javascript.

O que é o Cucumber?

O Cucumber é um framework amplamente utilizado para a automação de testes de aceitação utilizando o BDD (Behaviour-Driven Development). Se você quiser mais informações sobre o Cucumber, acesse esse link: https://cucumber.io/

O que é o Appium?

O Appium é um framework de automação de testes em aplicativos nativos, híbridos e mobile-web. Se você quiser conhecer mais sobre o o Appium, acesse o link: http://appium.io/

Configuração

Para este tutorial, eu comecei um aplicativo do zero seguindo as instruções do site oficial do React-Native. Se você for seguir essas instruções, certifique-se de selecionar a aba “Building Projects with Native Code”.

Siga os seguintes passos para setar a configuração:

Instale o Jest:

npm i -D jest

Habilite a sintaxe do ES6+ para o Jest:

npm i -D babel-preset-react-native

Instale o Appium:

npm i -D appium

Instale o Appium doctor para verificar qualquer problema no Appium:

npm i -D appium-doctor

Instale o Cucumber.js:

npm i -D cucumber

Instale o webdriver:

npm i -D wd

Adicione os scripts do Appium e do Cucumber no package.json

Seu package.json deve estar parecido com isso:

Verifique se a instalação do Appium está correta, executando o appium-doctor

npm run appium-doctor

Corrija os erros apresentados pelo appium-doctor e então podemos seguir a diante :)

Estrutura básica do Cucumber

Agora que temos tudo configurado, podemos começar a escrever nossos testes. Usaremos o Cucumber com uma estrutura simples:

A pasta features irá conter os arquivos que descrevem os cenários de teste utilizando a linguagem BDD. A pasta steps_definition irá conter os arquivos com a implementação dos passos utilizando o Appium em Javascript.

Crie essa estrutura de pastas no diretório raiz do seu projeto. Dentro da pasta features, crie um arquivo com o nome appium.feature. Vamos adicionar um cenário simples para verificar se um alerta aparecer na tela:

Agora, vamos executar o Cucumber para verificar se tudo está funcionando corretamente. Abra um terminal e execute o comando:

npm run cucumber

O resultado será 3‘U’s de ‘Undefined’, uma vez que criamos o cenário de teste, mas não fizemos a implementação dele.

Implementação dos testes no Appium

Vamos, finalmente, implementar os testes com o Appium. Dentro da pasta features/steps_definition, crie um arquivo com o nome appium.js. Esse arquivo irá conter as Desired Capabilities do Appium e a implementação dos passos dos cenários de testes.

A constante config é onde as Desired Capabilities estão guardadas. Adeque-a ao seu projeto. Para saber mais sobre as Desired Capabilities do Appium, veja este link: http://appium.io/docs/en/writing-running-appium/caps/

O Before inicia as Desired Capabilities antes de cada cenário de teste e garante que o aplicativo carregará antes da execução dos testes. O After encerra o driver após a execução de cada um dos cenários de testes.

O primeiro passo, no nosso cenário de teste, faz a verificação se estamos na página inicial do aplicativo. Para isso, o Appium verifica se existe algum elemento com o accessibilityLabel = “welcome-message", no aplicativo aberto.

É importante ressaltar: utilizando o Appium com o React-Native, a identificação dos elementos é feita sempre pelo acessibilityLabel. Por isso, é necessário adicionar essa label nos nossos componentes.

O segundo passo clica no botão “Pressione” na tela. Assim, o Appium procura algum elemento com o acessibilityLabel = “press-button" e clica nesse elemento por meio da função click() .

O terceiro passo verifica se o alerta foi renderizado corretamente. Para isso, o Appium verifica se existe algum texto na tela com o conteúdo “Você apertou o botão” e retorna true, se ele existir.

Adicionando o accessibilityLabel aos componentes

O arquivo de teste está pronto, porém, no nosso código, não há como o Appium identificar os elementos. Vamos então adicionar o acessibilityLabel nos elementos que precisamos identificar. Se quiser saber mais sobre o acessibilityLabel, verifique este link: https://facebook.github.io/react-native/docs/accessibility

O seu arquivo App.js, deve estar assim:

Executando os testes

Finalmente podemos verificar se o nosso teste está funcionando. Para executar os testes, você precisará de um emulador ou um device conectado e com permissões suficientes. Além disso, precisaremos de 3 terminais abertos. No primeiro terminal, você irá inicializar o servidor do react-native, com o comando:

npm start

No segundo terminal, você irá inicializar o servidor do Appium, com o comando:

npm run appium

Quando esses dois servidores estiverem iniciados corretamente, digite o seguinte comando para, finalmente, executar os testes:

npm run cucumber

Acompanhe a execução do teste no emulador ou no device. Você poderá ver o Appium abrindo o aplicativo, clicando no botão e o alerta sendo renderizado. Ao final da execução, o Cucumber apresentará sucesso no cenário e nos passos que definimos:

É isso! Espero que você tenha conseguido executar corretamente o seu primeiro cenário de teste com o Cucumber e Appium :) Se teve algum problema ou dúvida, deixe nos comentários.

Se você quiser o código completo desse tutorial, pode encontrar aqui:

KarineValenca/CucumberAppiumTutorial

Acompanhe o Elliot nas redes sociais (@eusouelliot) ou através do nosso site eusouelliot.com

Facebook
Instagram
Twitter
LinkedIn