DEV Community

Rex
Rex

Posted on

TestSprite MCP Server — Przewodnik Szybkiego Startu

#polish #testsprite #mcp #testing

TestSprite MCP Server — Przewodnik Szybkiego Startu

TestSprite MCP to nowoczesny serwer do automatyzacji testów aplikacji frontendowych i backendowych, który integruje się z popularnymi edytorami kodu i asystentami AI. Pozwala szybko generować, uruchamiać i analizować testy end-to-end z poziomu IDE.

Instalacja

Wymagania wstępne

Pobierz swój klucz API

  1. Zaloguj się do swojego panelu TestSprite na https://www.testsprite.com/dashboard
  2. Przejdź do sekcji Klucze API w Ustawieniach
  3. Kliknij „Nowy klucz API”
  4. Skopiuj swój klucz API

Konfiguracja IDE

Cursor (Instalacja jednym kliknięciem)

  1. Pobierz swój klucz API
  2. Kliknij link instalacyjny one-click dla Cursor
  3. Wprowadź swój klucz API w Cursor
  4. Rozpocznij testowanie

Cursor (Konfiguracja ręczna)

  1. Otwórz Ustawienia Cursor
  2. Przejdź do Tools & Integration
  3. Kliknij Dodaj własny MCP
  4. Dodaj poniższą konfigurację: 
{
  "mcpServers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Upewnij się, że na ikonie serwera TestSprite MCP pojawiła się zielona kropka

Ważne — Tryb Sandbox w Cursor: Domyślnie Cursor uruchamia narzędzia MCP w trybie sandbox, co ogranicza możliwości TestSprite. Aby to zmienić:

  • Przejdź do Cursor → Ustawienia → Cursor Settings
  • Przejdź do Chat → Auto-Run → Auto-Run Mode
  • Zmień na „Ask Everytime” lub „Run Everything”

Claude Code 

cd /path/to/your/project
claude mcp add TestSprite --env API_KEY=your_api_key -- npx @testsprite/testsprite-mcp@latest
Enter fullscreen mode Exit fullscreen mode

Weryfikacja:

claude mcp list
Enter fullscreen mode Exit fullscreen mode

Oczekiwany wynik: TestSprite: npx @testsprite/testsprite-mcp@latest - ✓ Connected

VSCode

  1. Otwórz paletę poleceń (Command Palette)
  2. Wybierz MCP: Add Server
  3. Wybierz typ Command (stdio)
  4. Wpisz npx @testsprite/testsprite-mcp@latest jako polecenie
  5. Nazwij serwer TestSprite
  6. Dodaj konfigurację środowiska: 
{
  "servers": {
    "testsprite": {
      "command": "npx",
      "args": ["-y", "@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Inne IDE 

{
  "mcpServers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Weryfikacja

  • Twój asystent AI widzi narzędzia TestSprite MCP
  • Brak błędów typu „command not found”
  • Spróbuj: „Pomóż mi przetestować ten projekt za pomocą TestSprite.”

Twój pierwszy test

Krok 1: Przygotuj projekt

Uruchom swoją aplikację:

# Dla aplikacji frontendowych
npm run dev          # Zwykle działa na porcie 3000, 5173 lub 8080

# Dla aplikacji backendowych
node index.js        # Zwykle działa na porcie 8000, 3001 lub 4000
Enter fullscreen mode Exit fullscreen mode

Przykładowa struktura projektu:

my-project/
├── frontend/          # React, Vue, Angular itp.
│   ├── src/
│   ├── package.json
│   └── ...
├── backend/           # Node.js, Python itp.
│   ├── app.py
│   ├── requirements.txt
│   └── ...
├── README.md
└── package.json
Enter fullscreen mode Exit fullscreen mode

Krok 2: Magiczna komenda

Otwórz chat w swoim IDE i:

  1. Otwórz nowe okno rozmowy
  2. Wpisz magiczną komendę: 
Can you test this project with TestSprite?
Enter fullscreen mode Exit fullscreen mode
  1. Opcjonalnie przeciągnij folder projektu do okna rozmowy
  2. Naciśnij Shift+Enter

Twój asystent AI przejmie inicjatywę i poprowadzi Cię przez cały proces testowania.

Krok 3: Konfiguracja (wymagana)

Gdy w przeglądarce otworzy się strona konfiguracji testów, uzupełnij:

  1. Typ testowania

    • Tryb frontend: Testuje interfejs użytkownika i ścieżki użytkownika (przyciski, formularze, nawigacja)
    • Tryb backend: Testuje API, usługi, logikę serwera
    • Zakres codebase: Pełne przeszukanie projektu
    • Zakres Code Diff: Tylko niezatwierdzone zmiany w Git (szybsze przy iteracjach)

  2. Dane testowego konta (jeśli aplikacja wymaga logowania)

    • Frontend: Username: test@example.com / Password: your-test-password
    • Backend: Basic / Bearer token / API-key / Brak uwierzytelnienia

  3. Adresy URL aplikacji:

   Frontend: http://localhost:5173
   Backend: http://localhost:4000
Enter fullscreen mode Exit fullscreen mode
  1. Dokument wymagań produktowych (PRD): Prześlij swój istniejący PRD (nawet w wersji roboczej). TestSprite AI wygeneruje z niego znormalizowany PRD.

Krok 4: Zautomatyzowany workflow

TestSprite automatycznie przeprowadza cały proces testowania:

  • Analizuje kod Twojego projektu
  • Generuje kompleksowy plan testów
  • Uruchamia testy w chmurze
  • Tworzy szczegółowe raporty
  • Proponuje automatyczne poprawki dla błędów

Krok 5: Przegląd wyników testów

Po zakończeniu testowania znajdziesz w swoim projekcie następujące pliki:

testsprite_tests/
├── tmp/
│   ├── prd_files/                 # Przesłane pliki PRD
│   ├── config.json               # Konfiguracja testów
│   ├── code_summary.json         # Analiza kodu
│   ├── report_prompt.json        # Dane do analizy AI
│   └── test_results.json         # Szczegółowe wyniki testów
├── standard_prd.json             # Znormalizowany PRD
├── TestSprite_MCP_Test_Report.md # Raport czytelny dla człowieka
├── TestSprite_MCP_Test_Report.html # Raport HTML
├── TC001_Login_Success_with_Valid_Credentials.py
├── TC002_Login_Failure_with_Invalid_Credentials.py
└── ...                           # Dodatkowe pliki testowe
Enter fullscreen mode Exit fullscreen mode

Raport z testów pokazuje: ogólne pokrycie, wskaźnik zaliczonych testów, nieudane testy wraz z analizą błędów oraz kategorie (Funkcjonalne, UI/UX, Bezpieczeństwo, Wydajność).

Przykładowy plan testów:

{
  "testCases": [
    {
      "id": "TC001",
      "title": "User Authentication Login",
      "description": "Test user login with valid credentials",
      "category": "Functional",
      "priority": "High",
      "steps": [
        "Navigate to login page",
        "Enter valid username and password",
        "Click login button",
        "Verify successful login"
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Przykładowe podsumowanie raportu z testów:

{
  "summary": {
    "totalTests": 18,
    "passed": 12,
    "failed": 6,
    "passRate": "67%",
    "coverage": "85%"
  },
  "failures": [
    {
      "testId": "TC005",
      "title": "Admin Panel Access",
      "error": "Button not found: #admin-delete-btn",
      "recommendation": "Add missing delete button in admin panel"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Krok 6: Automatyczne poprawki błędów

Po przejrzeniu wyników poproś:

Please fix the codebase based on TestSprite testing results.
Enter fullscreen mode Exit fullscreen mode

AI wykona następujące czynności:

  • Przeanalizuje niezaliczone testy
  • Zidentyfikuje problematyczne fragmenty kodu
  • Zastosuje ukierunkowane poprawki automatycznie
  • Ponownie uruchomi testy w celu weryfikacji poprawek
  • Będzie iterować aż do rozwiązania wszystkich problemów

Wskazówki dla sukcesu

  • Upewnij się, że frontend i backend są uruchomione i dostępne przed rozpoczęciem testów
  • Nawet minimalny PRD (jeden akapit opisujący aplikację) wystarczy
  • Używaj zakresu Code Diff do szybkiej walidacji pojedynczych zmian
  • TestSprite działa najlepiej, gdy Twoja aplikacja jest w stabilnym, uruchamialnym stanie

TestSprite MCP pozwala zautomatyzować testowanie Twoich aplikacji i szybko poprawiać błędy, oszczędzając czas i zwiększając jakość kodu. Wypróbuj już dziś i przekonaj się, jak łatwo możesz podnieść poziom testowania w swoim projekcie!

Top comments (0)