Testwire: Agenci AI i testy Flutter przez MCP i hot reload

Testwire: Integracja agentów sztucznej inteligencji w tworzenie testów Flutter z wykorzystaniem MCP i hot reload

Agenty sztucznej inteligencji napotykają problemy przy pisaniu testów integracyjnych dla Flutter: wysokie zużycie tokenów, długie cykle kompilacji oraz brak kontekstu wizualnego. Testwire rozwiązuje te problemy, dostarczając narzędzie do krokowej realizacji testów z połączeniem do VM Service poprzez MCP, co umożliwia agentom kontrolę nad procesem, tworzenie zrzutów ekranu i stosowanie hot reload do szybkich poprawek.

Architektura i zasada działania Testwire

Testwire składa się z trzech kluczowych komponentów, które współdziałają przez Model Context Protocol (MCP). Test jest uruchamiany w trybie flutter run z flagą --dart-define=AGENT_MODE=true, co aktywuje tryb debugowania i rejestrację rozszerzeń Dart VM service. Serwer MCP testwire_mcp łączy się z testem przez VM service, dostarczając agentowi zestaw narzędzi do zarządzania wykonaniem. Agent AI, jako klient MCP, używa tych narzędzi do monitorowania stanu kroków, wykonywania poleceń i analizowania błędów z dostępem do wizualnej reprezentacji interfejsu.

Główne narzędzia MCP dostępne dla agenta:

• connect: Podłączenie do testu przez URI VM service.
• step_forward: Wykonanie następnego kroku z późniejszą pauzą.
• run_remaining: Uruchomienie wszystkich pozostałych kroków z zatrzymaniem przy błędzie.
• retry_step: Powtórne wykonanie nieudanego kroku.
• get_test_state: Uzyskanie statusu wszystkich kroków testu.
• hot_reload_testwire_test: Hot reload z zachowaniem postępu wykonania.
• hot_restart_testwire_test: Pełny restart testu.
• screenshot: Utworzenie zrzutu ekranu bieżącego UI.
• disconnect: Odłączenie od testu.

Implementacja testów w Testwire: kod i struktura

Testy w Testwire są organizowane jako osobne klasy, dziedziczące po TestwireTest, co jest konieczne do wsparcia hot reload. Każdy test jest podzielony na logiczne kroki ze stanami: nie wykonany, wykonany, wykonywany, wykonany z błędem. Kroki są definiowane za pomocą metody step, która zawiera opis, kontekst i działanie. Przykładowa struktura testu do sprawdzenia formularza opinii:

class MyTest extends TestwireTest {
  MyTest() : super(
    'Prześlij formularz opinii',
    setUp: (tester) async {
      app.main();
      await tester.pumpAndSettle();
    },
  );

  @override
  Future<void> body(WidgetTester tester) async {
    await step(
      description: 'Przejdź do Zostaw Opinię',
      context: 'Kliknij kafelek "Zostaw Opinię" na ekranie głównym.',
      action: () async {
        await tester.tap(find.byKey(const Key('leave_review_tile')));
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Wprowadź imię',
      context: 'Wpisz "Alex" w pole imienia.',
      action: () async {
        await tester.enterText(
          find.byKey(const Key('name_field')), 'Alex');
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Kliknij 5-gwiazdkową ocenę',
      context: 'Kliknij 5. gwiazdkę, aby ustawić ocenę na 5.',
      action: () async {
        await tester.tap(find.byKey(const Key('star_5')));
        await tester.pumpAndSettle();
      },
    );

    await step(
      description: 'Sprawdź wynik',
      context: 'Sprawdź, czy wyświetla się komunikat sukcesu.',
      action: () async {
        expect(find.text('Dziękujemy!'), findsOneWidget);
        expect(find.text('5 gwiazdek od Alex'), findsOneWidget);
      },
    );
  }
}

Hot reload jako kluczowy mechanizm debugowania

Hot reload w Testwire pozwala agentowi wprowadzać poprawki w kodzie testu bez pełnej rekompilacji, zachowując postęp wykonania. Przy błędzie kroku test jest wstrzymywany, agent analizuje błąd z dostępem do logów, stanu VM i zrzutów ekranu UI, po czym wykonuje hot reload i powtarza krok. To skraca czas cyklu rozwoju z 15–20 minut do kilku iteracji, redukując zużycie tokenów i okno kontekstowe. Wsparcie hot reload wymaga organizowania testów jako klas, a nie funkcji, co zapewnia zachowanie stanu między przeładowaniami.

Integracja w procesie rozwoju i CI/CD

Testwire wspiera dwa tryby wykonania: agentowy dla rozwoju i zwykły dla CI/CD. W rozwoju test jest uruchamiany przez flutter run --dart-define=AGENT_MODE=true, aktywując połączenie MCP i hot reload. Na CI test jest wykonywany jako standardowy test integracyjny za pomocą flutter test, bez dodatkowych flag. To pozwala używać jednego pliku testu dla obu scenariuszy, zapewniając spójność i upraszczając wsparcie. Integracja Testwire w projekt może wymagać konfiguracji umiejętności agentów i dokumentacji, ale narzędzie czyni pisanie testów integracyjnych obowiązkową częścią zadań, a nie opcjonalnym etapem.

Co ważne

• Testwire rozwiązuje problemy agentów AI przy pisaniu testów: wysokie zużycie tokenów, długie kompilacje, brak kontekstu wizualnego.
• Narzędzie używa MCP do połączenia z VM Service, dając agentom kontrolę nad krokowym wykonaniem testów.
• Hot reload pozwala wprowadzać poprawki bez pełnej rekompilacji, skracając czas cykli rozwoju.
• Testy są organizowane jako klasy dla wsparcia hot reload i kompatybilności z CI/CD przez dwa tryby uruchomienia.
• Integracja wymaga konfiguracji, ale czyni testowanie integralną częścią procesu rozwoju.

— Editorial Team