DEV Community

placecel427-source
placecel427-source

Posted on • Originally published at gist.github.com

TestSprite — Panduan Cepat (Indonesian Translation)

#testing #devops #indonesian #tutorial

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
Enter fullscreen mode Exit fullscreen mode

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

2. Hubungkan Aplikasi Anda

Di dashboard TestSprite:

  1. Klik "Add Project"
  2. Masukkan URL aplikasi web Anda (misal: https://myapp.local:3000)
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Buka tab "Generated Tests"
  2. Lihat test suite yang dibuat AI (sudah terstruktur)
  3. Klik "Run All Tests" untuk validasi awal 
# Test akan dijalankan di berbagai browser:
# - Chrome (latest)
# - Firefox (latest)
# - Safari (latest)
# - Edge (latest)
Enter fullscreen mode Exit fullscreen mode

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"]"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
        """
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

2. Navigation Testing 

✓ Link internal (routing)
✓ Breadcrumb navigation
✓ Menu dropdown
✓ Tab switching
✓ Pagination
Enter fullscreen mode Exit fullscreen mode

3. User Interaction Testing 

✓ Click events
✓ Hover effects
✓ Keyboard shortcuts
✓ Scroll behavior
✓ Modal/dialog handling
Enter fullscreen mode Exit fullscreen mode

4. Data Presentation Testing 

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

5. API Integration Testing 

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

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
Enter fullscreen mode Exit fullscreen mode

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/*"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Issue: "Test sering timeout"

Penyebab:

  • API terlalu lambat
  • Aplikasi hang saat startup
  • Network unstable

Solusi:

{
  "timeout": 45000,  // Naikkan dari 30s
  "apiWaitTime": 10000
}
Enter fullscreen mode Exit fullscreen mode

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

Solusi:

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

TestSprite akan tunggu hingga elemen ini render sebelum test mulai.

Langkah Selanjutnya

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

Dukungan

Selamat testing! 🚀

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

Top comments (0)