TestSprite — Panduan Cepat (Indonesian Translation)

TestSprite — Panduan Cepat

Apa itu TestSprite?

TestSprite adalah platform otomasi testing terpadu untuk aplikasi web modern. Dengan menganalisis UI Anda secara real-time, TestSprite secara otomatis menghasilkan test cases integrasi yang komprehensif dan memeliharanya seiring perubahan aplikasi Anda.

Masalah yang dipecahkan:

Test sulit ditingkatkan saat UI berubah
Tim QA menghabiskan jutaan jam menulis test yang sama berulang kali
Test regresi sering gagal karena selector yang tidak valid
Onboarding engineer testing baru memakan waktu berminggu-minggu

TestSprite menghilangkan 80% dari pekerjaan manual tersebut dengan AI yang memahami aplikasi Anda.

Instalasi

1. Daftar di TestSprite

# Kunjungi dashboard
https://app.testsprite.com/signup

Buat akun dengan email kerja Anda. Verifikasi email, selesai.

2. Hubungkan Aplikasi Anda

Di dashboard TestSprite:

Klik "Add Project"
Masukkan URL aplikasi web Anda (misal: https://myapp.local:3000)
TestSprite akan scan UI Anda

// Optional: Tambahkan snippet ini ke aplikasi Anda untuk integrasi lebih dalam
<script src="https://cdn.testsprite.com/v1/agent.js"></script>
<script>
  TestSprite.init({
    projectId: "YOUR_PROJECT_ID",
    apiKey: "YOUR_API_KEY"
  });
</script>

3. Tunggu Analisis AI

TestSprite memindai aplikasi Anda selama 2-5 menit, memetakan setiap halaman, form, tombol, dan interaksi. Ini adalah satu-satunya setup yang Anda butuhkan.

Test Pertama Anda

Menghasilkan Test Cases Otomatis

Setelah analisis selesai:

Buka tab "Generated Tests"
Lihat test suite yang dibuat AI (sudah terstruktur)
Klik "Run All Tests" untuk validasi awal

# Test akan dijalankan di berbagai browser:
# - Chrome (latest)
# - Firefox (latest)
# - Safari (latest)
# - Edge (latest)

Hasil Test

Setiap test report menampilkan:

✅ Passed: X test
❌ Failed: Y test (dengan screenshot)
⏱️ Waktu eksekusi total

Jika ada kegagalan, TestSprite langsung menunjukkan:

Error: Element dengan selector ".submit-btn" tidak ditemukan
Saran: Gunakan selector alternatif "button[type="submit"]"

Merawat Test Saat UI Berubah

Ini adalah "magic" TestSprite. Ketika Anda update UI:

Skenario: Anda mengganti `.primary-button` menjadi `[data-testid="primary-btn"]`

Tanpa TestSprite (cara lama):

Test gagal ❌
Engineer membuka setiap test file
Mencari .primary-button di 50+ test
Update secara manual
30 menit yang terbuang

Dengan TestSprite:

Test mulai gagal
TestSprite mendeteksi perubahan selector
Secara otomatis menemukan selector baru
Test berjalan lagi ✅
Anda tidak perlu berbuat apa-apa

Proses ini disebut "Self-Healing Tests".

Mengintegrasikan dengan CI/CD

TestSprite bekerja dengan pipeline Anda:

GitHub Actions

name: Run TestSprite Tests

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Start Application
        run: npm start &

      - name: Run TestSprite Tests
        uses: testsprite/action@v1
        with:
          project-id: ${{ secrets.TESTSPRITE_PROJECT_ID }}
          api-key: ${{ secrets.TESTSPRITE_API_KEY }}

      - name: Upload Report
        if: always()
        uses: actions/upload-artifact@v2
        with:
          name: testsprite-report
          path: ./testsprite-report.html

GitLab CI

stages:
  - test

testsprite:
  stage: test
  image: testsprite/runner:latest
  script:
    - testsprite run --project-id $TESTSPRITE_PROJECT_ID --api-key $TESTSPRITE_API_KEY
  artifacts:
    paths:
      - testsprite-report.html

Jenkins

pipeline {
  stages {
    stage("TestSprite") {
      steps {
        sh """
          docker run --rm \
            -e TESTSPRITE_PROJECT_ID=$TESTSPRITE_PROJECT_ID \
            -e TESTSPRITE_API_KEY=$TESTSPRITE_API_KEY \
            testsprite/runner:latest \
            testsprite run
        """
      }
    }
  }
}

Kategori Test yang Didukung

TestSprite secara otomatis membuat test untuk:

1. Form Testing

✓ Validasi input (field required, tipe data)
✓ Submit form dengan berbagai kombinasi nilai
✓ Handling error message
✓ Reset form
✓ Penyimpanan draft otomatis

2. Navigation Testing

✓ Link internal (routing)
✓ Breadcrumb navigation
✓ Menu dropdown
✓ Tab switching
✓ Pagination

3. User Interaction Testing

✓ Click events
✓ Hover effects
✓ Keyboard shortcuts
✓ Scroll behavior
✓ Modal/dialog handling

4. Data Presentation Testing

✓ Table rendering (sorting, filtering)
✓ List pagination
✓ Search functionality
✓ Data formatting
✓ Empty state handling

5. API Integration Testing

✓ POST/GET/PUT/DELETE endpoints
✓ Error handling (404, 500, timeout)
✓ Data mismatch detection
✓ Rate limiting behavior

Contoh Test Output

Setelah menjalankan test, Anda melihat:

📊 TestSprite Test Report
══════════════════════════════════════════

Project: My E-Commerce App
Run Date: 2026-05-01 14:35:12 UTC
Duration: 4m 23s

Summary:
  ✅ Passed: 127
  ❌ Failed: 3
  ⏭️  Skipped: 2

Pass Rate: 97.7% ✓

Failed Tests:
─────────────────────────────────────────

1. [FAILED] Login form dengan email invalid
   Expected: Error message muncul
   Actual: Tombol submit tetap aktif
   Screenshot: https://testsprite.com/report/screenshot/1

2. [FAILED] Cart update quantity
   Expected: Total harga update
   Actual: Total harga tetap sama
   Diff: -$15 (expected)

3. [FAILED] Mobile responsive - navigation menu
   Expected: Menu hamburger muncul di width 480px
   Actual: Menu hamburger tidak visible
   Device: iPhone 12 Mini

Konfigurasi Lanjutan

Custom Test Parameters

{
  "testConfig": {
    "browsers": ["chrome", "firefox", "safari"],
    "devices": ["desktop", "tablet", "mobile"],
    "timeout": 30000,
    "retryFailedTests": 2,
    "parallelism": 4,
    "screenshotOnFailure": true,
    "videoRecording": true,
    "apiBaseUrl": "https://api.myapp.com",
    "excludePatterns": [
      "/admin/*",
      "/internal/*"
    ]
  }
}

Environment Variables

# Setup untuk berbagai environment

# Development
TESTSPRITE_ENV=dev
TESTSPRITE_API_URL=http://localhost:3000

# Staging
TESTSPRITE_ENV=staging
TESTSPRITE_API_URL=https://staging.myapp.com

# Production
TESTSPRITE_ENV=prod
TESTSPRITE_API_URL=https://myapp.com

Tips & Trik

1. Jangan Manual Test Lagi

Setelah TestSprite setup, batalkan kebiasaan manual testing. AI lebih cepat dan konsisten.

2. Update Kode dengan Percaya Diri

Refactor tanpa takut memecah sesuatu. TestSprite akan memberi tahu Anda dalam menit, bukan jam.

3. Gunakan untuk Regression Sebelum Deploy

Sebelum production release, biarkan TestSprite memvalidasi seluruh aplikasi dalam 5 menit.

4. Monitor Test Trends

Dashboard menunjukkan:

Pass rate over time
Test execution time trends
Most flaky tests
Coverage by feature

5. Bagikan Laporan dengan Stakeholder

Export report sebagai HTML/PDF dan kirim ke manager/product owner. Mereka ingin bukti bahwa kualitas terjaga.

Troubleshooting

Issue: "Application tidak bisa diakses dari TestSprite runner"

Solusi:

# Jika app berjalan locally, expose dengan ngrok
ngrok http 3000

# Lalu setup TestSprite dengan URL ngrok
https://abcd1234.ngrok.io

Issue: "Test sering timeout"

Penyebab:

API terlalu lambat
Aplikasi hang saat startup
Network unstable

Solusi:

{
  "timeout": 45000,  // Naikkan dari 30s
  "apiWaitTime": 10000
}

Issue: "TestSprite tidak mendeteksi elemen dynamic (lazy-loaded)"

Solusi:

// Tambahkan indikator untuk TestSprite
<div data-testsprite-wait="content-loaded">
  {/* Dynamic content here */}
</div>

TestSprite akan tunggu hingga elemen ini render sebelum test mulai.

Langkah Selanjutnya

✅ Daftar di https://app.testsprite.com
✅ Setup project Anda
✅ Jalankan test pertama
✅ Integrasikan dengan CI/CD
✅ Monitor dashboard setiap hari

Dukungan

📧 Email: support@testsprite.com
💬 Chat: app.testsprite.com/chat
📖 Docs: https://docs.testsprite.com
🐛 Bug Report: https://github.com/testsprite/issues

Selamat testing! 🚀

Also available on GitHub Gist: https://gist.github.com/placecel427-source/ec857abad852411161ad34d1c0b0f68d

推荐订阅源

DEV Community