"¡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 , 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 con los que las pruebas de integración no funcionan. google_sign_in componentes de interfaz de usuario nativos 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 por . 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. "Patrulla" código magro ¿Por qué probar las aplicaciones Flutter de todos modos? Una de las principales razones por las que los equipos de desarrollo utilizan servicios (CI) como 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. de integración continua Código mágico ¿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 , 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. la "prueba unitaria" A continuación, tenemos de Flutter que le permiten probar los componentes de su interfaz de usuario y asegurarse de que se representen correctamente y funcionen como espera. las "pruebas de widgets" Luego está , que es donde se prueba si las unidades y componentes de su aplicación funcionan juntos como se espera. la "Prueba de integración" Finalmente, está 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. la "prueba de interfaz de usuario de un extremo a otro", 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 está disponible! "Patrulla" ¡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 de la plataforma en la que se ejecuta tu aplicación . funciones nativas Flutter Esto significa que ahora puedes hacer cosas como: Interactúe con los cuadros de diálogo de Solicitud de permiso para descartar o aceptar solicitudes. Interactuar con WebViews. Minimiza y maximiza tu aplicación. Interactúe con flujos de autenticación como la autenticación de Google o Apple. 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 sino que también ! gratis fuente abierta Además, Patrol también presenta que le brindan una sintaxis más concisa para escribir sus pruebas. Puedes leer más sobre ellos. . 'buscadores personalizados' aquí Instalación y configuración de Patrol Para comenzar con Patrol, deberá instalar la CLI, agregar la a su y configurar algunas configuraciones en sus proyectos de iOS y Android. dependencia de Patrol pubspec.yaml ha creado una excelente documentación. 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 como . LeanCode aquí iOS para Android Si tiene algún problema, el mejor lugar para obtener ayuda es el servidor al que puede unirse. . Patrol Community Discord 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 a su y configurar algunas configuraciones en sus proyectos de iOS y Android. dependencia de Patrol pubspec.yaml ha creado una excelente documentación. 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 como . LeanCode aquí iOS para Android Si tiene algún problema, el mejor lugar para obtener ayuda es el servidor al que puede unirse. . Patrol Community Discord 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 para agregar su primer archivo de prueba. aquí 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 , así que comencé las pruebas desde la Terminal de la siguiente manera: "button_test" 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 en el siguiente directorio: index.html ./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 para más ejemplos. documentación Cómo usar Patrol en tus flujos de trabajo de Codemagic Para incorporar Patrol a sus flujos de trabajo, primero deberá instalar la 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 . 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. CLI de Patrol codemagic.yaml 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 al probar aplicaciones de Android. de Linux La sección de scripts de su debería verse así: codemagic.yaml 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 , 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 en la ruta al archivo XML JUnit que se genera. Puede utilizar la propiedad 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 . JUnit XML test_report ignore_failure 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 que hace referencia a este directorio y que puede usar en su secuencia de comandos. $CM_EXPORT_DIR 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 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 y 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. y dale una estrella al repositorio Patrol GitHub . Patrol gratuito de código abierto aquí aquí Este artículo está escrito por Kevin Suhajda, jefe de ingeniería de soluciones de . Puedes encontrar a Kevin en , , y . Código mágico X GitHub LinkedIn También publicado . aquí

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Este audio es producido en el idioma original de la historia!

Prueba de funciones nativas en aplicaciones Flutter con Patrol y Codemagic

Demasiado Largo; Para Leer

@codemagic

Credibility

HISTORIAS RELACIONADAS