Quando se trata de criar aplicativos, o teste de software é fundamental. De acordo com um recente relatório do Consortium for Information and Software Quality, a má qualidade de software custou às organizações em todos os setores dos EUA mais de US $ 2,08 trilhões em 2020.
Como desenvolvedor de software, construir um aplicativo sólido e bem testado irá diferenciá-lo da multidão, melhorando a satisfação do usuário e do desenvolvedor.
Então, vamos aprender como testar aplicativos móveis React Native com Appium .
Pré-requisitos
- Você deve ter Node.js instalado
- Um conhecimento básico de desenvolvimento de aplicativos móveis com React Native será útil
O que é Appium?
Appium é uma ferramenta de teste automatizado de plataforma cruzada para aplicativos da web nativos, híbridos e móveis. Ele suporta testes de IU do iOS, Android e Windows.
Como funciona, você pergunta?
Appium tem uma arquitetura cliente-servidor. O cliente Appium envia uma solicitação ao servidor Appium (um servidor Node.js HTTP) e, por sua vez, o servidor Appium envia uma solicitação ao dispositivo onde a ação é realizada. Em seguida, o servidor retorna o resultado ao cliente para que você saiba o status do teste.
Configurando seu aplicativo React Native
Vamos configurar um aplicativo React Native básico com uma tela de login e testar alguns dos elementos da IU.
Usaremos a ferramenta de linha de comando Expo para construir e executar a amostra React Native aplicativo que criaremos.
Instalação
Execute o comando abaixo para instalar o Expo CLI em sua máquina:
npm install--global expo-cli
Em seguida, execute este comando para criar um ponto de partida para seu aplicativo React Native:
expo init my-app # my-app é o nome do seu aplicativo. Portanto, você pode alterá-lo para o nome que desejar.
Ao executar o comando acima, você verá algumas opções de modelo padrão para escolher. Por exemplo:
? Escolha um modelo: ›-Use as teclas de seta. Retorne para enviar. -----Fluxo de trabalho gerenciado----- em branco um aplicativo mínimo tão limpo quanto uma tela vazia em branco (TypeScript) igual a em branco, mas com configuração de TypeScript guias (TypeScript) várias telas e guias de exemplo usando navegação reativa e TypeScript -----Fluxo de trabalho simples----- ❯ mínimo vazio e mínimo, apenas o essencial para você começar mínimo (TypeScript) igual ao mínimo, mas com configuração TypeScript
Para este tutorial, use a tecla de seta para escolher a opção de instalação mínima. Em seguida, aguarde a conclusão da instalação. Deve levar cerca de um minuto ou mais, dependendo da intensidade da sua conexão com a Internet.
Quando terminar, execute cd my-app . Agora seu aplicativo está pronto. Abra o arquivo App.js para que possamos modificá-lo. Adicione o código abaixo para a página de login.
import React, {useState} de'react';
import {StyleSheet, Text, View, TextInput, TouchableOpacity} de'react-native';
const App=()=> { const [email, setEmail]=useState (""); const [senha, setPassword]=useState (""); Retorna ( Login setEmail (text)}/> setPassword (text)}/> Esqueceu a senha? LOGIN Inscrição );
}
estilos const=StyleSheet.create ({ container: { flex: 1, backgroundColor:'# 003f5c', alignItems:'center', justifyContent:'center', }, logo: { intensidade da fonte: Negrito", fontSize: 50, cor:"# 3CB371", marginBottom: 40 }, inputView: { largura:"80%", backgroundColor:"# 465881", borderRadius: 25, altura: 50, marginBottom: 20, justifyContent:"center", preenchimento: 20 }, Entrada de texto: { altura: 50, cor branca" }, esquecido: { cor branca", fontSize: 11 }, loginBtn: { largura:"80%", backgroundColor:"# 3CB371", borderRadius: 25, altura: 50, alignItems:"center", justifyContent:"center", marginTop: 40, marginBottom: 10 }, loginText: { cor branca" }
});
exportar aplicativo padrão;
Execute expo start e escolha o dispositivo em que deseja executar seu aplicativo. Usarei o emulador iOS 11 (você pode usar seu telefone Android ou iOS). Se você executá-lo, deverá ver esta página de login:
Agora o aplicativo está configurado, mas há algo importante a ser observado. Como o algoritmo de localização de elementos do Appium funciona com a camada de acessibilidade da IU, você precisará adicionar um rótulo de acessibilidade da IU em vez de acessar os elementos da IU por seu ID para Appium a fim de testá-los. Então, vamos adicionar essa camada aos nossos componentes existentes, assim:
setEmail (text)}/>
Ótimo! Agora vamos configurar o Appium e executar nosso teste.
Instalando Appium no React Native
Existem duas maneiras de instalar o servidor Appium. Você pode baixar e instalar Appium desktop ou instalá-lo com npm. >
Se você for instalá-lo via npm, execute npm install-g appium , que é o padrão que usaremos neste tutorial.
Depois disso, instale o driver da web WD.js que iremos use para se comunicar com o servidor Appium.
npm install wd
Para garantir que tudo esteja certo, você pode instalar appium-doctor com npm.
npm install appium-doctor-g
Em seguida, execute-o no seu terminal:
appium-doctor-h
A seguir, crie um arquivo de teste e adicione o seguinte código a ele:
importar wd de'wd'; jasmim.DEFAULT_TIMEOUT_INTERVAL=600000;
const PORT=4723; const config={ nome da plataforma:"iOS", platformVersion:"14,4", nome do dispositivo:"iPhone 11", app:"path/to/your.apk or yourapp.ipa", AutomationName:"XCUITest",//UiAutomator2, Espresso ou UiAutomator1 para Android
}; const driver=wd.promiseChainRemote ('localhost', PORT); beforeAll (async ()=> { aguarde driver.init (config);
}) test ('Test Accessibilty Id', async ()=> { expect (await driver.hasElementByAccessibilityId ('email')). toBe (true); expect (await driver.hasElementByAccessibilityId ('password')). toBe (true);
});
A parte de configuração é importante, então certifique-se de inserir as opções corretas para o seu dispositivo (configuração do dispositivo iOS).
const config={ nome da plataforma:"iOS", platformVersion:"14,4", nome do dispositivo:"iPhone 11", app:"path/to/your.apk or yourapp.ipa", AutomationName:"XCUITest",//UiAutomator2, Espresso ou UiAutomator1 para Android
};
Uma configuração para um dispositivo Android deve ser semelhante a esta, por exemplo:
const config={ nome da plataforma:"Android", platformVersion:"8", deviceName:"Android Emulator", app:"/path/to/the/downloaded/app.apk", AutomationName:"UiAutomator2"
}
E aqui, temos a configuração do driver.
const driver=wd.promiseChainRemote ('localhost', PORT);
Agora precisamos configurar o driver da web e definir o servidor remoto e a porta. Em nosso caso, o Appium está sendo executado em nossa máquina local, então o definimos como localhost e usamos a porta padrão 4723 .
Agora começa o teste. Aqui, estamos apenas confirmando que o rótulo de acessibilidade está definido para os campos de e-mail e senha. É assim que deve ser.
test ('Test Accessibilty Id', async ()=> { expect (await driver.hasElementByAccessibilityId ('email')). toBe (true); expect (await driver.hasElementByAccessibilityId ('password')). toBe (true);
});
Executando o teste no Appium
Para executar o teste, primeiro iniciamos o servidor Appium executando Appium na linha de comando, assim:
ezesundayeze @ Ezes-MacBook-Pro appium-app $ appium [Appium] Bem-vindo ao Appium v1.20.2 [Appium] Ouvinte da interface http REST Appium iniciado em 0.0.0.0:4723
A seguir, abra outro terminal e execute npm test login . Seu resultado deve ser assim:
Test Suites: 1 aprovado, 1 total Testes: 1 aprovado, 1 total Instantâneos: 1 total Tempo: 5,775 s, estimado 7 s Executei todos os conjuntos de testes correspondentes/login/i.
O Appium examinará a IU do aplicativo e testará se os rótulos de acessibilidade estão sendo definidos para e-mail e senha. Se tudo estiver bem, ele retorna uma aprovação, caso contrário, seu teste falha.
É isso! Você terminou.
Existem outras opções que você pode usar além do Appium, como Selenium ou Selendroid , por exemplo. No entanto, Appium é a ferramenta de teste de automação móvel mais popular porque o teste de Appium pode ser escrito para iOS e Android usando a mesma API , e é de código aberto.
Conclusão
Testar seu aplicativo React Native para dispositivos móveis pode ser demorado, mas é um investimento crítico para você mesmo e para a equipe que gerencia o aplicativo, pois evita bugs, melhora a confiança e a fidelidade do cliente e permite que você durma bem à noite.
Esperançosamente, você aprendeu a importância de testar seu aplicativo e como começar a testar seu aplicativo móvel usando o Appium.
Como sempre, verifique os documentos do Appium para se aprofundar no teste de seu aplicativo React Native. Boa programação!
A postagem Testando seu aplicativo React Native com Appium apareceu primeiro no LogRocket Blog .
