Cómo hacer pruebas de extremo a extremo (E2E) para React Native Android usando Jest y Appium

Este tutorial es una guía paso a paso simple sobre cómo configurar Appium y Jest para React Native Android. Estaba buscando una guía paso a paso, pero tuve dificultades para encontrarla, así que decidí escribir la mía. Espero que esto pueda ayudarte.

Nota: Este tutorial solo cubre Android. Si desea ejecutar Appium en AWS Device Farm para probar su aplicación en dispositivos reales, deberá usar Appium Python. No son compatibles con Appium JS. Aquí se puede encontrar un tutorial de Appium Python centrado en AWS.

Appium es una forma de automatizar la entrada manual del usuario para las pruebas de extremo a extremo (E2E).

Jest es el marco de prueba de Javascript de Facebook. Viene con casi todo lo que necesitará para probar.

Preparar

Siga la letra que mejor se aplique a usted para configurar su proyecto React Native.

A. ¡Estoy empezando un proyecto React Native!

Siga la guía oficial de Facebook para comenzar un proyecto React Native. Asegúrese de seleccionar Proyectos de construcción con código nativo.

B. ¡Ya tengo un proyecto anterior React Native!

Instalar Jest: yarn add --dev jest

Habilite la sintaxis ES6 + para Jest (principalmente para importación, asíncrono / espera):

añadir hilo --dev babel-preset-react-native

Agregue un archivo .babelrc en la raíz de su proyecto:

{
  "presets": ["react-native"]
}

Una vez que haya hecho A o B, continúe a continuación ...

Instalar appium, appium-doctor

añadir hilo --dev appium appium-doctor

Agregue scripts relacionados con appium a package.json

Ejecute appium-doctor

hilo corrido appium-doctor

Deberá corregir los errores que arroja appium-doctor. Sin embargo, para probar Android, puede ignorar todo lo relacionado con iOS (xCode, Carthage).

Instalar webdriver

hilo agregar --dev wd

Iniciar servidor de appium

hilo corrido appium

Tome nota del puerto, lo necesitará más tarde (el puerto predeterminado es 4723).

Prueba básica

Ahora que ya estamos preparados, escribamos nuestra primera prueba. Guárdelo en: ./__tests__/appium.test.js. Nos basaremos en este archivo más adelante.

Esta prueba básica solo comprueba que existe una vista con accessibilityLabel = "testview" y que no existe una vista con accessibilityLabel = "notthere".

Algunas cosas a tener en cuenta:

  1. jazmín.DEFAULT_TIMEOUT_INTERVAL: Esto se establece porque de lo contrario se encontrará con errores con el tiempo de espera de las funciones asíncronas.
  2. La ruta de la aplicación en la configuración es relativa a la raíz de su proyecto. No es relativo al archivo de prueba.
  3. Debe dormir el corredor de prueba con driver.sleep (...) mientras espera que se cargue la aplicación.

Quizás se pregunte, "¿Por qué accessibilityLabel?". Bueno, así es como buscamos elementos cuando hacemos pruebas con Appium y React Native. Esto también es compatible con las pruebas de iOS en Appium. Supuestamente habrá soporte de testID en el futuro, pero por ahora esta es la forma recomendada.

Agreguemos accessibilityLabel = "testview" a la raíz de la vista de nuestra aplicación en ./index.android.js.

Ejecuta la prueba

  1. Iniciar emulador
  2. Inicie el servidor de desarrollo React Native: inicio react-native
  3. prueba de hilo
  4. ¡Tu prueba debería estar pasando!

Prueba de clic de botón

Agregue el siguiente código a ./__tests__/appium.test.js.

Agreguemos un botón que incremente un contador en pantalla. Su ./index.android.js debería verse así ahora:

Ejecute la prueba Debería ver la aplicación haciendo clic en el botón y el contador debería aumentar. Tus pruebas deberían pasar todas.

Prueba de entrada de texto

Agregue el siguiente código a ./__tests__/appium.test.js.

Agreguemos una entrada de texto que actualice una vista de texto en pantalla. Su ./index.android.js debería verse así ahora:

Ejecute la prueba Debería ver que la aplicación ingrese texto en la entrada. Tus pruebas deberían pasar todas.

Felicidades!

Solo un último consejo ...

Appium Desktop (modo Inspector)

Appium Desktop tiene un útil modo de inspector que:

... puede usar para ver los elementos de su aplicación, obtener información básica sobre ellos y realizar interacciones básicas con ellos. Esto es útil como una forma de aprender sobre Appium o como una forma de aprender sobre su aplicación para que pueda escribir pruebas para ella.

Puedes descargarlo desde aquí.

Preparar

  1. Inicie el emulador de Android
  2. Inicie el servidor Appium Desktop
  3. Haga clic en "Iniciar sesión de inspector"
  4. Servidor automático> Capacidades deseadas
  5. Primera fila: nombre de plataforma, texto, Android
  6. Segunda fila: nombre del dispositivo, texto, emulador de Android
  7. 3a fila: aplicación, texto, (ruta absoluta a su apk)
  8. Inicie el inspector

Código completo

El código completo de este tutorial se encuentra aquí:

Lectura adicional

  • Todos los comandos para webdriver (es un poco largo)
  • Appium config
  • Otro tutorial: https://github.com/garthenweb/react-native-e2etest