К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

flutter-add-integration-test — скилл для Claude Code: установка

Скилл настраивает интеграционные тесты во Flutter через пакет integration_test. Он переносит действия из MCP-сервера в готовые тестовые сценарии.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add flutter/agent-plugins --skill flutter-add-integration-test -a claude-code
Открыть на GitHub

Что делает flutter-add-integration-test

Скилл добавляет зависимости integration_test и flutter_test в pubspec.yaml, а затем активирует enableFlutterDriverExtension() в точке входа приложения. Агент исследует дерево виджетов через MCP-инструменты get_widget_tree и launch_app. Это помогает расставить ValueKey на кнопки и текстовые поля.

После интерактивных кликов через MCP формируется файл в папке integration_test/. Скрипт использует tester.pumpAndSettle() и expect для проверки интерфейса. Если в коде крутится бесконечная анимация, тест упадёт с ошибкой PumpAndSettleTimedOutException — это повод проверить таймеры.

Запуск выполняется командой flutter drive с хостовым скриптом test_driver/integration_test.dart. Для тестов в Chrome потребуется отдельно запустить chromedriver на порту 4444.

Какие задачи решает

  • настроить зависимости integration_test в pubspec.yaml
  • исследовать дерево виджетов приложения через MCP
  • сгенерировать сценарий проверки виджетов по ключам
  • подготовить запуск тестов в Chrome через chromedriver

Примеры запросов агенту

  • Добавь интеграционный тест для экрана авторизации с проверкой кнопки входа
  • Исследуй дерево виджетов через MCP и напиши сценарий для счётчика в integration_test/app_test.dart
  • Настрой запуск тестов через flutter drive для Chrome

Как установить flutter-add-integration-test

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/flutter-add-integration-test/

Из того же набора14

Весь набор →
flutter-apply-architecture-best-practices flutter Скилл раскладывает Flutter-приложение по слоям UI, Logic и Data. Пригодится для нового проекта или рефакторинга кода. Claude Code CX Codex Cursor +1 43 000установок flutter-build-responsive-layout flutter Скилл обучает агента строить адаптивные интерфейсы Flutter под экраны телефонов и десктопов. Он задаёт правила работы с LayoutBuilder и MediaQuery. Claude Code CX Codex Cursor +1 42 300установок flutter-add-widget-test flutter Скилл помогает писать компонентные тесты Flutter с помощью WidgetTester. Проверяет, как виджет отображается и реагирует на касания, скролл и ввод текста. Claude Code CX Codex Cursor +1 39 000установок flutter-setup-declarative-routing flutter Настраивает декларативную маршрутизацию Flutter через go_router: маршруты по URL, вложенную навигацию и глубокие ссылки для веба и мобильных платформ. Claude Code CX Codex Cursor +1 37 600установок flutter-implement-json-serialization flutter Скилл учит агента создавать Dart-модели с методами fromJson и toJson через библиотеку dart:convert. Пригодится при ручном разборе простых структур данных в Flutter. Claude Code CX Codex Cursor +1 37 200установок flutter-add-widget-preview flutter Скилл учит агента создавать интерактивные превью виджетов во Flutter через package:flutter/widget_previews.dart. Пригодится для изолированной вёрстки UI без сборки всего приложения. Claude Code CX Codex Cursor +1 36 600установок flutter-setup-localization flutter Скилл автоматизирует инициализацию поддержки многоязычности в Flutter-проекте. Добавляет зависимости, включает генерацию кода и создаёт конфиг для работы с .arb-файлами. Claude Code CX Codex Cursor +1 36 600установок flutter-use-http-package flutter Скилл помогает добавить в Flutter-приложение запросы к REST API через пакет http и обработать JSON-ответ. Пригодится для загрузки и отправки данных. Claude Code CX Codex Cursor +1 36 000установок

Похожие

tdd-rust rtk-ai Скилл для разработки RTK-фильтров по методу TDD. Пишешь тест на реальных данных, реализуешь минимум кода, проверяешь экономию токенов — и фиксируешь формат вывода снимком через insta. Claude Code CX Codex Cursor +1 1 400установок dotnet-backend-patterns Seth Hobson Скилл для разработки на C# и .NET: паттерны асинхронного кода, внедрение зависимостей, Entity Framework Core, кэширование и тестирование. Нужен, если вы пишете backend API, MCP-серверы или рецензируете код на C#. Claude Code CX Codex Cursor 19 076установок unlazy Leonxlnx Скилл задаёт проверяемые условия завершения, разбивает сложную работу на этапы и требует повторной проверки перед отчётом. Claude Code CX Codex Cursor +1 9 400установок audit-xls официальный anthropics Проверяет формулы и структуру таблиц Excel на ошибки, хардкод и разрывы логики. Помогает провести аудит финансовой модели перед отправкой клиенту. Claude Code CX Codex Cursor +1 2 200установок harness-creator walkinglabs Скилл настраивает и проверяет окружение для кодинг-агентов. Он создаёт инструкции, трекеры задач и правила верификации, чтобы агент не бросал работу на полпути. Claude Code CX Codex Cursor +1 2 300установок improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. Claude Code 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. Claude Code 1 141 062установок

Вопросы о flutter-add-integration-test

Как установить flutter-add-integration-test в Claude Code?

Выполните команду npx skills add flutter/agent-plugins --skill flutter-add-integration-test -a claude-code.

Что делает flutter-add-integration-test?

Скилл подключает зависимости integration_test, находит виджеты через MCP-инструменты и пишет сквозные сценарии проверки UI.

Что делать при ошибке PumpAndSettleTimedOutException?

Эта ошибка возникает при ожидании завершения кадров. Проверьте приложение на бесконечные анимации или примените scrollUntilVisible, если виджет не смонтирован.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой