DEV Community

solomid ledger
solomid ledger

Posted on

TestSprite Quickstart — Panduan Memulai dalam Bahasa Indonesia

#testing #webdev #indonesia #automation

TestSprite Quickstart — Panduan Memulai dalam Bahasa Indonesia

Terjemahan resmi tidak resmi dari docs.testsprite.com/quickstart untuk developer Indonesia.

Apa itu TestSprite?

TestSprite adalah platform pengujian berbasis AI yang secara otomatis men-crawl aplikasi web Anda, membuat test case, dan memperbarui test tersebut saat UI berubah. Dengan TestSprite, Anda tidak perlu menulis test dari awal — cukup arahkan ke aplikasi Anda dan biarkan AI yang bekerja.

Keunggulan utama:

  • 🤖 Generate integration test secara otomatis
  • 🔄 Auto-update saat UI berubah (tidak ada lagi test yang rusak karena selector berubah)
  • 🔗 Integrasi dengan CI/CD pipeline yang sudah ada
  • 📊 Laporan hasil test yang mudah dipahami

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Node.js versi 16 atau lebih baru
  • npm atau yarn
  • Aplikasi web yang sedang berjalan secara lokal (atau URL yang dapat diakses)
  • Akun TestSprite — daftar di testsprite.com

Langkah 1: Instalasi

Instal TestSprite CLI secara global menggunakan npm:

npm install -g testsprite
Enter fullscreen mode Exit fullscreen mode

Verifikasi instalasi berhasil:

testsprite --version
Enter fullscreen mode Exit fullscreen mode

Output yang diharapkan:

testsprite v1.x.x
Enter fullscreen mode Exit fullscreen mode

Langkah 2: Login ke Akun Anda

Autentikasi CLI dengan akun TestSprite Anda:

testsprite login
Enter fullscreen mode Exit fullscreen mode

Perintah ini akan membuka browser dan meminta Anda login. Setelah berhasil, sesi akan tersimpan secara lokal.

Alternatif menggunakan API key (untuk environment CI/CD):

testsprite login --api-key YOUR_API_KEY
Enter fullscreen mode Exit fullscreen mode

Langkah 3: Inisialisasi Proyek

Masuk ke direktori proyek Anda dan jalankan:

cd my-project
testsprite init
Enter fullscreen mode Exit fullscreen mode

Perintah ini akan membuat file konfigurasi testsprite.config.json di root proyek:

{
  "baseUrl": "http://localhost:3000",
  "outputDir": "./testsprite-tests",
  "browser": "chromium",
  "timeout": 30000,
  "locale": {
    "country": "ID",
    "language": "id-ID"
  }
}
Enter fullscreen mode Exit fullscreen mode

Catatan untuk developer Indonesia: Pastikan set locale.country ke "ID" dan locale.language ke "id-ID" agar format angka (Rupiah), tanggal (DD/MM/YYYY), dan timezone (WIB/WITA/WIT) ditangani dengan benar.

Langkah 4: Jalankan Crawl Pertama

Pastikan aplikasi Anda berjalan, lalu jalankan perintah crawl:

testsprite crawl --url http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

TestSprite akan:

  1. Membuka browser headless
  2. Men-navigate setiap halaman aplikasi Anda
  3. Mendeteksi elemen-elemen interaktif (tombol, form, link)
  4. Mengidentifikasi user flow utama
  5. Membuat test case otomatis

Proses ini biasanya memakan waktu 5–20 menit tergantung ukuran aplikasi.

Output yang diharapkan:

🔍 Crawling http://localhost:3000...
  ✓ Halaman ditemukan: 12
  ✓ User flow terdeteksi: 8
  ✓ Test case di-generate: 47
  ✓ Disimpan ke: ./testsprite-tests/

✅ Crawl selesai! 47 test case berhasil dibuat.
Enter fullscreen mode Exit fullscreen mode

Langkah 5: Jalankan Test

Setelah crawl selesai, jalankan test yang telah di-generate:

testsprite run
Enter fullscreen mode Exit fullscreen mode

Atau jalankan hanya test tertentu:

testsprite run --suite checkout
testsprite run --file ./testsprite-tests/login.spec.ts
Enter fullscreen mode Exit fullscreen mode

Output contoh:

🧪 Menjalankan 47 test case...

  ✓ Login dengan kredensial valid (1.2s)
  ✓ Login dengan password salah menampilkan error (0.8s)
  ✓ Halaman produk menampilkan daftar item (2.1s)
  ✓ Filter produk berdasarkan kategori (1.5s)
  ✓ Tambah produk ke keranjang (1.8s)
  ✓ Checkout flow — langkah 1: alamat (2.3s)
  ✓ Checkout flow — langkah 2: pembayaran (2.0s)
  ✗ Format harga Rupiah (konfigurasi locale diperlukan)
  ✓ Halaman profil pengguna (1.1s)

  47 test selesai: 46 berhasil, 1 gagal
  Durasi total: 38.2s
Enter fullscreen mode Exit fullscreen mode

Langkah 6: Konfigurasi Lanjutan

Mengatur Locale Indonesia

Untuk aplikasi yang menarget pengguna Indonesia, tambahkan konfigurasi berikut di testsprite.config.json:

{
  "baseUrl": "http://localhost:3000",
  "locale": {
    "country": "ID",
    "language": "id-ID",
    "currency": "IDR",
    "numberFormat": "id-ID",
    "timezone": "Asia/Jakarta"
  },
  "viewport": {
    "width": 1280,
    "height": 720
  }
}
Enter fullscreen mode Exit fullscreen mode

Penjelasan setiap field:

Field Nilai Keterangan
country "ID" Kode negara Indonesia
language "id-ID" Bahasa Indonesia
currency "IDR" Rupiah — format Rp 150.000
numberFormat "id-ID" Titik sebagai pemisah ribuan
timezone "Asia/Jakarta" WIB (UTC+7)

Untuk WITA (Kalimantan, Bali, Sulawesi):

"timezone": "Asia/Makassar"
Enter fullscreen mode Exit fullscreen mode

Untuk WIT (Maluku, Papua):

"timezone": "Asia/Jayapura"
Enter fullscreen mode Exit fullscreen mode

Mengecualikan Halaman Tertentu

Tambahkan daftar URL yang ingin dilewati saat crawl:

{
  "exclude": [
    "/admin/*",
    "/debug",
    "/api/*"
  ]
}
Enter fullscreen mode Exit fullscreen mode

Konfigurasi Autentikasi

Jika aplikasi memerlukan login sebelum crawl:

{
  "auth": {
    "loginUrl": "/login",
    "usernameSelector": "#email",
    "passwordSelector": "#password",
    "submitSelector": "button[type=submit]",
    "credentials": {
      "username": "test@example.com",
      "password": "password123"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Langkah 7: Integrasi CI/CD

GitHub Actions

Buat file .github/workflows/testsprite.yml:

name: TestSprite Integration Tests

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Install TestSprite
        run: npm install -g testsprite

      - name: Start application
        run: npm start &
        env:
          NODE_ENV: test

      - name: Wait for app to be ready
        run: npx wait-on http://localhost:3000

      - name: Run TestSprite tests
        run: testsprite run --ci
        env:
          TESTSPRITE_API_KEY: ${{ secrets.TESTSPRITE_API_KEY }}
Enter fullscreen mode Exit fullscreen mode

Update Test Otomatis

Tambahkan langkah ini di workflow untuk auto-update test saat ada perubahan UI:

      - name: Update tests jika ada perubahan UI
        run: testsprite update --auto-commit
        if: github.ref == 'refs/heads/main'
Enter fullscreen mode Exit fullscreen mode

Perintah CLI Lengkap

Perintah Keterangan
testsprite login Login ke akun TestSprite
testsprite init Inisialisasi proyek baru
testsprite crawl Crawl aplikasi dan generate test
testsprite run Jalankan semua test
testsprite run --suite <nama> Jalankan test suite tertentu
testsprite update Update test yang rusak karena perubahan UI
testsprite report Tampilkan laporan hasil test terakhir
testsprite config Edit konfigurasi proyek
testsprite logout Logout dari akun

Mengatasi Error Umum

Error: Locale assertion failed 

AssertionError: Expected "Rp 150,000" but received "Rp 150.000"
Enter fullscreen mode Exit fullscreen mode

Solusi: Set numberFormat ke "id-ID" di konfigurasi.

Error: Timezone mismatch 

Error: Expected timestamp "14:00 WIB" but found "07:00 UTC"
Enter fullscreen mode Exit fullscreen mode

Solusi: Set timezone ke "Asia/Jakarta" di konfigurasi.

Error: Selector not found 

Error: Unable to find element with selector "#submit-btn"
Enter fullscreen mode Exit fullscreen mode

Solusi: Jalankan testsprite update untuk memperbarui selector yang berubah.

Error: Authentication failed 

Error: Login required before crawl
Enter fullscreen mode Exit fullscreen mode

Solusi: Konfigurasi blok auth di testsprite.config.json seperti yang dijelaskan di Langkah 6.

Langkah Selanjutnya

Setelah berhasil menjalankan test pertama Anda:

  1. Eksplor Dashboard — Lihat laporan visual di app.testsprite.com
  2. Tambah Custom Test — Tulis test manual untuk kasus yang tidak terdeteksi otomatis
  3. Setup Monitoring — Aktifkan notifikasi email/Slack saat test gagal
  4. Integrasi dengan Tim — Bagikan akses ke anggota tim melalui dashboard

Sumber Daya Tambahan

Panduan ini merupakan terjemahan dan adaptasi dari dokumentasi resmi TestSprite untuk developer Indonesia. Beberapa bagian disesuaikan dengan konteks pengembangan aplikasi lokal Indonesia.

Top comments (0)