DEV Community

asta jui
asta jui

Posted on

Panduan Lengkap TestSprite MCP Server: Cara Mulai Testing Otomatis dalam 10 Menit

#testsprite #testing #ai #indonesia

Panduan Lengkap TestSprite MCP Server: Cara Mulai Testing Otomatis dalam 10 Menit

Terjemahan resmi dokumentasi TestSprite ke Bahasa Indonesia — untuk developer Indonesia yang ingin mulai automated testing tanpa ribet.

Sumber asli: https://docs.testsprite.com

Apa itu TestSprite?

TestSprite adalah agen testing software berbasis AI yang dirancang untuk pengujian penuh secara otomatis (fully autonomous testing). Dengan AI tanpa kode (no-code AI), siklus pengujian diselesaikan dalam 10–20 menit — sehingga kamu bisa merilis produk dengan percaya diri tanpa perlu pekerjaan QA manual.

TestSprite MCP Server adalah integrasi Model Context Protocol (MCP) — standar open-source untuk menghubungkan aplikasi AI dengan sistem eksternal — yang memungkinkan asisten AI di IDE-mu mengatur seluruh alur kerja TestSprite langsung dari editor.

Gambaran Umum: Apa yang Bisa Dilakukan TestSprite MCP?

TestSprite MCP Server menghubungkan asisten AI di IDE-mu (seperti Cursor atau Windsurf) dengan mesin testing cerdas TestSprite. Hasilnya: alur kerja testing yang sepenuhnya otomatis langsung di dalam lingkungan pengembanganmu.

Cara Kerjanya

Setelah menginstal TestSprite MCP di IDE-mu, gunakan prompt bahasa alami sederhana untuk membiarkan agen testing AI menangani seluruh alur kerja pengujian:

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

Asisten AI-mu akan mengambil alih selebihnya.

8 Langkah TestSprite Bekerja di Balik Layar

  1. Membaca PRD Pengguna — Memahami kebutuhan dan tujuan produkmu
  2. Menganalisis Kode — Memindai struktur proyek, fitur, dan implementasi
  3. Membuat TestSprite PRD — Membuat dokumen kebutuhan produk yang ternormalisasi
  4. Membuat Rencana Pengujian — Menghasilkan kasus uji komprehensif berdasarkan PRD dan kode
  5. Membuat Kode Pengujian — Membuat skrip pengujian yang dapat dieksekusi (Playwright, Cypress, dll.)
  6. Menjalankan Pengujian — Menjalankan tes di lingkungan cloud yang aman
  7. Memberikan Hasil — Menyajikan laporan terperinci dengan wawasan yang dapat ditindaklanjuti
  8. Memungkinkan Perbaikan — IDE menggunakan analisis untuk menambal masalah secara otomatis

Manfaat Utama

Untuk Developer

  • Rilis lebih cepat dengan nol penulisan tes (zero test writing)
  • Dapatkan umpan balik dalam menit, bukan jam
  • Perbaiki masalah secara otomatis dengan analisis bertenaga AI
  • Semua ini tanpa meninggalkan IDE-mu

Untuk Tim

  • Capai kualitas yang dapat diprediksi dan rilis yang lebih cepat
  • Cakupan yang luas dan konsisten — termasuk kasus tepi (edge cases)
  • Kurangi tenaga QA manual dan beban pemeliharaan tes

TestSprite vs. Pendekatan Testing Tradisional

Fitur Testing Tradisional TestSprite MCP Server
Pembuatan kasus uji Menulis kasus uji secara manual AI menghasilkan kasus uji otomatis
Setup Menyiapkan framework kompleks Hampir tidak perlu setup
Debugging Debug kegagalan secara manual Menganalisis dan memperbaiki masalah untukmu
Integrasi Menjalankan tes terpisah dari development Terintegrasi ke alur koding-mu
Cakupan Cakupan terbatas, melewatkan kasus tepi Cakupan otomatis yang komprehensif

Kemampuan Testing

TestSprite MCP Server mendukung testing komprehensif untuk aplikasi frontend maupun backend.

Frontend Testing (Business-Flow E2E)

  • Navigasi Perjalanan Pengguna (User Journey)
  • Alur Form & Validasi
  • Status Visual & Tata Letak
  • Komponen Interaktif & UI Stateful
  • Alur Otorisasi & Autentikasi
  • Penanganan Error (UI)

Backend Testing (API & Integrasi)

  • Alur API Fungsional
  • Validasi Kontrak & Skema
  • Penanganan Error & Ketahanan
  • Otorisasi & Autentikasi
  • Kasus Batas & Tepi
  • Integritas Data & Persistensi
  • Pengujian Keamanan

Teknologi yang Didukung

Framework Frontend

  • React, Vue, Angular, Svelte
  • Next.js, Vite
  • Vanilla JavaScript/TypeScript

Teknologi Backend

  • Node.js, Python, Java, Go
  • Express.js, FastAPI, Spring Boot
  • REST APIs, GraphQL

Hasil Nyata

  • 90%+ Kualitas Kode — Capai kualitas kode tingkat profesional
  • Testing 10x Lebih Cepat — Dari jam menjadi menit
  • Nol Kurva Belajar — Tidak perlu keahlian testing
  • Perbaikan Bug Otomatis — AI menambal masalah secara otomatis

Instalasi TestSprite MCP Server

Jalankan TestSprite MCP Server di IDE-mu dalam waktu kurang dari 2 menit.

Prasyarat

Sebelum menginstal, pastikan kamu memiliki:

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

Periksa versi Node.js dengan menjalankan:

node --version
Enter fullscreen mode Exit fullscreen mode

Dapatkan API Key

Pertama, kamu perlu API key TestSprite:

  1. Masuk ke TestSprite Dashboard
  2. Buka API Keys di bawah Settings
  3. Klik "New API Key"
  4. Salin API key-mu (kamu akan membutuhkannya untuk instalasi)

Instalasi per IDE

Cursor

Penting: Mode "Run in Sandbox" default Cursor membatasi fungsionalitas TestSprite. Ikuti konfigurasi di bawah untuk setup penuh.

Instalasi Satu Klik (Termudah):

  1. Dapatkan API key-mu
  2. Klik tautan instalasi satu klik ini
  3. Masukkan API key-mu di Cursor
  4. Mulai testing

Instalasi Manual:

  1. Buka Cursor Settings (⌘⇧J)
  2. Buka 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-kamu"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Konfigurasi Cursor Sandbox Mode:

  1. Buka Cursor → Settings → Cursor Settings
  2. Buka Chat → Auto-Run → Auto-Run Mode
  3. Ubah pengaturan ke "Ask Everytime" atau "Run Everything"

VS Code

  1. Buka Command Palette (⌘⇧P)
  2. Jalankan perintah MCP: Add Server
  3. Pilih tipe instalasi Command (stdio)
  4. Ketik npx @testsprite/testsprite-mcp@latest untuk Command to run
  5. Ketik TestSprite sebagai nama server MCP
  6. Pilih cakupan konfigurasi
  7. Tambahkan konfigurasi env: 
{
  "servers": {
    "testsprite": {
      "command": "npx",
      "args": ["-y", "@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "api-key-kamu"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Claude Code

  1. Navigasi ke direktori proyekmu di terminal: 
cd /path/to/your/project
Enter fullscreen mode Exit fullscreen mode
  1. Tempel perintah instalasi ke terminal: 
claude mcp add TestSprite --env API_KEY=api_key_kamu -- npx @testsprite/testsprite-mcp@latest
Enter fullscreen mode Exit fullscreen mode
  1. Ganti api_key_kamu dengan API key TestSprite aktual
  2. Verifikasi instalasi dengan: 
claude mcp list
Enter fullscreen mode Exit fullscreen mode

Kamu seharusnya melihat:

TestSprite: npx @testsprite/testsprite-mcp@latest - ✓ Connected
Enter fullscreen mode Exit fullscreen mode

Catatan: Menginstal dengan cara ini hanya menambahkan TestSprite ke Claude Code di direktori proyek saat ini. Untuk proyek lain, perlu instalasi ulang.

IDE Lainnya (Trae, Windsurf, Antigravity, dll.)

Tambahkan konfigurasi ini ke pengaturan MCP-mu:

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

Verifikasi Instalasi

Instalasi berhasil jika:

  • Asisten AI-mu dapat melihat TestSprite MCP tools
  • Tidak ada error "command not found"
  • Siap untuk mulai testing

Coba prompt ini:

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

Asisten-mu seharusnya menawarkan penggunaan TestSprite MCP tools.

Tes Pertamamu dengan MCP — Panduan Langkah demi Langkah

Selesaikan tes otomatis pertamamu dalam waktu kurang dari 10 menit.

Di akhir panduan ini, kamu akan sudah:

  • Menjalankan test suite otomatis pertamamu
  • Melihat AI menghasilkan rencana pengujian komprehensif
  • Menyaksikan tes dieksekusi di cloud
  • Menerima laporan tes terperinci
  • Menerapkan perbaikan bug otomatis

Langkah 1: Siapkan Proyekmu

Pastikan aplikasimu berjalan secara lokal:

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

# Untuk aplikasi backend (contoh)
node index.js        # Biasanya berjalan 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 2: Perintah Ajaib

Buka chat IDE-mu dan ikuti langkah-langkah ini:

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

Itu saja! Asisten AI-mu sekarang akan mengambil alih dan membimbingmu melalui seluruh proses pengujian.

Langkah 3: Konfigurasi Pengujian (Wajib)

Halaman Konfigurasi Pengujian akan terbuka di browsermu. Selesaikan setup di sini untuk melanjutkan tes.

Saat halaman bootstrap terbuka, konfigurasi:

1. Tipe Testing

Mode:

  • Frontend: Pilih ini jika ingin menguji UI dan alur pengguna (misal: tombol, form, navigasi)
  • Backend: Pilih ini jika ingin menguji API, layanan, atau logika server

Cakupan (Scope):

  • Codebase: Menjalankan tes terhadap seluruh proyek. Gunakan ini jika ingin sweep tes penuh atau belum pernah menjalankan MCP sebelumnya
  • Code Diff: Hanya menjalankan tes terhadap perubahan terbaru (perubahan Git yang belum di-commit). Gunakan untuk memvalidasi pekerjaan baru dengan cepat tanpa menguji segalanya lagi

2. Kredensial Akun Tes

Jika aplikasimu memerlukan login:

Frontend:

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

Backend — Pilih tipe autentikasi:

Tipe Autentikasi Deskripsi
Basic Menggunakan username & password
Bearer Autentikasi berbasis token yang aman
API-key Menggunakan API key unik untuk akses
None Tidak diperlukan autentikasi

3. URL Aplikasi 

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

4. Product Requirements Document (PRD)

Upload PRD yang ada (wajib). Bahkan draf atau PRD berkualitas rendah pun tidak apa-apa. AI TestSprite akan menghasilkan PRD yang ternormalisasi berdasarkan uploadmu.

Langkah 4: Alur Kerja Otomatis

Asisten AI-mu akan secara otomatis menangani seluruh proses pengujian — mulai dari memahami proyekmu hingga menjalankan tes aktual. Kamu tidak perlu melakukan pekerjaan apapun secara manual.

Langkah 5: Tinjau Hasil Tes

Setelah pengujian, kamu akan menemukan file-file ini di proyekmu:

testsprite_tests/
├── tmp/
│   ├── prd_files/                 # File PRD yang diupload
│   ├── config.json                # Konfigurasi tes
│   ├── code_summary.json          # Analisis kode
│   ├── report_prompt.json         # Data analisis AI
│   └── test_results.json          # Hasil tes terperinci
├── standard_prd.json              # PRD ternormalisasi
├── TestSprite_MCP_Test_Report.md  # Laporan yang dapat dibaca manusia
├── TestSprite_MCP_Test_Report.html # Laporan HTML
├── TC001_Login_Success.py
├── TC002_Login_Failure.py
└── ...                            # File tes tambahan
Enter fullscreen mode Exit fullscreen mode

Laporan tes menampilkan: cakupan keseluruhan, tingkat kelulusan, tes yang gagal dengan analisis kegagalan terperinci, dan kategori (Fungsional, UI/UX, Keamanan, Performa).

Langkah 6: 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 menganalisis tes yang gagal, mengidentifikasi bagian kode bermasalah, menerapkan perbaikan yang ditargetkan secara otomatis, menjalankan ulang tes untuk memverifikasi perbaikan, dan beriterasi hingga masalah terselesaikan.

Contoh Output

Rencana Tes yang Dihasilkan 

{
  "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"
      ]
    }
    // ... 17 kasus tes lainnya
  ]
}
Enter fullscreen mode Exit fullscreen mode

Ringkasan Laporan Tes 

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

Konsep Kunci TestSprite

Generate vs. Regenerate

Generate — Membuat tes untuk pertama kali berdasarkan PRD dan proyekmu.

Kapan menggunakannya:

  • Memulai dengan proyek baru
  • Menambahkan tes ke proyek yang sudah ada tanpa tes
  • Membuat cakupan tes awal

Regenerate — Membuat ulang tes dari awal berdasarkan PRD dan kode yang diperbarui.

Kapan menggunakannya:

  • Aplikasimu berubah secara signifikan (fitur baru, alur yang di-refactor)
  • Rencana tes perlu diperbarui agar sesuai kebutuhan baru
  • Ingin cakupan tes segar yang mencerminkan kondisi saat ini 
# Prompt untuk regenerate
Regenerate tests for the updated checkout flow.
Enter fullscreen mode Exit fullscreen mode

Run vs. Rerun

Run — Menjalankan tes yang baru dihasilkan untuk pertama kali.

Rerun — Menjalankan tes yang sebelumnya dihasilkan lagi tanpa mengubahnya.

# Prompt untuk rerun
Rerun the login and checkout tests with TestSprite.
Enter fullscreen mode Exit fullscreen mode

Healing (Penyembuhan Otomatis)

Healing adalah perbaikan otomatis atau semi-otomatis pada tes yang rapuh karena perubahan non-fungsional (bukan bug nyata), membuat tes lebih tangguh tanpa menyembunyikan masalah produk aktual.

Alur kerja Healing:

  1. Detect (Deteksi) — TestSprite mengidentifikasi kerapuhan tes
  2. Classify (Klasifikasi) — Menentukan apakah itu pergeseran selektor, mismatch timing, masalah env, atau pelanggaran kontrak
  3. Propose Fix (Usulkan Perbaikan) — Menghasilkan perbaikan aman
  4. Apply (Terapkan) — Otomatis diterapkan jika risiko rendah, atau meminta persetujuan untuk perubahan besar
  5. Verify (Verifikasi) — Menjalankan ulang tes untuk memvalidasi perbaikan

Skenario Healing Umum:

  • Selektor UI — Memperbarui ketika ID/kelas elemen berubah (misal: #login-btn → [data-testid="login"])
  • Masalah Timing — Menyesuaikan penantian untuk komponen yang lambat
  • Data Tes — Memperbarui fixture ketika skema data berubah
  • Lingkungan — Memperbaiki mismatch port, kredensial yang hilang
  • Kontrak API — Memperketat pernyataan skema agar sesuai respons API aktual
Yang BUKAN Healing Yang Healing
Menyembunyikan bug produk nyata Membuat tes tangguh terhadap perubahan non-fungsional
Membuat tes lulus padahal seharusnya gagal Mengurangi pekerjaan pemeliharaan tes

Test Scope (Cakupan Tes)

Mendefinisikan bagian mana dari codebase-mu yang akan dianalisis dan diuji TestSprite.

Fitur Codebase Code Diff
Apa yang diuji Menguji seluruh proyek Menguji hanya file/fitur yang berubah (berdasarkan git diff)
Kasus penggunaan Proyek baru, rilis besar, audit komprehensif Branch fitur, development bertahap, validasi cepat
Kecepatan Membutuhkan waktu lebih lama Umpan balik cepat
Cakupan Cakupan penuh Hanya perubahan terbaru

PRD & Normalized PRD

TestSprite menggunakan Product Requirements Documents (PRD) untuk memahami proyekmu dan menghasilkan tes yang tepat.

PRD — Dokumentasi aslimu yang mendeskripsikan apa yang harus dilakukan produkmu. Bisa berupa:

  • Catatan informal atau README
  • Dokumen spesifikasi formal
  • Tiket Jira atau user stories
  • Dokumen desain atau wiki

Normalized PRD — Format PRD standar TestSprite yang memastikan pembuatan tes yang konsisten dan lancar terlepas dari gaya PRD aslimu.

Berisi:

  • Gambaran umum dan tujuan produk
  • Fitur inti dengan kriteria penerimaan
  • Alur pengguna dan aturan validasi
  • Konteks teknis dari analisis kode

Test Plan (Rencana Tes)

Daftar terstruktur kasus uji yang dihasilkan TestSprite berdasarkan Normalized PRD dan analisis kode.

{
  "id": "TC001",
  "title": "Login with valid credentials",
  "category": "functional",
  "priority": "High",
  "steps": [...]
}
Enter fullscreen mode Exit fullscreen mode

Berisi: ID kasus uji (TC001, TC002, dll.), deskripsi dan langkah, kategori (fungsional, keamanan, UI, dll.), prioritas (Tinggi, Sedang, Rendah), hasil yang diharapkan.

Tips untuk Sukses

  1. Pastikan Aplikasi Berjalan — Frontend dan backend harus dapat diakses di port standar
  2. Struktur Proyek yang Baik — Sertakan README dengan instruksi setup dan nama folder yang deskriptif
  3. Kredensial Tes — Siapkan akun pengguna tes dengan data non-produksi
  4. Tinjau File yang Dihasilkan — Periksa akurasi PRD dan rencana tes yang dihasilkan

Langkah Selanjutnya

Sekarang kamu sudah mengerti dasar-dasar TestSprite MCP Server! Berikut sumber daya tambahan:

Artikel ini adalah terjemahan resmi dokumentasi TestSprite ke Bahasa Indonesia. Seluruh blok kode, nama variabel, dan nama perintah dipertahankan dalam bahasa aslinya (Inggris) sesuai konvensi teknis.

Tags: testsprite, testing, automation, mcp, ai, bahasa-indonesia, developer-indonesia

Top comments (0)