Prueba de funciones nativas en aplicaciones Flutter con Patrol y Codemagic

"¡Es inútil! No puedo ejecutar una prueba de un extremo a otro con las pruebas de integración de Flutter", exclamó uno de nuestros clientes hace unos 9 meses. Pregunté cuál era el problema y me explicaron que estaban usando la autenticación de Google para iniciar sesión y usaron el paquete google_sign_in , pero no era posible usar las pruebas de integración de Flutter para interactuar con las pantallas de inicio de sesión. Todavía no entendía bien cuál era el problema, y luego hice clic: este complemento utiliza componentes de interfaz de usuario nativos con los que las pruebas de integración no funcionan.

Me decepcionó bastante no poder ofrecer una solución en ese momento y tuve que dejarlo así. Sin embargo, un avance rápido hasta el día de hoy y se ha presentado una nueva e increíble solución llamada "Patrulla" por código magro . Voy a contarles todo al respecto, pero antes de profundizar, recapitulemos por qué es importante ejecutar pruebas, qué herramientas tenía disponibles hasta ahora y luego hablemos sobre cómo comenzar con Patrol.

¿Por qué probar las aplicaciones Flutter de todos modos?

Una de las principales razones por las que los equipos de desarrollo utilizan servicios de integración continua (CI) como Código mágico es obtener comentarios inmediatos sobre el código que están enviando a su repositorio. Las pruebas se pueden ejecutar automáticamente como parte de su canalización para garantizar un nivel de calidad y estabilidad, ya que los errores o problemas pueden detectarse tempranamente y rectificarse de inmediato. Siempre animamos a los clientes a implementar pruebas al configurar sus flujos de trabajo, pero no es raro escuchar "No tenemos tiempo para escribir pruebas". Con suerte, usted no está en ese barco y utiliza las pruebas como parte del ciclo de desarrollo de su aplicación para ofrecer aplicaciones de gran calidad y sin errores.

¿Cuáles son las principales formas automatizadas de probar aplicaciones Flutter?

Existen cuatro métodos de prueba principales que se pueden automatizar como parte de su flujo de trabajo de CI. Las pruebas son un tema en sí mismo, por lo que seré breve, pero usar una combinación de estos métodos de prueba lo ayudará a mejorar la calidad de su aplicación y detectar problemas más temprano que tarde.

En primer lugar, existe la "prueba unitaria" , que se usa comúnmente para probar funciones y métodos de forma aislada para asegurarse de que funcionen como se espera. También se pueden escribir pruebas unitarias para asegurarse de que su lógica empresarial funcione en diferentes escenarios sin resultados inesperados.

A continuación, tenemos las "pruebas de widgets" de Flutter que le permiten probar los componentes de su interfaz de usuario y asegurarse de que se representen correctamente y funcionen como espera.

Luego está la "Prueba de integración" , que es donde se prueba si las unidades y componentes de su aplicación funcionan juntos como se espera.

Finalmente, está la "prueba de interfaz de usuario de un extremo a otro", donde se prueba la aplicación como si la estuviera utilizando un usuario real. En un flujo de trabajo de CI, esto generalmente se automatiza mediante simuladores o emuladores para probar diferentes rutas a través de su aplicación y asegurarse de que no haya ningún problema después de realizar cambios en su código.

Aquí es donde el cliente del que hablé al principio estaba atascado porque no podía ejecutar sus pruebas de interfaz de usuario de un extremo a otro porque no era posible iniciar sesión en la aplicación. En ese momento probaron una versión 'dev' que omitía la parte de inicio de sesión.

Sin embargo, ¡eso ya no es necesario ahora que "Patrulla" está disponible!

¡Entra, escenario a la izquierda, Patrulla!

Primero que nada, ¿qué es la Patrulla? Bueno, creo que los médicos lo dicen mejor:

Patrol es un marco de prueba de interfaz de usuario nuevo y de código abierto para Flutter desarrollado por LeanCode. Se basa en las herramientas de prueba existentes de Flutter para permitirle hacer cosas que antes eran imposibles. Patrol te permite acceder a funciones nativas de la plataforma en la que se ejecuta la aplicación Flutter.

La parte más importante aquí es que te permite acceder a las funciones nativas de la plataforma en la que se ejecuta tu aplicación Flutter .

Esto significa que ahora puedes hacer cosas como:

1. Interactúe con los cuadros de diálogo de Solicitud de permiso para descartar o aceptar solicitudes.
2. Interactuar con WebViews.
3. Minimiza y maximiza tu aplicación.
4. Interactúe con flujos de autenticación como la autenticación de Google o Apple.
5. Interactúa con otras funciones nativas como abrir la bandeja de Notificaciones, presionar el botón Inicio, encender o apagar la conectividad Wi-Fi o cambiar el dispositivo al modo oscuro, etc.

Vale, esto suena genial, pero ¿cuál es el truco?

Bueno, ¡no hay ninguno! Y es más, no sólo es gratis sino que también fuente abierta !

Además, Patrol también presenta 'buscadores personalizados' que le brindan una sintaxis más concisa para escribir sus pruebas. Puedes leer más sobre ellos. aquí .

Instalación y configuración de Patrol

Para comenzar con Patrol, deberá instalar la CLI, agregar la dependencia de Patrol a su pubspec.yaml y configurar algunas configuraciones en sus proyectos de iOS y Android.

LeanCode ha creado una excelente documentación. aquí que lo lleva a través del proceso para cada plataforma que puede encontrar aquí. Su guía paso a paso lo llevará a través de la configuración tanto para iOS como para Android .

Si tiene algún problema, el mejor lugar para obtener ayuda es el servidor Patrol Community Discord al que puede unirse. aquí .

Si encuentra algún error, puede plantear un problema. aquí .

Instalación y configuración de Patrol

Para comenzar con Patrol, deberá instalar la CLI, agregar la dependencia de Patrol a su pubspec.yaml y configurar algunas configuraciones en sus proyectos de iOS y Android.

LeanCode ha creado una excelente documentación. aquí que lo lleva a través del proceso para cada plataforma que puede encontrar aquí. Su guía paso a paso lo llevará a través de la configuración tanto para iOS como para Android .

Si tiene algún problema, el mejor lugar para obtener ayuda es el servidor Patrol Community Discord al que puede unirse. aquí .

Si encuentra algún error, puede plantear un problema. aquí .

Escribir pruebas de funciones nativas con Patrol

Ahora que ya está todo configurado, comencemos a probar algunas funciones nativas. Para probarlo yo mismo, configuré una aplicación Flutter simple con un botón elevado que, cuando se hace clic, abre un cuadro de diálogo de alerta nativo .

Al hacer clic en "Aceptar" o "Cancelar" simplemente se cierra el cuadro de diálogo.

Nuevamente, recomendaría usar la documentación propia de Patrol que puede encontrar aquí para agregar su primer archivo de prueba.

Entonces, para mi prueba, quería hacer clic en el botón elevado que tiene el texto "¡Haz clic en mí!". Es un widget estándar de Flutter, por lo que se puede aprovechar usando el siguiente buscador de patrullas:

 await $('Click me!').tap();

Luego debería mostrarse el cuadro de diálogo nativo, por lo que ahora podemos comenzar a interactuar con un componente de interfaz de usuario nativo. Entonces, agreguemos el buscador nativo que nos permitirá tocar el botón "Aceptar":

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK'));

¡Eso fue fácil! También quiero probar el botón "Cancelar", así que toquemos "¡Haz clic en mí!". nuevamente y luego toque el botón "Cancelar" del cuadro de diálogo nativo agregando un par de líneas más de la siguiente manera:

 await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel'));

Su archivo de prueba completo debería verse así:

 import 'package:cmpatrol/main.dart'; import 'package:patrol/patrol.dart'; void main() { patrolTest( 'Native tests', nativeAutomation: true, ($) async { await $.pumpWidgetAndSettle(const MyApp()); await $('Click me!').tap(); await $.native.tap(Selector(text: 'OK')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'Cancel')); await $('Click me!').tap(); await $.native.tap(Selector(text: 'NO')); }, ); }

Ahora debería poder ejecutar esa prueba en su emulador o en un dispositivo real usando el comando para iniciar la prueba. Mi archivo de prueba de integración se llamaba "button_test" , así que comencé las pruebas desde la Terminal de la siguiente manera:

 patrol test -t integration_test/button_test.dart

Verás si tus pruebas pasan o fallan directamente en la Terminal. Si las pruebas fallan, obtendrá un enlace al informe completo de la prueba. Alternativamente, si está ejecutando sus pruebas en Android como lo hice yo, entonces debería poder acceder al informe haciendo clic en index.html en el siguiente directorio:

 ./build/app/reports/androidTest/connected 

Puedes experimentar más con otras funciones nativas, como abrir la bandeja de notificaciones, desactivar el wifi, habilitar el modo oscuro, minimizar y maximizar la aplicación:

 // minimize app await $.native.pressHome(); await $.native.openNotifications(); await $.native.disableWifi(); await $.native.enableDarkMode(); // maximize app await $.native.openApp();

⚠️ Tenga en cuenta que no es posible cerrar completamente su aplicación y luego volver a abrirla porque hacerlo finalizaría toda la prueba y, por lo tanto, fallaría.

Consultar a la patrulla documentación para más ejemplos.

Cómo usar Patrol en tus flujos de trabajo de Codemagic

Para incorporar Patrol a sus flujos de trabajo, primero deberá instalar la CLI de Patrol en la máquina de compilación. Esto sólo toma unos segundos y una vez hecho esto, puede ejecutar su script de prueba. A continuación se muestra un ejemplo de cómo agregaría estos pasos a la sección "scripts" de su archivo de configuración codemagic.yaml . Recomendaría ejecutar el script para instalar la CLI de Patrol como uno de los primeros pasos del script y luego podrá ejecutar las pruebas de Patrol inmediatamente después o después de cualquier otra prueba que también desee ejecutar de antemano.

Antes de ejecutar las pruebas de Patrol, deberá iniciar el emulador, por lo que agregaremos un script para iniciar el emulador y esperaremos a que se inicie por completo. Tenga en cuenta que los emuladores de Android no están disponibles en máquinas que utilizan máquinas Apple Silicon M1 o M2 debido a que Apple Virtualization Framework no admite la virtualización anidada. Por lo tanto, recomendaría utilizar una instancia de Linux al probar aplicaciones de Android.

La sección de scripts de su codemagic.yaml debería verse así:

 scripts: ... - name: Install Patrol CLI script: dart pub global activate patrol_cli - name: Launch Android emulator script: | cd $ANDROID_HOME/tools emulator -avd emulator & adb wait-for-device - name: Run tests with Patrol script: patrol test -t integration_test/your_test.dart ignore_failure: true ...

Mostrando los resultados de las pruebas de Patrol en los registros de compilación de Codemagic

Los resultados de la prueba Patrol también están disponibles en formato JUnit XML , lo que significa que se pueden mostrar en los registros de compilación en la pantalla de descripción general de la compilación de Codemagic. Solo necesita agregar el pase de propiedad test_report en la ruta al archivo XML JUnit que se genera. Puede utilizar la propiedad ignore_failure con un valor booleano para controlar si desea que el resto del flujo de trabajo continúe ejecutándose o no. Si desea cargar sus resultados en un sistema de gestión de pruebas como se describe en la siguiente sección, debe configurarlo en verdadero .

A continuación se muestra un ejemplo de cómo debería verse su script:

 scripts: ... - name: Run tests with Patrol script: | patrol test -t integration_test/your_test.dart test_report: build/app/outputs/androidTest-results/connected/*.xml ignore_failure: true ...

Una prueba fallida podría verse así:

Recopilar el informe de prueba de la Patrulla como un artefacto de construcción

Una cosa adicional que quizás desee hacer es recopilar el resultado del informe de prueba como un artefacto de compilación para poder ver el informe completo en caso de que se produzca algún error. Al hacer esto, el informe estará disponible para descargar como un archivo zip en la pantalla de descripción general de la compilación en la sección "Artefactos" en el lado izquierdo. La forma más sencilla de hacer esto es copiar el directorio en el que se encuentran los archivos del informe en el directorio que Codemagic usa para exportar artefactos. Hay una variable de entorno incorporada llamada $CM_EXPORT_DIR que hace referencia a este directorio y que puede usar en su secuencia de comandos.

El script para hacer esto debería ser así:

 scripts: ... - name: Export Patrol test report script: | cp -r build/app/reports/androidTests/connected $CM_EXPORT_DIR/report ...

Conclusión

Patrol finalmente ha superado el problema de ejecutar pruebas de integración y de interfaz de usuario que involucran características nativas. Ahora es posible probar funciones nativas e interactuar con flujos de autenticación, cuadros de diálogo nativos e incluso alternar funciones nativas como wifi, celular, modo oscuro e incluso minimizar su aplicación y maximizarla. Además, es gratuito y de código abierto y proporciona una solución a un problema real que existe desde que se lanzó Flutter. Es más, es sencillo agregarlo y usarlo en sus flujos de trabajo de Codemagic. Si quieres apoyar el gran trabajo que está haciendo LeanCode, dale Me gusta a Patrol en pub.dev. aquí y dale una estrella al repositorio Patrol GitHub aquí .

Este artículo está escrito por Kevin Suhajda, jefe de ingeniería de soluciones de Código mágico . Puedes encontrar a Kevin en X , GitHub , y LinkedIn .