flutter-add-integration-test

Configure Flutter Driver pour l'interaction avec l'application et convertit les actions MCP en tests d'intégration permanents. À utiliser lors de l'ajout de tests d'intégration à un projet,…

npx skills add https://github.com/flutter/skills --skill flutter-add-integration-test

Implementing Flutter Integration Tests

Contents

Project Setup and Dependencies

Configure the project to support integration testing and Flutter Driver extensions.

  1. Add required development dependencies to pubspec.yaml:
    flutter pub add 'dev:integration_test:{"sdk":"flutter"}'
    flutter pub add 'dev:flutter_test:{"sdk":"flutter"}'
    
  2. Enable the Flutter Driver extension in your application entry point (typically lib/main.dart or a dedicated lib/main_test.dart):
    • Import package:flutter_driver/driver_extension.dart.
    • Call enableFlutterDriverExtension(); before runApp().
  3. Add Key parameters (e.g., ValueKey('login_button')) to critical widgets in the application code to ensure reliable targeting during tests.

Interactive Exploration via MCP

Use the Dart/Flutter MCP server tools to interactively explore and manipulate the application state before writing static tests.

  • Launch: Execute launch_app with target: "lib/main_test.dart" to start the application and acquire the DTD URI.
  • Inspect: Execute get_widget_tree to discover available Keys, Text nodes, and widget Types.
  • Interact: Execute tap, enter_text, and scroll to simulate user flows.
  • Wait: Always execute waitFor or verify state with get_health when navigating or triggering animations.
  • Troubleshoot Unmounted Widgets: If a widget is not found in the tree, it may be lazily loaded in a SliverList or ListView. Execute scroll or scrollIntoView to force the widget to mount before interacting with it.

Test Authoring Guidelines

Structure integration tests using the flutter_test API paradigm.

  • Create a dedicated integration_test/ directory at the project root.
  • Name all test files using the <name>_test.dart convention.
  • Initialize the binding by calling IntegrationTestWidgetsFlutterBinding.ensureInitialized(); at the start of main().
  • Load the application UI using await tester.pumpWidget(MyApp());.
  • Trigger frames and wait for animations to complete using await tester.pumpAndSettle(); after interactions like tester.tap().
  • Assert widget visibility using expect(find.byKey(ValueKey('foo')), findsOneWidget); or findsNothing.
  • Scroll to specific off-screen widgets using await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder);.

Conditional Logic for Legacy flutter_driver:

  • If maintaining or migrating legacy flutter_driver tests, use driver.waitFor(), driver.waitForAbsent(), driver.tap(), and driver.scroll() instead of the WidgetTester APIs.

Execution and Profiling

Execute tests using the flutter drive command. Require a host driver script located in test_driver/integration_test.dart that calls integrationDriver().

Conditional Execution Targets:

  • If testing on Chrome: Launch chromedriver --port=4444 in a separate terminal, then run: flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart -d chrome
  • If testing headless web: Run with -d web-server.
  • If testing on Android (Local): Run flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart.
  • If testing on Firebase Test Lab (Android):
    1. Build debug APK: flutter build apk --debug
    2. Build test APK: ./gradlew app:assembleAndroidTest
    3. Upload both APKs to the Firebase Test Lab console.

Workflow: End-to-End Integration Testing

Copy and follow this checklist to implement and verify integration tests.

  • Task Progress: Setup
    • Add integration_test and flutter_test to pubspec.yaml.
    • Inject enableFlutterDriverExtension() into the app entry point.
    • Assign ValueKeys to target widgets.
  • Task Progress: Exploration
    • Run launch_app via MCP.
    • Map the widget tree using get_widget_tree.
    • Validate interaction paths using MCP tools (tap, enter_text).
  • Task Progress: Authoring
    • Create integration_test/app_test.dart.
    • Write test cases using WidgetTester APIs.
    • Create test_driver/integration_test.dart with integrationDriver().
  • Task Progress: Execution & Feedback Loop
    • Run flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart.
    • Feedback Loop: Review test output -> If PumpAndSettleTimedOutException occurs, check for infinite animations -> If widget not found, add scrollUntilVisible -> Re-run test until passing.

Examples

Standard Integration Test (integration_test/app_test.dart)

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:integration_test/integration_test.dart';
import 'package:my_app/main.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);

      // Find 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 and wait for animations.
      await tester.pumpAndSettle();

      // Verify the counter increments by 1.
      expect(find.text('1'), findsOneWidget);
    });
  });
}

Host Driver Script (test_driver/integration_test.dart)

import 'package:integration_test/integration_test_driver.dart';

Future<void> main() => integrationDriver();

Performance Profiling Driver Script (test_driver/perf_driver.dart)

Use this driver script if you wrap your test actions in binding.traceAction() to capture performance metrics.

import 'package:flutter_driver/flutter_driver.dart' as driver;
import 'package:integration_test/integration_test_driver.dart';

Future<void> main() {
  return integrationDriver(
    responseDataCallback: (data) async {
      if (data != null) {
        final timeline = driver.Timeline.fromJson(
          data['scrolling_timeline'] as Map<String, dynamic>,
        );

        final summary = driver.TimelineSummary.summarize(timeline);

        await summary.writeTimelineToFile(
          'scrolling_timeline',
          pretty: true,
          includeSummary: true,
        );
      }
    },
  );
}

Plus de skills de flutter

dart-modern-features
flutter
Pour trouver des candidats à la modernisation :
flutter-fix-layout-issues
flutter
Corrige les erreurs de mise en page Flutter (débordements, contraintes illimitées) à l'aide des outils Dart et Flutter MCP. À utiliser pour résoudre les messages « RenderFlex overflowed », « Vertical…
adding-release-notes
flutter
Ajoute des descriptions de changements destinés aux utilisateurs dans les notes de version de DevTools. À utiliser pour documenter les améliorations, correctifs ou nouvelles fonctionnalités dans le fichier NEXT_RELEASE_NOTES.md.
reviewing-devtools-prs
flutter
Workflow de revue de PR spécifique au dépôt DevTools, appliquant les directives de style DevTools et les modèles de revue courants. À utiliser lors de la revue de pull requests dans le…
dart-use-primary-constructors
flutter
Aider les utilisateurs à écrire des constructeurs principaux syntaxiquement et sémantiquement corrects en Dart, et migrer/utiliser la nouvelle syntaxe de constructeur, la syntaxe de point-virgule à corps vide,…
code-documentation
flutter
Guide pour rédiger une documentation de code efficace, incluant les docstrings, JSDoc, dartdoc et les commentaires d'implémentation. Utilisez cette compétence lors de l'écriture de nouveau code, de l'ajout…
api-review
flutter
Examine le code spécifié par rapport aux directives canoniques de conception d'API. Utilisez cette compétence lorsque l'utilisateur demande une revue d'API ou souhaite vérifier que le code respecte la conception d'API…
flutter-accessibility
flutter
Implémente les normes d'accessibilité WCAG 2 et EN 301 549 ainsi que les mises en page adaptatives dans les applications Flutter. Applique les annotations sémantiques, les tailles de cible tactile (48x48 dp minimum) et les ratios de contraste de texte (4,5:1 pour le petit texte, 3:1 pour le grand texte) sur les plateformes mobiles, web et de bureau. Fournit une logique décisionnelle pour l'initialisation de la sémantique web, l'encapsulation de widgets interactifs, le changement de mise en page basé sur la taille d'écran et la gestion des entrées clavier/souris. Inclut la gestion du parcours de focus via FocusTraversalGroup et...