DEV Community

septian hardina
septian hardina

Posted on

Panduan Cepat TestSprite MCP Server — Mulai Testing Otomatis dalam 10 Menit

#indonesia #testing #mcp #ai

Panduan Cepat TestSprite MCP Server

Jalankan tes otomatis pertama Anda dalam waktu kurang dari 10 menit.

TestSprite adalah agen pengujian perangkat lunak AI paling mudah untuk pengujian sepenuhnya otomatis. AI tanpa-kode kami menyelesaikan siklus pengujian dalam 10–20 menit, sehingga Anda bisa merilis produk dengan percaya diri tanpa perlu QA manual.

TestSprite MCP Server adalah integrasi Model Context Protocol (MCP) yang memungkinkan asisten AI di IDE Anda mengatur seluruh alur kerja TestSprite langsung dari editor.

Prasyarat

Sebelum menginstal TestSprite MCP Server, pastikan Anda memiliki:

  1. IDE yang Kompatibel — Trae, Cursor, Claude Code, Windsurf, VS Code, atau GitHub Copilot
  2. Akun TestSprite — Daftar gratis
  3. Node.js >= 22 — Unduh Node.js (wajib untuk menjalankan MCP server)

Cek versi Node.js Anda:

node --version
Enter fullscreen mode Exit fullscreen mode

Langkah 1: Dapatkan API Key

  1. Masuk ke TestSprite Dashboard
  2. Buka API Keys di bawah menu Settings
  3. Klik "New API Key"
  4. Salin API key Anda — Anda akan membutuhkannya saat instalasi

Langkah 2: Instalasi MCP Server

Ikuti instruksi sesuai IDE yang Anda gunakan:

Cursor (Instalasi Manual)

  1. Buka Cursor Settings (Cmd/Ctrl + Shift + J)
  2. Navigasi ke Tools & Integration
  3. Klik Add custom MCP
  4. Tambahkan konfigurasi berikut: 
{
  "mcpServers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "api-key-anda"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Penting: Mode "Run in Sandbox" bawaan Cursor dapat membatasi fungsionalitas TestSprite. Ubah pengaturan ke Chat → Auto-Run → Run Everything agar semuanya berjalan dengan baik.

VS Code

  1. Buka Command Palette (Cmd/Ctrl + Shift + P)
  2. Jalankan perintah MCP: Add Server
  3. Pilih Command (stdio) sebagai tipe instalasi
  4. Ketik npx @testsprite/testsprite-mcp@latest
  5. Beri nama server: TestSprite
  6. Tambahkan konfigurasi env: 
{
  "servers": {
    "testsprite": {
      "command": "npx",
      "args": ["-y", "@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "api-key-anda"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Claude Code 

cd /path/ke/proyek-anda
claude mcp add TestSprite --env API_KEY=api_key_anda -- npx @testsprite/testsprite-mcp@latest
Enter fullscreen mode Exit fullscreen mode

Verifikasi instalasi:

claude mcp list
# Output yang diharapkan:
# TestSprite: npx @testsprite/testsprite-mcp@latest - ✓ Connected
Enter fullscreen mode Exit fullscreen mode

IDE Lainnya (Trae, Antigravity, dll.)

Tambahkan konfigurasi berikut ke pengaturan MCP IDE Anda:

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

Langkah 3: Verifikasi Instalasi

Tanda-tanda instalasi berhasil:

  • Asisten AI Anda dapat melihat tools TestSprite MCP
  • Tidak ada error "command not found"
  • Siap untuk mulai menguji proyek Anda

Coba prompt berikut di IDE Anda:

Help me test this project with TestSprite.
Enter fullscreen mode Exit fullscreen mode

Asisten Anda seharusnya langsung menawarkan penggunaan tools TestSprite MCP.

Langkah 4: Siapkan Proyek Anda

Pastikan aplikasi Anda sudah berjalan secara lokal:

# Untuk aplikasi frontend (contoh)
npm run dev          # Biasanya di port 3000, 5173, atau 8080

# Untuk aplikasi backend (contoh)
node index.js        # Biasanya di port 8000, 3001, atau 4000
Enter fullscreen mode Exit fullscreen mode

Contoh struktur proyek:

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

Langkah 5: Jalankan Tes Pertama

  1. Buka jendela chat baru di IDE Anda
  2. Ketik perintah ajaib: 
Can you test this project with TestSprite?
Enter fullscreen mode Exit fullscreen mode
  1. Seret dan lepas folder proyek ke chat jika ingin menguji sub-proyek tertentu
  2. Tekan Shift + Enter

Asisten AI Anda akan mengambil alih dan memandu seluruh proses pengujian!

Langkah 6: Konfigurasi Pengujian

Halaman Testing Configuration akan terbuka di browser Anda. Isi konfigurasi berikut:

1. Tipe Pengujian

Tipe Deskripsi
Frontend Uji UI dan alur pengguna (tombol, form, navigasi)
Backend Uji API, layanan, atau logika server

2. Cakupan (Scope)

Cakupan Deskripsi
Codebase Jalankan tes pada seluruh proyek
Code Diff Jalankan tes hanya pada perubahan terbaru (Git uncommitted)

3. Kredensial Akun Tes

Jika aplikasi memerlukan login:

Username: test@example.com
Password: password-tes-anda
Enter fullscreen mode Exit fullscreen mode

Untuk backend, pilih tipe autentikasi: Basic, Bearer, API-key, atau None.

4. URL Aplikasi 

Frontend: http://localhost:5173
Backend: http://localhost:4000
Enter fullscreen mode Exit fullscreen mode

5. Product Requirements Document (PRD)

Unggah PRD yang ada (wajib). Bahkan draft atau PRD berkualitas rendah pun tidak masalah — AI TestSprite akan menghasilkan PRD yang dinormalisasi berdasarkan unggahan Anda.

Langkah 7: Tinjau Hasil Tes

Setelah pengujian selesai, file-file berikut akan tersimpan di proyek Anda:

testsprite_tests/
├── tmp/
│   ├── prd_files/                 # File PRD yang diunggah
│   ├── config.json               # Konfigurasi tes
│   ├── code_summary.json         # Analisis kode
│   └── test_results.json         # Hasil tes lengkap
├── standard_prd.json             # PRD yang dinormalisasi
├── TestSprite_MCP_Test_Report.md # Laporan dalam format Markdown
├── TestSprite_MCP_Test_Report.html # Laporan dalam format HTML
├── TC001_Login_Success_with_Valid_Credentials.py
├── TC002_Login_Failure_with_Invalid_Credentials.py
└── ...                           # File tes tambahan
Enter fullscreen mode Exit fullscreen mode

Laporan tes menampilkan: total cakupan, tingkat kelulusan, tes yang gagal beserta analisis kegagalan detail, dan kategori (Fungsional, UI/UX, Keamanan, Performa).

Contoh Ringkasan Laporan 

{
  "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": "Tambahkan tombol hapus yang hilang di panel admin"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Langkah 8: Perbaikan Bug Otomatis

Setelah meninjau hasil tes, cukup minta:

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

AI akan:

  1. Menganalisis tes yang gagal
  2. Mengidentifikasi bagian kode bermasalah
  3. Menerapkan perbaikan secara otomatis
  4. Menjalankan ulang tes untuk verifikasi
  5. Melakukan iterasi hingga semua masalah terselesaikan

Tips untuk Hasil Terbaik

  • Pastikan aplikasi berjalan — Frontend dan backend harus dapat diakses di port standar
  • Struktur proyek yang jelas — Sertakan README dengan instruksi setup dan nama folder yang deskriptif
  • Kredensial tes yang siap — Siapkan akun pengguna tes dengan data non-produksi
  • Tinjau file yang dihasilkan — Periksa PRD dan rencana tes yang dihasilkan untuk akurasi

Copot Pemasangan

Untuk menghapus TestSprite MCP Server:

  1. Hapus konfigurasi dari pengaturan MCP IDE Anda
  2. Restart IDE Anda

Langkah Selanjutnya

Selamat! Anda telah berhasil menjalankan tes otomatis pertama dengan TestSprite MCP Server.

Top comments (0)