Testwire: KI-Agenten und Flutter-Tests über MCP und hot reload

Testwire: KI-Agenten in Flutter-Integrationstests mit MCP und Hot Reload integrieren

KI-Agenten haben Schwierigkeiten beim Schreiben von Flutter-Integrationstests aufgrund hohem Tokenverbrauchs, langer Build-Zeiten und fehlendem visuellen Kontext. Testwire löst diese Probleme mit einem Tool für schrittweises Testen, das über MCP mit dem VM Service verbunden ist. So können Agenten den Prozess steuern, Screenshots machen und Hot Reload für schnelle Korrekturen nutzen.

Testwire-Architektur und Funktionsweise

Testwire besteht aus drei Hauptkomponenten, die über das Model Context Protocol (MCP) kommunizieren. Tests laufen im flutter run-Modus mit der Flag --dart-define=AGENT_MODE=true, was den Debug-Modus und Dart-VM-Service-Erweiterungen aktiviert. Der testwire_mcp-MCP-Server verbindet sich über den VM Service mit dem Test und stellt dem Agenten eine Reihe von Tools zur Verfügung, um die Ausführung zu managen. Als MCP-Client nutzt der KI-Agent diese Tools, um Schrittstatus zu überwachen, Befehle auszuführen und Fehler mit Zugriff auf UI-Bilder zu analysieren.

Wichtige MCP-Tools für den Agenten:

• connect: Verbinde dich mit dem Test über VM-Service-URI.
• step_forward: Führe den nächsten Schritt aus und pausiere.
• run_remaining: Führe alle verbleibenden Schritte aus, stoppe bei Fehler.
• retry_step: Wiederhole einen fehlgeschlagenen Schritt.
• get_test_state: Hole Status aller Testschritte.
• hot_reload_testwire_test: Hot Reload bei Erhalt des Fortschritts.
• hot_restart_testwire_test: Vollständiger Test-Neustart.
• screenshot: Erstelle Screenshot der aktuellen UI.
• disconnect: Trenne die Verbindung vom Test.

Tests in Testwire umsetzen: Code und Struktur

Testwire-Tests sind als Klassen strukturiert, die TestwireTest erweitern, um Hot Reload zu unterstützen. Jeder Test zerfällt in logische Schritte mit Status: ausstehend, abgeschlossen, läuft oder fehlgeschlagen. Schritte werden mit der step-Methode definiert, die eine Beschreibung, Kontext und Aktion enthält. Hier ein Beispiel für die Validierung eines Feedback-Formulars:

class MyTest extends TestwireTest {
  MyTest() : super(
    'Submit feedback form',
    setUp: (tester) async {
      app.main();
      await tester.pumpAndSettle();
    },
  );

  @override
  Future<void> body(WidgetTester tester) async {
    await step(
      description: 'Navigate to Leave Review',
      context: 'Tap the "Leave Review" tile on the home screen.',
      action: () async {
        await tester.tap(find.byKey(const Key('leave_review_tile')));
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Enter name',
      context: 'Type "Alex" into the name field.',
      action: () async {
        await tester.enterText(
          find.byKey(const Key('name_field')), 'Alex');
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Tap 5-star rating',
      context: 'Tap the 5th star to set rating to 5.',
      action: () async {
        await tester.tap(find.byKey(const Key('star_5')));
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Verify result',
      context: 'Check that the success message is displayed.',
      action: () async {
        expect(find.text('Thank you!'), findsOneWidget);
        expect(find.text('5 stars from Alex'), findsOneWidget);
      },
    );
  }
}

Hot Reload als zentraler Debugging-Mechanismus

Das Hot Reload von Testwire ermöglicht Agenten, Testcode ohne vollständigen Rebuild zu korrigieren und den Ausführungsfortschritt zu erhalten. Bei einem fehlgeschlagenen Schritt pausiert der Test, der Agent prüft Logs, VM-Zustand und UI-Screenshots, löst dann Hot Reload aus und wiederholt den Schritt. Das verkürzt Entwicklungszyklen von 15–20 Minuten auf wenige Iterationen, spart Token-Kosten und Kontextfenster-Nutzung. Hot-Reload-Unterstützung erfordert klassenbasierte Tests (keine Funktionen), um Zustände über Reloads zu erhalten.

Integration in Entwicklungs- und CI/CD-Workflows

Testwire bietet zwei Modi: Agenten-Modus für die Entwicklung und Standardmodus für CI/CD. In der Entwicklung starten Sie Tests mit flutter run --dart-define=AGENT_MODE=true, um MCP und Hot Reload zu aktivieren. Im CI nutzen Sie flutter test als normalen Integrationstest ohne Extra-Flags. Dieser Ansatz mit einer einzigen Testdatei sorgt für Konsistenz und vereinfacht die Wartung. Die Integration von Testwire erfordert Anpassungen beim Agenten und Dokumentation, macht aber Integrationstests zu einem Kernbestandteil – nicht zu einem Nachgedanken.

Wichtige Erkenntnisse

• Testwire behebt KI-Agenten-Probleme beim Testschreiben: hohe Token-Kosten, langsame Builds, kein visuelles Feedback.
• Es nutzt MCP, um sich in den VM Service einzuhaken und Agenten schrittweise Kontrolle zu geben.
• Hot Reload ermöglicht Korrekturen ohne Rebuilds und beschleunigt Entwicklungszyklen.
• Tests sind klassenbasiert für Hot Reload und Dual-Modus-CI/CD-Kompatibilität.
• Einrichtung ist nötig, aber es integriert Testing in jeden Dev-Workflow.

— Editorial Team