DEV Community

birudubos-a11y
birudubos-a11y

Posted on

TestSprite MCP Server — Panduan Lengkap untuk Developer Indonesia (Terjemahan Resmi)

#testing #indonesia #ai #tutorial

TestSprite MCP Server — Panduan Lengkap untuk Developer Indonesia

Sumber asli: https://docs.testsprite.com
Bahasa: Indonesia | Diterjemahkan untuk developer Indonesia

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

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

Prasyarat

Sebelum memasang TestSprite MCP Server, pastikan Anda memiliki:

  • IDE yang kompatibel — Cursor, Claude Code, Trae, VSCode, atau IDE lainnya
  • Akun TestSprite — Daftar gratis di https://testsprite.com
  • Node.js >= 22 — Unduh di https://nodejs.org (diperlukan untuk menjalankan MCP server)

Cara memeriksa versi Node.js:

node --version
# Pastikan hasilnya v22.0.0 atau lebih baru
Enter fullscreen mode Exit fullscreen mode

Mendapatkan API Key

  1. Masuk ke TestSprite Dashboard di https://app.testsprite.com
  2. Navigasi ke API Keys di bawah menu Settings
  3. Klik "New API Key"
  4. Salin API key Anda

⚠️ Jangan commit API key ke repository publik.

Instalasi per IDE

Cursor

Buka Cursor Settings → MCP, tambahkan konfigurasi berikut:

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

Simpan dan restart Cursor.

Claude Code

Jalankan perintah berikut di terminal:

claude mcp add testsprite -e TESTSPRITE_API_KEY=api-key-anda -- npx -y @testsprite/mcp@latest
Enter fullscreen mode Exit fullscreen mode

VSCode

Tambahkan ke settings.json:

{
  "mcp.servers": {
    "testsprite": {
      "command": "npx",
      "args": ["-y", "@testsprite/mcp@latest"],
      "env": {
        "TESTSPRITE_API_KEY": "api-key-anda-di-sini"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Trae (ByteDance)

  1. Navigasi ke AI Sidebar → AI Management
  2. Pilih MCP → Add → Add from Marketplace
  3. Cari "TestSprite" dan ikuti instruksi

Tes Pertama Anda — 5 Langkah

Langkah 1: Jalankan Aplikasi Lokal 

# Frontend (contoh)
npm run dev          # Port 3000, 5173, atau 8080

# Backend (contoh)
node index.js        # Port 8000, 3001, atau 4000
Enter fullscreen mode Exit fullscreen mode

Contoh struktur proyek:

my-project/
├── frontend/
│   ├── src/
│   ├── package.json
│   └── ...
├── backend/
│   ├── app.py
│   ├── requirements.txt
│   └── ...
└── README.md
Enter fullscreen mode Exit fullscreen mode

Langkah 2: Perintah Ajaib di IDE

Buka chat IDE Anda, ketik:

Bisakah kamu menguji proyek ini dengan TestSprite?
Enter fullscreen mode Exit fullscreen mode

Seret folder proyek ke chat jika perlu, lalu tekan ⇧ Enter. Asisten AI akan mengambil alih.

Langkah 3: Konfigurasi Pengujian

Halaman Konfigurasi Pengujian akan terbuka di browser. Konfigurasikan:

Tipe Pengujian:

  • Frontend — uji UI, tombol, formulir, navigasi
  • Backend — uji API, layanan, logika server

Kredensial Tes (jika aplikasi butuh login):

# Frontend
Username: test@example.com
Password: password-tes-anda

# Backend
API_KEY: test-api-key-anda
BASE_URL: http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

Langkah 4: Jalankan & Tunggu

Klik "Start Testing". TestSprite akan:

  1. Men-deploy cloud sandbox ephemeral untuk pengujian terisolasi
  2. Menganalisis struktur kodebase secara otomatis
  3. Menghasilkan rencana pengujian komprehensif
  4. Menjalankan semua tes di cloud
  5. Mengambil screenshot dan mencatat error

Langkah 5: Tinjau Laporan

Setelah selesai, Anda mendapat:

  • Ringkasan tes — jumlah lulus/gagal
  • Deskripsi bug — detail setiap masalah ditemukan
  • Screenshot — bukti visual bug UI
  • Saran perbaikan — rekomendasi kode dari AI
  • Perbaikan otomatis — opsi biarkan AI memperbaiki langsung

Alur Kerja Inti

Membuat Tes untuk Proyek Baru 

Buat test suite lengkap untuk proyek ini menggunakan TestSprite
Enter fullscreen mode Exit fullscreen mode

Menambahkan Tes untuk Fitur Tertentu 

Tambahkan tes untuk fitur checkout menggunakan TestSprite
Enter fullscreen mode Exit fullscreen mode

Update Tes setelah Perubahan Kode 

Perbarui tes TestSprite untuk perubahan terbaru di komponen Cart
Enter fullscreen mode Exit fullscreen mode

Integrasi GitHub CI/CD 

# .github/workflows/testsprite.yml
name: TestSprite CI

on:
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Run TestSprite Tests
        uses: testsprite/action@v1
        with:
          api-key: ${{ secrets.TESTSPRITE_API_KEY }}
Enter fullscreen mode Exit fullscreen mode

Setiap Pull Request akan otomatis diuji. Laporan dikirim langsung ke PR.

Pemecahan Masalah

npx: command not found 

node --version  # Harus >= v22
npm --version   # Harus terinstal
Enter fullscreen mode Exit fullscreen mode

TESTSPRITE_API_KEY not set

Periksa konfigurasi MCP di IDE — pastikan tidak ada spasi atau karakter tersembunyi di API key.

MCP server tidak terdeteksi di Cursor

  1. Restart Cursor sepenuhnya (bukan reload)
  2. Periksa ~/.cursor/mcp.json — validasi format JSON
  3. Pastikan tidak ada koma berlebih di akhir object

MCP server tidak terdeteksi di Claude Code 

# Verifikasi MCP terdaftar
claude mcp list

# Jika tidak muncul, tambahkan ulang
claude mcp add testsprite -e TESTSPRITE_API_KEY=your-key -- npx -y @testsprite/mcp@latest
Enter fullscreen mode Exit fullscreen mode

TestSprite tidak menemukan aplikasi

  • Pastikan aplikasi berjalan sebelum mulai pengujian
  • Cek port: http://localhost:3000 (frontend) atau http://localhost:8000 (backend)
  • Pastikan firewall tidak memblokir koneksi lokal

Tes timeout

  • Tambah batas waktu di konfigurasi TestSprite
  • Periksa performa aplikasi — respons lambat menyebabkan timeout
  • Gunakan mock data untuk database-heavy operations

Langkah Selanjutnya

  1. Membuat Tes — tes kustom lebih kompleks
  2. Dashboard Progress — pantau semua pengujian
  3. Integrasi GitHub — CI/CD otomatis
  4. Keamanan — praktik terbaik

Sumber Daya

Semua nama variabel, perintah terminal, dan blok kode dibiarkan dalam format aslinya sesuai konvensi pemrograman internasional. Hanya narasi dan label UI yang diterjemahkan.

Top comments (0)