Panduan Lengkap TestSprite MCP Server: Instalasi hingga Tes Pertama (Bahasa Indonesia)

Panduan Lengkap TestSprite MCP Server: Mulai dari Instalasi hingga Tes Pertama Anda (Bahasa Indonesia)

Catatan Penerjemah: Dokumen ini adalah terjemahan resmi panduan Getting Started TestSprite MCP Server dari docs.testsprite.com. Semua nama variabel, perintah kode, dan nama fungsi dibiarkan dalam bahasa aslinya sesuai ketentuan teknis.

---

Apa Itu TestSprite?

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

TestSprite MCP Server adalah integrasi Model Context Protocol (MCP) — standar open-source untuk menghubungkan aplikasi AI ke sistem eksternal — yang memungkinkan asisten AI di IDE Anda (seperti Cursor atau Windsurf) mengatur seluruh alur kerja pengujian TestSprite langsung dari editor Anda.

Manfaat Utama

• Untuk Developer: Rilis lebih cepat dengan zero penulisan tes, dapatkan umpan balik dalam hitungan menit (bukan jam), dan perbaiki masalah secara otomatis dengan analisis bertenaga AI — semua tanpa meninggalkan IDE Anda.
• Untuk Tim: Capai kualitas yang dapat diprediksi dan rilis lebih cepat dengan cakupan yang luas dan konsisten — termasuk edge cases — sambil mengurangi upaya QA manual dan overhead pemeliharaan tes.

Perbandingan dengan Pengujian Tradisional

Fitur	Pengujian Tradisional	TestSprite MCP Server
Pembuatan test case	Menulis test case secara manual	AI menghasilkan test case secara otomatis
Pengaturan	Menyiapkan framework yang kompleks	Hampir zero setup yang diperlukan
Debugging	Men-debug kegagalan secara manual	Menganalisis dan memperbaiki masalah untuk Anda
Integrasi	Menjalankan tes terpisah dari pengembangan	Terintegrasi ke dalam alur kerja coding Anda
Cakupan	Cakupan terbatas yang melewatkan edge cases kritis	Cakupan otomatis yang komprehensif

Kapabilitas Pengujian

Frontend Testing (Business-Flow E2E):

• Navigasi User Journey
• Alur & Validasi Form
• Status Visual & Layout
• Komponen Interaktif & UI Stateful
• Alur Otorisasi & Auth
• Penanganan Error (UI)

Backend Testing (API & Integration):

• Alur Kerja API Fungsional
• Validasi Contract & Schema
• Penanganan Error & Ketahanan
• Otorisasi & Autentikasi
• Kasus Batas & Edge Cases
• Integritas Data & Persistensi
• Pengujian Keamanan

Teknologi yang Didukung

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

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

---

Instalasi TestSprite MCP Server

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 — Download Node.js (diperlukan untuk menjalankan MCP server)

Untuk memeriksa versi Node.js Anda:

node --version

Langkah 1: Dapatkan API Key Anda

Pertama, Anda memerlukan API key TestSprite:

1. Masuk ke TestSprite Dashboard
2. Navigasi ke API Keys di bawah Settings
3. Klik "New API Key"
4. Salin API key Anda (Anda membutuhkannya untuk instalasi)

Langkah 2: Instalasi di IDE Anda

Untuk Pengguna Cursor

Instalasi Satu Klik (paling mudah):

1. Dapatkan API key Anda (lihat langkah di atas)
2. Klik tautan instalasi satu klik ini
3. Masukkan API key Anda di Cursor
4. Mulai pengujian

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-di-sini"
      }
    }
  }
}

⚠️ Perhatian untuk Cursor: Mode "Run in Sandbox" default Cursor membatasi fungsionalitas TestSprite. Untuk memastikan fungsionalitas penuh, pergi ke Cursor → Settings → Chat → Auto-Run → Auto-Run Mode dan ubah pengaturan ke "Ask Everytime" atau "Run Everything".

Untuk Pengguna Trae

1. Dapatkan API key Anda
2. Di Trae, navigasi ke AI Sidebar > AI Management
3. Pilih MCP > Add > Add from Marketplace
4. Cari TestSprite dan tambahkan ke daftar MCP Anda
5. Masukkan API key Anda di Trae dan klik Confirm
6. Pilih Builder with MCP dan mulai pengujian

Untuk Pengguna Claude Code

1. Navigasi ke direktori proyek Anda di terminal:

cd /path/ke/proyek-anda

1. Tempel perintah instalasi berikut:

claude mcp add TestSprite --env API_KEY=api-key-anda -- npx @testsprite/testsprite-mcp@latest

Untuk Pengguna VS Code

Tambahkan konfigurasi berikut ke file .vscode/mcp.json Anda:

{
  "servers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "api-key-anda-di-sini"
      }
    }
  }
}

Langkah 3: Verifikasi Instalasi

Setelah instalasi, pastikan:

• Asisten AI Anda dapat melihat tools TestSprite MCP
• Tidak ada error "command not found"
• Titik hijau muncul pada ikon server TestSprite MCP di IDE Anda

Coba prompt berikut untuk memverifikasi:

Help me test this project with TestSprite.

Asisten Anda seharusnya menawarkan untuk menggunakan tools TestSprite MCP.

---

Menjalankan Tes MCP Pertama Anda

Langkah 1: Siapkan Proyek Anda

Pastikan aplikasi Anda 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

Contoh struktur proyek:

proyek-saya/
├── frontend/          # React, Vue, Angular, dll.
│   ├── src/
│   ├── package.json
│   └── ...
├── backend/           # Node.js, Python, dll.
│   ├── app.py
│   ├── requirements.txt
│   └── ...
├── README.md
└── package.json

Langkah 2: Perintah Ajaib

Buka chat IDE Anda dan ikuti langkah-langkah ini:

1. Buka jendela chat baru di IDE Anda
2. Ketik perintah ajaib:

Can you test this project with TestSprite?

1. Seret dan lepas folder proyek Anda ke dalam chat jika ingin menguji sub-proyek tertentu
2. Tekan Shift + Enter

Itu saja! Asisten AI Anda sekarang akan mengambil alih dan memandu Anda melalui seluruh proses pengujian.

Langkah 3: Konfigurasi (Wajib)

Saat alat bootstrap terbuka, Anda harus mengonfigurasi:

1. Tipe Pengujian

• Frontend: Pilih ini jika Anda ingin menguji UI dan alur pengguna (misalnya tombol, formulir, navigasi)
• Backend: Pilih ini jika ingin menguji API, layanan, atau logika server
• Codebase: Menjalankan tes terhadap seluruh proyek — gunakan ini untuk pemindaian tes penuh
• Code Diff: Hanya menjalankan tes terhadap perubahan terbaru Anda (perubahan Git yang tidak di-commit)

2. Kredensial Akun Tes (jika aplikasi Anda memerlukan login):

Contoh untuk frontend:

Username: [e-mail]
Password: password-tes-anda

Jenis autentikasi backend yang didukung:

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

3. URL Aplikasi:

Frontend: http://localhost:5173
Backend: http://localhost:4000

4. Product Requirements Document (PRD):
Upload PRD yang ada (wajib). Bahkan draft atau PRD kualitas rendah pun tidak masalah — AI TestSprite akan menghasilkan PRD yang dinormalisasi berdasarkan upload Anda.

Langkah 4: Alur Kerja Otomatis (8 Langkah)

Setelah konfigurasi, TestSprite mengikuti proses sistematis 8 langkah:

Langkah 1 — Bootstrap Testing Environment

AI memanggil testsprite_bootstrap_tests untuk menginisialisasi lingkungan pengujian:

• Deteksi Proyek: Mengidentifikasi tipe proyek (frontend atau backend)
• Penemuan Port: Menemukan aplikasi yang berjalan dan port mereka
• Portal Konfigurasi: Membuka antarmuka konfigurasi TestSprite
• Definisi Cakupan: Menentukan cakupan pengujian

testsprite_bootstrap_tests({
  localPort: 5173, // atau port Anda
  type: "frontend", // atau "backend"
  projectPath: "/path/absolut/ke/proyek-anda",
  testScope: "codebase" // uji seluruh proyek
})

Langkah 2 — Baca User PRD

TestSprite membaca PRD yang Anda upload untuk memahami tujuan dan persyaratan produk Anda:

• Upload PRD: Membaca file PRD yang Anda upload selama konfigurasi
• Parsing Persyaratan: Mengekstrak user stories, kriteria penerimaan, dan persyaratan fungsional
• Pemahaman Tujuan: Mengidentifikasi tujuan produk utama dan kebutuhan pengguna

Langkah 3 — Analisis Kode & Ringkasan

AI memanggil testsprite_generate_code_summary untuk menganalisis codebase Anda:

• Pemetaan Struktur: Mengidentifikasi file, folder, dan dependensi
• Deteksi Framework: Mengenali React, Vue, Angular, Node.js, dll.
• Ekstraksi Fitur: Memahami fungsionalitas yang diimplementasikan
• Analisis Arsitektur: Memetakan hubungan komponen
• Penilaian Keamanan: Mengidentifikasi potensi kerentanan

testsprite_generate_code_summary({
  projectRootPath: "/path/absolut/ke/proyek-anda"
})

Langkah 4 — Hasilkan TestSprite Normalized PRD

AI memanggil testsprite_generate_standardized_prd untuk membuat PRD yang dinormalisasi dan terstandarisasi. Format PRD dinormalisasi ini adalah inovasi TestSprite — struktur terstandarisasi yang memastikan pembuatan tes yang konsisten di seluruh jenis proyek, terlepas dari format PRD asli Anda.

testsprite_generate_standardized_prd({
  projectPath: "/path/absolut/ke/proyek-anda"
})

Langkah 5 — Buat Test Plans

AI memanggil testsprite_generate_frontend_test_plan atau testsprite_generate_backend_test_plan berdasarkan tipe proyek:

// Untuk frontend (UI/Business Flows)
testsprite_generate_frontend_test_plan({
  projectPath: "/path/absolut/ke/proyek-anda",
  needLogin: true
})

// Untuk backend (API/Integration)
testsprite_generate_backend_test_plan({
  projectPath: "/path/absolut/ke/proyek-anda"
})

Komponen Test Plan:

• Test Cases: Skenario terperinci dengan langkah-langkah
• Kategori: Fungsional, UI/UX, Keamanan, Performa
• Prioritas: Tinggi, Sedang, Rendah berdasarkan dampak pengguna
• Prasyarat: Persyaratan setup untuk setiap tes
• Hasil yang Diharapkan: Kriteria sukses dan poin validasi

Langkah 6 — Hasilkan Kode Tes yang Dapat Dijalankan

AI memanggil testsprite_generate_code_and_execute untuk membuat kode tes siap produksi:

testsprite_generate_code_and_execute({
  projectName: "nama-proyek-anda",
  projectPath: "/path/absolut/ke/proyek-anda",
  testIds: [], // kosong = semua tes
  additionalInstruction: "Focus on critical user journeys first"
})

Langkah 7 — Jalankan Tes di Cloud

TestSprite menjalankan kode tes yang dihasilkan di lingkungan cloud yang aman:

• Pembuatan sandbox yang terisolasi
• Instalasi dependensi
• Eksekusi tes
• Pengumpulan hasil, screenshot, log
• Pembuatan laporan komprehensif

Langkah 8 — Analisis Hasil & Laporan

TestSprite menghasilkan laporan tes komprehensif. Setelah pengujian, Anda akan menemukan file-file ini di proyek Anda:

testsprite_tests/
├── tmp/
│   ├── prd_files/                 # File PRD yang di-upload
│   ├── 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 yang dinormalisasi
├── TestSprite_MCP_Test_Report.md # Laporan yang dapat dibaca manusia
├── TestSprite_MCP_Test_Report.html # Laporan HTML
├── TC001_Login_Success_with_Valid_Credentials.py
├── TC002_Login_Failure_with_Invalid_Credentials.py
└── ...                           # File tes tambahan

Contoh 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"
    }
  ]
}

Langkah 5: Perbaikan Bug Otomatis

Setelah meninjau hasil tes, cukup minta:

Please fix the codebase based on TestSprite testing results.

AI akan:

1. Membaca testsprite_tests/tmp/test_results.json untuk data kegagalan terperinci
2. Memproses testsprite_tests/tmp/report_prompt.json untuk konteks
3. Mengidentifikasi akar penyebab masalah
4. Membuat perubahan kode berdasarkan rekomendasi TestSprite
5. Memodifikasi codebase Anda secara otomatis
6. Menjalankan ulang tes untuk memverifikasi perbaikan

Contoh perbaikan yang diterapkan AI secara otomatis:

// Sebelum — Tombol delete yang hilang di panel admin
const AdminProductCard = ({ product, onDelete }) => {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <div className="actions">
        <button className="edit-btn">Edit</button>
        {/* Tombol delete tidak ada, menyebabkan tes gagal */}
      </div>
    </div>
  );
};

// Setelah — AI menambahkan tombol yang hilang
const AdminProductCard = ({ product, onDelete }) => {
  return (
    <div className="product-card">
      <h3>{product.name}</h3>
      <div className="actions">
        <button className="edit-btn">Edit</button>
        {/* AI menambahkan tombol ini untuk memperbaiki tes yang gagal */}
        <button
          id="admin-delete-btn"
          className="delete-btn"
          onClick={() => onDelete(product.id)}
        >
          Delete
        </button>
      </div>
    </div>
  );
};

---

Tips untuk Keberhasilan

Sebelum Pengujian:

• Pastikan semua aplikasi berjalan di port yang ditentukan
• Siapkan kredensial tes untuk alur auth
• Perbarui README dengan deskripsi proyek yang jelas
• Bersihkan artifact pengembangan apa pun

Selama Pengujian:

• Tinjau PRD yang dihasilkan untuk akurasi
• Periksa cakupan test plan
• Pantau kemajuan eksekusi tes
• Catat penyesuaian konfigurasi yang diperlukan

Setelah Pengujian:

• Analisis hasil tes secara menyeluruh
• Pahami pola kegagalan
• Terapkan perbaikan secara sistematis
• Dokumentasikan pelajaran yang dipetik
• Jalankan ulang tes untuk memvalidasi perbaikan

---

Hasil Nyata

TestSprite MCP Server memberikan peningkatan terukur:

• 90%+ Kualitas Kode — Capai kualitas kode tingkat profesional
• 10x Pengujian Lebih Cepat — Dari jam menjadi menit
• Zero Learning Curve — Tidak diperlukan keahlian pengujian
• Perbaikan Bug Otomatis — AI menambal masalah secara otomatis

---

Sumber Daya Tambahan

• Dokumentasi Lengkap: docs.testsprite.com
• Demo & Contoh: MCP Demo Dunia Nyata
• Komunitas Discord: discord.gg/QQB9tJ973e
• GitHub: github.com/wangy44624/docs
• Website: testsprite.com

---

Dokumen ini adalah terjemahan panduan resmi TestSprite MCP Server ke dalam Bahasa Indonesia. Diterjemahkan untuk membantu developer Indonesia memulai pengujian otomatis dengan lebih mudah.