DEV Community

Zoe
Zoe

Posted on

TestSprite MCP Server — Snelstartgids

#dutch #testsprite #mcp #testing

TestSprite MCP Server — Snelstartgids

TestSprite MCP is een krachtige AI-gedreven testserver die je direct vanuit je favoriete IDE helpt om frontend- en backendapplicaties automatisch te testen. Met TestSprite kun je eenvoudig testplannen genereren, uitvoeren en fouten automatisch laten oplossen, allemaal binnen je bestaande ontwikkelworkflow.

Installatie

Vereisten

Haal je API-sleutel op

  1. Log in op je TestSprite-dashboard via https://www.testsprite.com/dashboard
  2. Navigeer naar API Keys onder Instellingen
  3. Klik op "Nieuwe API Key"
  4. Kopieer je API-sleutel

IDE-configuratie

Cursor (One-Click)

  1. Haal je API-sleutel op
  2. Klik op de one-click installatielink voor Cursor
  3. Voer je API-sleutel in binnen Cursor
  4. Begin met testen

Cursor (Handmatig)

  1. Open Cursor-instellingen
  2. Navigeer naar Tools & Integratie
  3. Klik op "Voeg aangepaste MCP toe"
  4. Voeg de volgende configuratie toe: 
{
  "mcpServers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Controleer of er een groen bolletje verschijnt op het TestSprite MCP-servericoon

Belangrijk — Cursor Sandbox-modus: Cursor draait MCP-tools standaard in sandbox-modus, wat TestSprite beperkt. Om dit op te lossen:

  • Ga naar Cursor → Instellingen → Cursor-instellingen
  • Ga naar Chat → Auto-Run → Auto-Run-modus
  • Wijzig naar "Elke keer vragen" of "Alles uitvoeren"

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

Controleer met:

claude mcp list
Enter fullscreen mode Exit fullscreen mode

Verwachte output: TestSprite: npx @testsprite/testsprite-mcp@latest - ✓ Verbonden

VSCode

  1. Open het Command Palette
  2. Voer MCP: Add Server uit
  3. Kies Command (stdio) als type
  4. Typ npx @testsprite/testsprite-mcp@latest als het commando
  5. Geef het de naam TestSprite
  6. Voeg de volgende env-configuratie toe: 
{
  "servers": {
    "testsprite": {
      "command": "npx",
      "args": ["-y", "@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Andere IDE's 

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

Verificatie

  • Je AI-assistent kan TestSprite MCP-tools zien
  • Geen "command not found"-fouten
  • Probeer: "Help me test dit project met TestSprite."

Je Eerste Test

Stap 1: Bereid je project voor

Start je applicatie:

# Voor frontend-applicaties
npm run dev          # Draait meestal op poort 3000, 5173 of 8080

# Voor backend-applicaties
node index.js        # Draait meestal op poort 8000, 3001 of 4000
Enter fullscreen mode Exit fullscreen mode

Voorbeeld projectstructuur:

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

Stap 2: Het Magische Commando

Open de chatfunctie van je IDE en:

  1. Open een nieuw chatvenster
  2. Typ het magische commando: 
Can you test this project with TestSprite?
Enter fullscreen mode Exit fullscreen mode
  1. Sleep eventueel je projectmap naar het chatvenster
  2. Druk op Shift+Enter

Je AI-assistent neemt het over en begeleidt je door het volledige testproces.

Stap 3: Configuratie (Vereist)

Wanneer de testconfiguratiepagina in je browser opent, vul je het volgende in:

  1. Testtype

    • Frontend-modus: Test UI en gebruikersflows (knoppen, formulieren, navigatie)
    • Backend-modus: Test APIs, services, serverlogica
    • Codebase scope: Volledige projectscan
    • Code Diff scope: Alleen niet-gecommitete Git-wijzigingen (sneller voor iteraties)

  2. Testaccountgegevens (indien je app login vereist)

    • Frontend: Gebruikersnaam: test@example.com / Wachtwoord: jouw-test-wachtwoord
    • Backend: Basic / Bearer token / API-key / Geen authenticatie

  3. Applicatie-URL's:

   Frontend: http://localhost:5173
   Backend: http://localhost:4000
Enter fullscreen mode Exit fullscreen mode
  1. Product Requirements Document (PRD): Upload je bestaande PRD (zelfs een concept is voldoende). TestSprite AI genereert hieruit een genormaliseerde PRD.

Stap 4: Geautomatiseerde Workflow

TestSprite verzorgt het volledige testproces automatisch:

  • Analyseert je projectcode
  • Genereert een uitgebreid testplan
  • Voert tests uit in de cloud
  • Maakt gedetailleerde rapporten
  • Stelt automatische oplossingen voor bij fouten

Stap 5: Testresultaten Bekijken

Na het testen vind je deze bestanden in je project:

testsprite_tests/
├── tmp/
│   ├── prd_files/                 # Geüploade PRD-bestanden
│   ├── config.json               # Testconfiguratie
│   ├── code_summary.json         # Code-analyse
│   ├── report_prompt.json        # AI-analysegegevens
│   └── test_results.json         # Gedetailleerde testresultaten
├── standard_prd.json             # Genormaliseerde PRD
├── TestSprite_MCP_Test_Report.md # Mens-leesbaar rapport
├── TestSprite_MCP_Test_Report.html # HTML-rapport
├── TC001_Login_Success_with_Valid_Credentials.py
├── TC002_Login_Failure_with_Invalid_Credentials.py
└── ...                           # Extra testbestanden
Enter fullscreen mode Exit fullscreen mode

Het testrapport toont: totale dekking, slagingspercentage, mislukte tests met foutenanalyse en categorieën (Functioneel, UI/UX, Security, Performance).

Voorbeeld testplan:

{
  "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

Voorbeeld samenvatting testrapport:

{
  "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

Stap 6: Automatische Bugfixes

Na het bekijken van de resultaten, vraag:

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

De AI zal:

  • Faalde tests analyseren
  • Problematische code identificeren
  • Gericht fixes toepassen
  • Tests opnieuw uitvoeren om fixes te verifiëren
  • Itereren tot alle problemen zijn opgelost

Tips voor Succes

  • Zorg dat je frontend en backend draaien en bereikbaar zijn voordat je start
  • Zelfs een minimale PRD (één paragraaf die je app beschrijft) is voldoende
  • Gebruik Code Diff scope voor snelle validatie van individuele wijzigingen
  • TestSprite werkt het beste als je app in een stabiele, uitvoerbare staat is

Met deze gids kun je direct aan de slag met geautomatiseerd testen in je IDE met TestSprite MCP. Veel testplezier!

Top comments (0)