Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

flutter-add-integration-test — Claude Code skill: how to install

Sets up the integration_test package for Flutter and turns MCP session interactions into repeatable end-to-end tests.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add flutter/agent-plugins --skill flutter-add-integration-test -a claude-code
Open on GitHub

What flutter-add-integration-test does

The skill injects integration_test and flutter_test into pubspec.yaml, then enables enableFlutterDriverExtension() inside the app entry point. It uses Dart MCP tools like launch_app and get_widget_tree to map visible keys and widget types.

Recorded MCP interactions are translated into static test files under integration_test/. The generated code uses tester.pumpAndSettle() along with find.byKey assertions. Infinite animations will trigger a PumpAndSettleTimedOutException, which is a prompt to inspect loop timers.

Runs execute via flutter drive paired with a host runner in test_driver/integration_test.dart. Testing against Chrome requires a running chromedriver instance listening on port 4444.

What it helps with

  • add integration_test dependencies to pubspec.yaml
  • inspect Flutter widget trees using Dart MCP tools
  • generate end-to-end tests using WidgetTester APIs
  • configure flutter drive targets for Chrome and Android

Example prompts for the agent

  • Set up an integration test for the login flow using integration_test
  • Inspect the widget tree with MCP and write a test for the counter button
  • Configure flutter drive to run web integration tests on Chrome

How to install flutter-add-integration-test

1Skills CLI (Vercel)

npx skills add flutter/agent-plugins --skill flutter-add-integration-test -a claude-code

2Manually: put the files in place

~/.claude/skills/flutter-add-integration-test/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/flutter-add-integration-test/

From the same set7

The whole set →

Similar

tdd-rust rtk-ai Skill for RTK filter development using TDD. Write a test with real data, implement minimum code, verify token savings, lock the output format with insta snapshots. Claude Code CX Codex Cursor +1 1,400installs dotnet-backend-patterns Seth Hobson Skill for C# and .NET development: patterns for async code, dependency injection, Entity Framework Core, caching, and testing. Use when building backend APIs, MCP servers, or reviewing C# code. Claude Code CX Codex Cursor 19,076installs unlazy Leonxlnx This skill sets testable completion gates, breaks complex work into stages, and rechecks evidence before the agent reports completion. Claude Code CX Codex Cursor +1 9,400installs audit-xls official anthropics Audits Excel sheets for formula errors, hardcoded values, and logic breaks. It checks financial model integrity before sharing work with clients or review committees. Claude Code CX Codex Cursor +1 2,200installs harness-creator walkinglabs Builds, audits, and fixes scaffolding for coding agents. It generates agent instructions, state files, and verification gates to stop task drift. Claude Code CX Codex Cursor +1 2,300installs improve-codebase-architecture Matt Pocock This skill scans a codebase for architectural friction, then builds a visual HTML report with refactoring candidates. Use it before a deeper architecture review. Claude Code 1,163,035installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs tdd Matt Pocock Guides the red-green TDD loop: ensures tests are written first, keep them at public interfaces, and avoid coupling to implementation details. Claude Code 1,141,062installs

Questions about flutter-add-integration-test

How to install flutter-add-integration-test in Claude Code?

Run npx skills add flutter/agent-plugins --skill flutter-add-integration-test -a claude-code.

What does flutter-add-integration-test do?

It configures Flutter Driver extensions and converts interactive MCP session steps into persistent UI integration tests.

Why does PumpAndSettleTimedOutException occur during a run?

This timeout happens when animations never settle. Check for continuous animations or call scrollUntilVisible when an off-screen item fails to mount.

Source text

SKILL.md · BSD-3-Clause
---
name: flutter-add-integration-test
description: Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.
metadata:
  model: models/gemini-3.1-pro-preview
  last_modified: Tue, 21 Apr 2026 18:29:20 GMT
---
# Implementing Flutter Integration Tests

## Contents
- [Project Setup and Dependencies](#project-setup-and-dependencies)
- [Interactive Exploration via MCP](#interactive-exploration-via-mcp)
- [Test Authoring Guidelines](#test-authoring-guidelines)
- [Execution and Profiling](#execution-and-profiling)
- [Workflow: End-to-End Integration Testing](#workflow-end-to-end-integration-testing)
- [Examples](#examples)

## Project Setup and Dependencies

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

1. Add required development dependencies to `pubspec.yaml`:
   ```bash
   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 `Key`s, `Text` nodes, and widget `Type`s.
- **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 `ValueKey`s 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`)

```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`)

```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.

```dart
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 · BSD-3-Clause · flutter/agent-plugins

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor