Saltar al contenido principal

Verificar la funcionalidad de la app con una prueba de integración

Aprende cómo escribir pruebas de integración

Introducción

#

Esta guía describe cómo ejecutar pruebas de integración con tu aplicación de Flutter. Con ella, aprenderás a hacer lo siguiente:

  • Configurar pruebas de integración.
  • Verificar si una aplicación muestra texto específico.
  • Tocar Widgets específicos.
  • Ejecutar pruebas de integración.

La guía hace referencia al proyecto counter_app que viene con Flutter y al paquete integration_test de Flutter. El paquete integration_test te permite:

  • Usar el comando flutter drive para ejecutar pruebas en un dispositivo físico o emulador.
  • Ejecutar en Firebase Test Lab para automatizar las pruebas en una variedad de dispositivos.
  • Usar las APIs de flutter_test para escribir pruebas en un estilo similar al de las pruebas de Widgets.

Crear una nueva aplicación para probar

#

Las pruebas de integración requieren una aplicación para probar. Este ejemplo utiliza el ejemplo integrado de la Counter App que genera Flutter cuando ejecutas el comando flutter create. La aplicación del contador permite al usuario tocar un botón para incrementar un contador.

  1. Para crear una instancia de la aplicación integrada de Flutter, ejecuta el siguiente comando en tu terminal:

    flutter create counter_app
    
  2. Cámbiate al directorio counter_app.

  3. Abre lib/main.dart en tu IDE preferido.

  4. Agrega un parámetro key al Widget floatingActionButton() con una instancia de una clase Key con un valor de string de increment.

    dart
     floatingActionButton: FloatingActionButton(
       key: const ValueKey('increment'),
       onPressed: _incrementCounter,
       tooltip: 'Increment',
       child: const Icon(Icons.add),
     ),
    
  5. Guarda tu archivo lib/main.dart.

Después de estos cambios, el archivo lib/main.dart debería ser similar al siguiente código.

lib/main.dart
dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Counter App',
      home: MyHomePage(title: 'Counter App Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Provide a Key to this button. This allows finding this
        // specific button inside the test suite, and tapping it.
        key: const Key('increment'),
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Agregar la dependencia integration_test

#

Necesitas agregar los paquetes de pruebas a tu nueva aplicación.

Para agregar los paquetes integration_test y flutter_test como dev_dependencies usando sdk: flutter, ejecuta el siguiente comando.

flutter pub add "dev:integration_test:{sdk: flutter}"

Salida:

Building flutter tool...
Resolving dependencies...
Got dependencies.
Resolving dependencies...
+ file 7.0.0
+ flutter_driver 0.0.0 from sdk flutter
+ fuchsia_remote_debug_protocol 0.0.0 from sdk flutter
+ integration_test 0.0.0 from sdk flutter
...
  test_api 0.6.1 (0.7.1 available)
  vm_service 13.0.0 (14.2.1 available)
+ webdriver 3.0.3
Changed 8 dependencies!
7 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Archivo pubspec.yaml actualizado:

pubspec.yaml
yaml
# ...
dev_dependencies:
  # ... added dependencies
  flutter_test:
    sdk: flutter
  flutter_lints: ^6.0.0
  integration_test:
    sdk: flutter
# ...

Crear los archivos de pruebas de integración

#

Las pruebas de integración residen en un directorio separado dentro de tu proyecto de Flutter.

  1. Crea un nuevo directorio llamado integration_test.
  2. Agrega un archivo vacío llamado app_test.dart en ese directorio.

El árbol de directorios resultante debería ser similar al siguiente:

counter_app/
  lib/
    main.dart
  integration_test/
    app_test.dart

Escribir la prueba de integración

#

El archivo de prueba de integración consta de un archivo de código Dart con dependencias de integration_test, flutter_test, y el archivo Dart de tu aplicación.

  1. Abre tu archivo integration_test/app_test.dart en tu IDE preferido.

  2. Copia el siguiente código y pégalo en tu archivo integration_test/app_test.dart. La última importación debería apuntar al archivo main.dart de tu counter_app. (Este import apunta a la aplicación de ejemplo llamada introduction.)

    integration_test/counter_test.dart
    dart
    import 'package:flutter/material.dart';
    import 'package:flutter_test/flutter_test.dart';
    import 'package:how_to/main.dart';
    import 'package:integration_test/integration_test.dart';
    
    void main() {
      IntegrationTestWidgetsFlutterBinding.ensureInitialized();
    
      group('end-to-end test', () {
        testWidgets('tap on the floating action button, verify counter', (
          tester,
        ) async {
          // Load app widget.
          await tester.pumpWidget(const MyApp());
    
          // Verify the counter starts at 0.
          expect(find.text('0'), findsOneWidget);
    
          // Finds the floating action button to tap on.
          final fab = find.byKey(const ValueKey('increment'));
    
          // Emulate a tap on the floating action button.
          await tester.tap(fab);
    
          // Trigger a frame.
          await tester.pumpAndSettle();
    
          // Verify the counter increments by 1.
          expect(find.text('1'), findsOneWidget);
        });
      });
    }
    

Este ejemplo pasa por tres pasos:

  1. Inicializa IntegrationTestWidgetsFlutterBinding. Este servicio singleton ejecuta pruebas en un dispositivo físico.

  2. Interactúa y prueba Widgets usando la clase WidgetTester.

  3. Probar los escenarios importantes.

Ejecutar pruebas de integración

#

Las pruebas de integración que se ejecutan varían según la plataforma en la que realices las pruebas.

  • Para probar una plataforma de escritorio, usa la línea de comandos o un sistema de CI.
  • Para probar una plataforma móvil, usa la línea de comandos o Firebase Test Lab.
  • Para probar en un navegador web, usa la línea de comandos.

Probar en una plataforma de escritorio

#
Despliega si pruebas aplicaciones de Linux usando un sistema de CI

Para probar una aplicación de Linux, tu sistema de CI debe invocar primero un servidor X. En el archivo de configuración de GitHub Action, GitLab Runner o similar, configura la prueba de integración para que funcione con la herramienta xvfb-run.

Hacer esto invoca un sistema X Window en el cual Flutter puede iniciar y probar tu aplicación de Linux.

Como ejemplo usando GitHub Actions, tus jobs.setup.steps deberían incluir un paso similar al siguiente:

yaml
      - name: Run Integration Tests
        uses: username/xvfb-action@v1.1.2
        with:
          run: flutter test integration_test -d linux -r github

Esto inicia la prueba de integración dentro de una ventana X Window.

Si no configuras tu integración de esta manera, Flutter devolverá un error.

Building Linux application...
Error waiting for a debug connection: The log reader stopped unexpectedly, or never started.

Para probar en una plataforma macOS, Windows o Linux, completa las siguientes tareas.

  1. Ejecuta el siguiente comando desde la raíz del proyecto.

    flutter test integration_test/app_test.dart
    
  2. Si se te ofrece la opción de elegir una plataforma para probar, elige la plataforma de escritorio. Escribe 1 para elegir la plataforma de escritorio.

Según la plataforma, el resultado del comando debería parecerse a la siguiente salida.

PS C:\path\to\counter_app> flutter test .\integration_test\app_test.dart
Resolving dependencies...
Downloading packages...
  flutter_lints 3.0.2 (4.0.0 available)
  leak_tracker 10.0.4 (10.0.5 available)
  leak_tracker_flutter_testing 3.0.3 (3.0.5 available)
  lints 3.0.0 (4.0.0 available)
  material_color_utilities 0.8.0 (0.11.1 available)
  meta 1.12.0 (1.15.0 available)
  test_api 0.7.0 (0.7.1 available)
  vm_service 14.2.1 (14.2.2 available)
Got dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Connected devices:

Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3593]
Chrome (web)      • chrome  • web-javascript • Google Chrome 124.0.6367.207
Edge (web)        • edge    • web-javascript • Microsoft Edge 124.0.2478.97

[1]: Windows (windows)
[2]: Chrome (chrome)
[3]: Edge (edge)

Please choose one (or "q" to quit): 1

00:00 +0: loading C:/path/to/counter_app/integration_test/app_test.dart               B
00:29 +0: loading C:/path/to/counter_app/counter_app/integration_test/app_test.dart   29.1s
√ Built build\windows\x64\runner\Debug\counter_app.exe
00:31 +1: All tests passed!
flutter test integration_test
Resolving dependencies...
Downloading packages...
  flutter_lints 3.0.2 (4.0.0 available)
> leak_tracker 10.0.4 (was 10.0.0) (10.0.5 available)
> leak_tracker_flutter_testing 3.0.3 (was 2.0.1) (3.0.5 available)
> leak_tracker_testing 3.0.1 (was 2.0.1)
  lints 3.0.0 (4.0.0 available)
  material_color_utilities 0.8.0 (0.11.1 available)
> meta 1.12.0 (was 1.11.0) (1.15.0 available)
> test_api 0.7.0 (was 0.6.1) (0.7.1 available)
> vm_service 14.2.1 (was 13.0.0) (14.2.2 available)
Changed 6 dependencies!
8 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

Connected devices:

macOS (desktop)                 • macos                 • darwin-arm64   • macOS 14.4.1 23E224 darwin-arm64
Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin         • macOS 14.4.1 23E224 darwin-arm64
Chrome (web)                    • chrome                • web-javascript • Google Chrome 124.0.6367.208

No wireless devices were found.

[1]: macOS (macos)
[2]: Mac Designed for iPad (mac-designed-for-ipad)
[3]: Chrome (chrome)
Please choose one (or "q" to quit): 1

00:01 +0: loading /path/to/counter_app/integration_test/app_test.dart        R
00:02 +0: loading /path/to/counter_app/integration_test/app_test.dart    846ms
00:03 +0: loading /path/to/counter_app/integration_test/app_test.dart        B

Building macOS application...
✓ Built build/macos/Build/Products/Debug/counter_app.app
00:32 +1: All tests passed!
flutter test integration_test/app_test.dart

Connected devices:

Linux (desktop) • linux  • linux-x64      • Ubuntu 22.04.4 LTS 6.5.0-35-generic
Chrome (web)    • chrome • web-javascript • Google Chrome 104.0.5112.101

[1]: Linux (linux)
[2]: Chrome (chrome)

Please choose one (or "q" to quit): 1

00:00 +0: /path/to/counter_app/integration_test/app_test.dart     B
00:16 +0: /path/to/counter_app/integration_test/app_test.dart

✓ Built build/linux/x64/debug/bundle/counter_app

Probar en un dispositivo Android

#

Para probar en un dispositivo Android real, completa las siguientes tareas.

  1. Conecta el dispositivo Android.

  2. Ejecuta el siguiente comando desde la raíz del proyecto.

    flutter test integration_test/app_test.dart
    

    El resultado debería parecerse a la siguiente salida.

    flutter test integration_test/app_test.dart
    00:04 +0: loading /path/to/counter_app/integration_test/app_test.dart
    00:15 +0: loading /path/to/counter_app/integration_test/app_test.dart
    00:18 +0: loading /path/to/counter_app/integration_test/app_test.dart   2,387ms
    Installing build/app/outputs/flutter-apk/app.apk...  612ms
    00:21 +1: All tests passed!
    
  3. Verifica que la prueba haya eliminado la Counter App cuando terminó. De lo contrario, las pruebas posteriores fallarán. Si es necesario, presiona sobre la aplicación y elige Eliminar aplicación en el menú contextual.


Probar en un dispositivo iOS

#

Para probar en un dispositivo iOS real, completa las siguientes tareas.

  1. Conecta el dispositivo iOS.

  2. Ejecuta el siguiente comando desde la raíz del proyecto.

    flutter test integration_test/app_test.dart
    

    El resultado debería parecerse a la siguiente salida.

    flutter test integration_test/app_test.dart
    00:04 +0: loading /path/to/counter_app/integration_test/app_test.dart
    00:15 +0: loading /path/to/counter_app/integration_test/app_test.dart
    00:18 +0: loading /path/to/counter_app/integration_test/app_test.dart   2,387ms
    Xcode build done.                                           13.5s
    00:21 +1: All tests passed!
    
  3. Verifica que la prueba haya eliminado la Counter App cuando terminó. De lo contrario, las pruebas posteriores fallarán. Si es necesario, presiona sobre la aplicación y elige Eliminar aplicación en el menú contextual.


Probar en un navegador web

#

Para probar en un navegador web, realiza los siguientes pasos.

  1. Instala ChromeDriver en el directorio de tu elección.

    npx @puppeteer/browsers install chromedriver@stable
    

    Para simplificar la instalación, este comando utiliza la biblioteca de Node @puppeteer/browsers.

  2. Agrega la ruta a ChromeDriver a tu variable de entorno $PATH.

  3. Verifica que la instalación de ChromeDriver se haya realizado correctamente.

    chromedriver --version
    ChromeDriver 124.0.6367.60 (8771130bd84f76d855ae42fbe02752b03e352f17-refs/branch-heads/6367@{#798})
    
  4. En el directorio de tu proyecto counter_app, crea un nuevo directorio llamado test_driver.

    mkdir test_driver
    
  5. En este directorio, crea un nuevo archivo llamado integration_test.dart.

  6. Copia el siguiente código y pégalo en tu archivo integration_test.dart.

    test_driver/integration_test.dart
    dart
    import 'package:integration_test/integration_test_driver.dart';
    
    Future<void> main() => integrationDriver();
    
  7. Inicia chromedriver de la siguiente manera:

    chromedriver --port=4444
    
  8. Desde la raíz del proyecto, ejecuta el siguiente comando:

    flutter drive \
      --driver=test_driver/integration_test.dart \
      --target=integration_test/app_test.dart \
      -d chrome
    

    La respuesta debería parecerse a la siguiente salida:

    Resolving dependencies...
      leak_tracker 10.0.0 (10.0.5 available)
      leak_tracker_flutter_testing 2.0.1 (3.0.5 available)
      leak_tracker_testing 2.0.1 (3.0.1 available)
      material_color_utilities 0.8.0 (0.11.1 available)
      meta 1.11.0 (1.14.0 available)
      test_api 0.6.1 (0.7.1 available)
      vm_service 13.0.0 (14.2.1 available)
    Got dependencies!
    7 packages have newer versions incompatible with dependency constraints.
    Try `flutter pub outdated` for more information.
    Launching integration_test/app_test.dart on Chrome in debug mode...
    Waiting for connection from debug service on Chrome...             10.9s
    This app is linked to the debug service: ws://127.0.0.1:51523/3lofIjIdmbs=/ws
    Debug service listening on ws://127.0.0.1:51523/3lofIjIdmbs=/ws
    00:00 +0: end-to-end test tap on the floating action button, verify counter
    00:01 +1: (tearDownAll)
    00:01 +2: All tests passed!
    All tests passed.
    Application finished.
    

    Para ejecutar esto como una prueba headless, ejecuta flutter drive con la opción -d web-server:

    flutter drive \
      --driver=test_driver/integration_test.dart \
      --target=integration_test/app_test.dart \
      -d web-server
    

Para obtener más información, consulta la página de la wiki Running Flutter driver tests with web.


Probar en Firebase Test Lab (Android)

#

Puedes usar Firebase Test Lab para probar objetivos de Android.

Configuración de Android

#

Sigue las instrucciones en la sección Android Device Testing del README.

Configuración del proyecto en Test Lab

#
  1. Abre tu Firebase Console.

  2. Crea un nuevo proyecto de Firebase si es necesario.

  3. Navega a Quality > Test Lab.

    Consola de Firebase Test Lab

Subir un APK de Android

#

Completa los siguientes pasos para subir un APK de Android.

  1. Crear un APK usando Gradle.

    // Go to the Android directory which contains the gradlew script
    pushd android
    
    // Build a debug APK for Flutter with gradlew
    // Note that a standard --release build will not include package:integration_test
    flutter build apk --debug
    
    // Build an Android test APK
    ./gradlew app:assembleAndroidTest
    
    // Build a debug APK by passing in an integration test
    ./gradlew app:assembleDebug -Ptarget=integration_test/<name>_test.dart
    
    • <name>_test.dart: El archivo creado en la sección Project Setup.
  2. Si es necesario, pasa parámetros a la prueba de integración como una lista separada por comas. Codifica todos los parámetros en base64.

    ./gradlew project:task -Pdart-defines="{base64 (key=value)}[, ...]"
    
    • (key=value)}[, ...]: Reemplaza esto con una lista separada por comas de pares clave-valor.
  3. Vuelve a tu directorio anterior.

    popd
    

Para obtener instrucciones adicionales, consulta la sección de Firebase Test Lab del README.

Iniciar la prueba Robo

#

Para usar la prueba Robo para ejecutar pruebas de integración, completa los siguientes pasos.

  1. Arrastra el APK de debug desde <flutter_project_directory>/build/app/outputs/apk/debug hacia el objetivo Android Robo Test en la página web. Por ejemplo:

    Carga de Firebase Test Lab
  2. Haz clic en Run a test.

  3. Selecciona el tipo de prueba Instrumentation.

  4. Agrega el APK de la aplicación al cuadro App APK or AAB.

    <flutter_project_directory>/build/app/outputs/apk/debug/<file>.apk

  5. Agrega el APK de prueba al cuadro Test APK.

    <flutter_project_directory>/build/app/outputs/apk/androidTest/debug/<file>.apk

    Carga de dos APKs en Firebase Test Lab
  6. Si ocurre un fallo, haz clic en el icono rojo para ver la salida:

    Resultados de la prueba en Firebase Test Lab

Probar en Firebase Test Lab (iOS)

#

Puedes usar Firebase Test Lab para probar objetivos de iOS.

Configuración de iOS

#

Sigue las instrucciones de prueba en dispositivos iOS.

Configuración del proyecto en Test Lab

#
  1. Abre tu Firebase Console.

  2. Crea un nuevo proyecto de Firebase si es necesario.

  3. Navega a Quality > Test Lab.

    Consola de Firebase Test Lab

Subir pruebas de Xcode a través de la consola de Firebase

#

Para aprender cómo subir pruebas desde un archivo ZIP usando la consola de Firebase Test Lab, consulta las instrucciones de Firebase Test Lab para iOS.

Subir pruebas de Xcode a la consola de Firebase con la línea de comandos

#

Para aprender cómo subir pruebas desde un archivo ZIP desde la línea de comandos a la consola de Firebase Test Lab, consulta las instrucciones de prueba en dispositivos iOS.