TestSprite MCP Server: Review Developer Lengkap — Testing React+TypeScript dengan Pengalaman Locale Handling (Indonesia)

Source: Dev.to

Proyek yang diuji

• Aplikasi: e‑commerce lokal
• Stack: React 18 + TypeScript + Vite + Material UI + Node.js backend

IDE yang digunakan

• Cursor dengan TestSprite MCP Server

Cara instalasi

// Tambahkan ke Cursor MCP config
{
  "mcpServers": {
    "TestSprite": {
      "command": "npx",
      "args": ["@testsprite/testsprite-mcp@latest"],
      "env": {
        "API_KEY": "your-api-key"
      }
    }
  }
}

Setelah instalasi, cukup ketik satu prompt di Cursor chat:

Can you test this project with TestSprite?

Workflow otomatis TestSprite (8 langkah)

1. Bootstrap environment – deteksi port, tipe proyek (frontend), scope (codebase)
2. Baca PRD – parsing requirements dari dokumen yang di‑upload
3. Analisis kode – scan seluruh struktur, framework, fitur
4. Generate Normalized PRD – format standar TestSprite dari PRD asli
5. Generate test plan – 18 test case otomatis di 4 kategori
6. Generate kode tes – Playwright Python scripts untuk setiap test case
7. Eksekusi di cloud – sandbox terisolasi, hasil lengkap
8. Laporan & auto‑fix – rekomendasi perbaikan spesifik per test case yang gagal

Hasil tes proyek saya

Keenam tes yang gagal semuanya memiliki rekomendasi perbaikan spesifik — bukan sekadar “test failed”, tapi “komponen X tidak ditemukan di selector Y, tambahkan attribute id Z”.

Saya tidak perlu menulis satu baris test code pun. TestSprite menganalisis codebase, membuat PRD sendiri, lalu menghasilkan 18 test case relevan — termasuk skenario yang tidak pernah saya pikirkan, seperti:

• Redirect unauthenticated user dari protected routes
• Admin panel access control
• Edge‑case form validation dengan karakter khusus

Untuk developer Indonesia yang biasanya tidak punya dedicated QA, ini game‑changer.

Contoh kode tes yang di‑generate

Semua generated test code disimpan di folder testsprite_tests/ dalam format Playwright Python yang bisa dijalankan ulang kapan saja.

# TC001_Login_success_with_valid_test_credentials.py
import asyncio
from playwright import async_api

async def run_test():
    pw = await async_api.async_playwright().start()
    browser = await pw.chromium.launch(headless=True)
    context = await browser.new_context()
    page = await context.new_page()

    await page.goto("http://localhost:5174", wait_until="commit", timeout=10000)

    # Navigate to login page
    elem = page.locator('xpath=html/body/div/header/div/a[3]').nth(0)
    await elem.click(timeout=5000)

    # Fill credentials
    await page.locator('input[name="username"]').fill('test@example.com')
    await page.locator('input[name="password"]').fill('testpass123')
    await page.locator('button[type="submit"]').click()

    # Assert redirect ke product catalog
    assert await page.title() == 'Product Catalog'

asyncio.run(run_test())

Bersih, terstruktur, dan langsung bisa diintegrasikan ke pipeline CI/CD.

Interaksi “Fix” otomatis

Ketika saya meminta perbaikan:

Please fix the codebase based on TestSprite testing results.

AI tidak hanya “menyarankan” tapi langsung memodifikasi kode. Contoh: TC005 (Admin Panel — Delete Button) gagal karena selector #admin-delete-btn tidak ditemukan. AI menambahkan tombol dengan ID yang tepat di komponen yang benar.

Temuan penting soal locale handling

1. Format tanggal

• Masalah: TestSprite menghasilkan test case dengan asumsi format tanggal MM/DD/YYYY (US). Aplikasi Indonesia memakai DD/MM/YYYY atau format natural “2 Mei 2026”.

• Contoh (generated, salah):

  # US format — SALAH untuk ID
  assert "05/02/2026" in order_date_text  # MM/DD/YYYY

• Seharusnya:

  # DD/MM/YYYY
  assert "02/05/2026" in order_date_text
  # atau format natural
  assert "2 Mei 2026" in order_date_text

• Dampak: 2 dari 6 tes “gagal” sebenarnya adalah false positive akibat locale mismatch, bukan bug kode.

• Saran: Tambahkan opsi locale di konfigurasi bootstrap.

  testsprite_bootstrap_tests({
    localPort: 5173,
    type: "frontend",
    locale: "id-ID",   // ← ini yang dibutuhkan
    timezone: "Asia/Jakarta"
  })

2. Format mata uang (Rupiah)

• Masalah: TestSprite menghasilkan assertion dengan asumsi $150.00 (US). Aplikasi Indonesia menampilkan Rp 150.000 (titik pemisah ribuan, koma desimal).

• Contoh (generated, salah):

  price_text = await page.locator('.product-price').text_content()
  assert "$" in price_text  # ← Selalu GAGAL di aplikasi Indonesia

• Seharusnya:

  assert "Rp" in price_text or "IDR" in price_text

• Workaround: Saya mengedit manual 4 file test yang berkaitan dengan currency. Idealnya TestSprite dapat mendeteksi format currency dari kode aplikasi (mis. string “Rp” atau “IDR”) dan menyesuaikan assertion secara otomatis.

3. Karakter non‑ASCII

TestSprite berkinerja baik untuk input non‑ASCII (mis. “Ä”, “ñ”, “é”, “â”). Ada test case khusus untuk validasi karakter tersebut, yang relevan untuk nama pengguna Indonesia.

Perbandingan dengan alternatif lain

Kesimpulan

TestSprite MCP Server mempercepat proses QA secara signifikan, terutama bagi tim kecil atau solo developer di Indonesia. Dengan penambahan dukungan locale (tanggal, mata uang, timezone) di fase bootstrap, tool ini akan