flutter-add-integration-test

작성자: flutter

앱 상호작용을 위해 Flutter Driver를 구성하고 MCP 액션을 영구적인 통합 테스트로 변환합니다. 프로젝트에 통합 테스트를 추가할 때 사용합니다.

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,
        );
      }
    },
  );
}

flutter의 다른 스킬

dart-modern-features
flutter
현대화를 위한 후보를 찾으려면:
flutter-fix-layout-issues
flutter
Flutter 레이아웃 오류(오버플로우, 무제한 제약 조건)를 Dart 및 Flutter MCP 도구를 사용하여 수정합니다. "RenderFlex overflowed", "Vertical…" 문제를 해결할 때 사용하세요.
adding-release-notes
flutter
사용자 대상 변경 사항 설명을 DevTools 릴리스 노트에 추가합니다. NEXT_RELEASE_NOTES.md 파일에 개선 사항, 수정 사항 또는 새로운 기능을 문서화할 때 사용하세요.
reviewing-devtools-prs
flutter
DevTools 저장소 전용 PR 리뷰 워크플로로, DevTools 스타일 가이드라인과 일반적인 리뷰 패턴을 적용합니다. 풀 리퀘스트를 리뷰할 때 사용하세요…
dart-use-primary-constructors
flutter
사용자가 Dart에서 구문 및 의미적으로 올바른 primary constructor를 작성하고, 새로운 생성자 구문, 빈 본문 세미콜론 구문 등으로 마이그레이션/사용할 수 있도록 지원합니다.
code-documentation
flutter
효과적인 코드 문서 작성 가이드로, docstrings, JSDoc, dartdoc 및 구현 주석을 포함합니다. 새 코드를 작성하거나 추가할 때 이 스킬을 사용하세요…
api-review
flutter
지정된 코드를 표준 API 설계 지침에 맞춰 검토합니다. 사용자가 API 리뷰를 요청하거나 API 설계에 따라 코드를 확인할 때 이 스킬을 사용하세요…
flutter-accessibility
flutter
Flutter 앱에서 WCAG 2 및 EN 301 549 접근성 표준과 적응형 레이아웃을 구현합니다. 모바일, 웹, 데스크톱 플랫폼에서 시맨틱 주석, 탭 대상 크기(최소 48x48 dp), 텍스트 대비 비율(작은 텍스트 4.5:1, 큰 텍스트 3:1)을 적용합니다. 웹 시맨틱 초기화, 대화형 위젯 래핑, 화면 크기 기반 레이아웃 전환, 키보드/마우스 입력 처리를 위한 결정 로직을 제공합니다. FocusTraversalGroup을 통한 포커스 이동 관리를 포함합니다...