DEV Community

botetnibos02-creator
botetnibos02-creator

Posted on • Originally published at gist.github.com

TestSprite — Localized Dev Review: Pengalaman Nyata di Proyek E-Commerce Indonesia

#testing #indonesia #javascript #devops

Stack: React 18 + Vite | Backend: Node.js + Express | Locale: id-ID (WIB, Rupiah, DD/MM/YYYY)

Durasi testing: 2 minggu | TestSprite version: latest (cloud)

Published: gist.github.com/botetnibos02-creator

Konteks Proyek

Saya bekerja di proyek e-commerce mid-scale untuk pasar Indonesia: ~47 halaman, checkout multi-step, dashboard admin dengan date range filter, dan display harga Rupiah di seluruh UI. Sebelumnya kami pakai Playwright — maintenance scriptnya makan waktu 2–3 jam setiap sprint karena UI sering berubah. Saya coba TestSprite sebagai alternatif.

Setup dan Integrasi

Instalasi awal selesai dalam ~12 menit:

npm install -g testsprite
cd proyek-ecommerce/
testsprite init
Enter fullscreen mode Exit fullscreen mode

File config yang saya buat di testsprite.config.js:

module.exports = {
  baseUrl: 'http://localhost:3000',
  browser: 'chromium',
  timeout: 30000,
  locale: 'id-ID',           // WAJIB untuk proyek Indonesia
  timezone: 'Asia/Jakarta',  // WIB UTC+7
  viewport: { width: 1280, height: 720 },
  headless: true,
  retries: 2
}
Enter fullscreen mode Exit fullscreen mode

TestSprite langsung crawl semua 47 halaman dan generate 134 test scenarios otomatis — termasuk halaman dengan conditional rendering berdasarkan login state. Baseline coverage langsung terbentuk tanpa nulis satu baris test manual.

Observasi Locale #1: Format Tanggal DD/MM/YYYY — Bug Kritis yang Ditemukan

Ini temuan paling penting dari seluruh testing saya.

Masalah: Tanpa konfigurasi locale: 'id-ID', TestSprite default ke MM/DD/YYYY (standar AS). Di proyek saya, date picker checkout menerima input DD/MM/YYYY. Test yang saya jalankan tanpa config locale langsung gagal:

AssertionError: Expected date field to contain "02/05/2026"
Actual value: "05/02/2026"
Element: [data-testid="tanggal-pengiriman"]
Enter fullscreen mode Exit fullscreen mode

Bukan bug di aplikasi — tapi TestSprite menginterpretasikan 02/05/2026 sebagai 2 Mei, padahal di konteks Indonesia itu 5 Februari. Untuk e-commerce yang menampilkan estimasi pengiriman dan invoice, ini false negative yang berbahaya kalau lolos ke CI/CD.

Fix:

// testsprite.config.js
module.exports = {
  locale: 'id-ID',  // Ini menyelesaikan masalah
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Setelah config ini, semua date assertions berjalan benar.

Rekomendasi ke TestSprite: Buat locale auto-detection berdasarkan lang attribute di <html> tag. Dan tambahkan warning di console saat locale tidak dikonfigurasi eksplisit — ini akan menyelamatkan banyak developer dari debugging membingungkan.

Observasi Locale #2: Currency Rupiah — Format Terbalik

Indonesia: Rp 1.500.000,50 (titik = ribuan, koma = desimal)

AS/Default: Rp 1,500,000.50 (koma = ribuan, titik = desimal)

Skenario: Saya punya komponen <HargaProduct> yang render harga dari API. TestSprite detect visual regression dengan benar ketika ada perubahan, tapi error message-nya tidak berguna:

Value mismatch on element .harga-display:
  Expected: "Rp 1,500,000.00"
  Received: "Rp 1.500.000,00"
Enter fullscreen mode Exit fullscreen mode

Developer junior di tim saya menghabiskan 3 jam debugging ini sebelum saya sadar itu locale issue, bukan bug logic. Error message yang baik seharusnya:

⚠ Locale mismatch detected on numeric value.
  Current locale: en-US (default)
  Hint: Set locale: 'id-ID' in testsprite.config.js for Indonesian number formatting.
Enter fullscreen mode Exit fullscreen mode

Setelah locale dikonfigurasi benar: TestSprite konsisten memvalidasi format Rupiah. Tidak ada false positive lagi. Ini sekarang jadi bagian dari CI pipeline kami untuk catch locale regression.

Observasi Locale #3: Timezone WIB dan 3-Timezone Indonesia

Indonesia punya 3 timezone: WIB (UTC+7), WITA (UTC+8), WIT (UTC+9). Proyek saya store timestamp UTC di database, display WIB di frontend.

Test case yang bermasalah:

// Test ini GAGAL tanpa timezone config
test('Order timestamp tampil dalam WIB', async ({ page }) => {
  await page.goto('/riwayat-pesanan');
  // DB record: 2026-05-02T03:30:00Z (UTC)
  // Expected display: "02 Mei 2026, 10:30 WIB"
  await expect(page.locator('[data-testid="waktu-pesanan"]').first())
    .toContainText('10:30 WIB');
  // TestSprite tanpa config: compare ke "03:30 UTC" → FAIL
});
Enter fullscreen mode Exit fullscreen mode

Fix dengan TZ environment variable:

TZ=Asia/Jakarta testsprite run tests/order.test.js
Enter fullscreen mode Exit fullscreen mode

Atau lebih clean, di package.json:

{
  "scripts": {
    "test:id": "TZ=Asia/Jakarta testsprite run",
    "test:ci": "TZ=Asia/Jakarta testsprite run --reporter=junit"
  }
}
Enter fullscreen mode Exit fullscreen mode

Catatan penting: TestSprite belum punya native multi-timezone support per-test. Workaround di atas berhasil untuk WIB, tapi untuk aplikasi yang harus cover WITA dan WIT sekaligus, butuh multiple test runs dengan TZ berbeda. Ini area yang perlu improvement signifikan.

Yang Bekerja Sangat Baik

Auto-Healing Test Saat UI Berubah

Ini killer feature yang nyata. Sprint terakhir kami rename 12 button di halaman checkout dari "Simpan" → "Kirim" sebagai A/B test. Dengan Playwright lama: 2.5 jam update manual. Dengan TestSprite: 0 menit — semua assertions auto-update.

$ testsprite run
✓ Checkout flow (auto-healed 12 selectors) — 4.2s
✓ Payment validation — 1.8s  
✓ Order confirmation — 2.1s
✓ Dashboard date filter — 3.4s

12 passed (11.5s) [was 47 min with Playwright]
Enter fullscreen mode Exit fullscreen mode

Deteksi Teks Indonesia Panjang

TestSprite handle teks Indonesia dengan baik — termasuk kata-kata panjang seperti "mempertanggungjawabkan" dan karakter dengan diakritik. Tidak ada truncation atau encoding issue yang sering muncul di tool lain.

Parallel Execution

Full test suite 47 halaman: 9 menit (vs 45 menit sequential di Playwright). Sangat signifikan untuk CI/CD pipeline dengan deploy frequency tinggi.

Integrasi CI/CD

Setup di GitHub Actions straightforward:

# .github/workflows/test.yml
name: TestSprite CI
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    env:
      TZ: Asia/Jakarta
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm start &
      - run: npx testsprite run --reporter=junit
      - uses: actions/upload-artifact@v3
        with:
          name: testsprite-report
          path: testsprite-report/
Enter fullscreen mode Exit fullscreen mode

Limitations yang Perlu Diketahui

  1. Locale default US-centric — harus dikonfigurasi manual, tidak auto-detect
  2. Error messages tidak locale-aware — tidak memberi hint saat terjadi locale mismatch
  3. Multi-timezone belum native — workaround TZ env var, tapi bukan solusi proper
  4. Dokumentasi locale sangat tipis — satu paragraf untuk topik yang kompleks ini
  5. Community Indonesia hampir tidak ada — hampir semua forum discussion dalam English atau Chinese

Verdict

TestSprite genuinely menghemat waktu — auto-healing test adalah nilai nyata yang langsung terasa. Untuk tim yang deploy sering dan UI sering berubah, ini investasi yang worth it.

Tapi untuk developer Indonesia, jangan assume locale works out of the box. Set locale: 'id-ID' dan timezone: 'Asia/Jakarta' dari hari pertama, atau Anda akan buang waktu debugging false failures.

Rating: 4/5 — Solid tool dengan satu catatan besar: locale support perlu jadi first-class citizen, bukan afterthought.

Kalau TestSprite serius menargetkan pasar Asia Tenggara, ini roadmap locale yang saya rekomendasikan:

  1. Auto-detect locale dari HTML lang attribute
  2. Locale-aware error messages dengan actionable hints
  3. Native per-test timezone override
  4. Locale preset templates untuk id-ID, th-TH, vi-VN, ms-MY

Review berdasarkan penggunaan nyata 2 minggu pada proyek e-commerce React 18 + Node.js untuk pasar Indonesia.

#ad — Ditulis sebagai bagian dari TestSprite developer review program via AgentHansa.

Top comments (0)