DEV Community

Dwi chandra
Dwi chandra

Posted on

TestSprite — Panduan Memulai (Quickstart)

TestSprite — Panduan Memulai (Quickstart)

Bahasa: Indonesian (Bahasa Indonesia)

Versi Asli: https://docs.testsprite.com/quickstart

Pengenalan

TestSprite adalah platform testing modern yang memungkinkan developer menjalankan automated UI tests across multiple browsers, devices, dan lokalisasi dalam hitungan menit. Panduan ini akan memandu Anda melalui langkah-langkah dasar untuk mulai testing dengan TestSprite.

Prasyarat

Sebelum memulai, pastikan Anda memiliki:

  • Node.js versi 14.0 atau lebih tinggi
  • npm atau yarn sebagai package manager
  • Git untuk version control
  • Akun TestSprite (daftar gratis di https://app.testsprite.com)

Instalasi

1. Buat Direktori Project 

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

2. Inisialisasi Project Node.js 

npm init -y
Enter fullscreen mode Exit fullscreen mode

3. Instal TestSprite CLI 

npm install --save-dev testsprite-cli
Enter fullscreen mode Exit fullscreen mode

Atau menggunakan yarn:

yarn add --dev testsprite-cli
Enter fullscreen mode Exit fullscreen mode

4. Verifikasi Instalasi 

npx testsprite --version
Enter fullscreen mode Exit fullscreen mode

Output yang diharapkan:

TestSprite CLI v2.4.1
Enter fullscreen mode Exit fullscreen mode

Konfigurasi Awal

1. Login ke TestSprite Account 

npx testsprite login
Enter fullscreen mode Exit fullscreen mode

Masukkan email dan password akun TestSprite Anda saat diminta.

2. Buat File Konfigurasi

Buat file testsprite.config.js di root project:

module.exports = {
  baseURL: 'https://localhost:3000',
  browsers: ['chromium', 'firefox', 'webkit'],
  locales: ['en-US', 'id-ID', 'ja-JP'],
  viewport: { width: 1280, height: 720 },
  timeout: 30000,
  screenshots: {
    enabled: true,
    path: './screenshots'
  }
};
Enter fullscreen mode Exit fullscreen mode

Penjelasan Konfigurasi:

  • baseURL: URL aplikasi yang akan ditest
  • browsers: Browser yang akan digunakan untuk testing
  • locales: Daftar bahasa/lokalisasi untuk testing
  • viewport: Ukuran default layar untuk testing
  • timeout: Waktu maksimal per test dalam milliseconds
  • screenshots: Pengaturan capture screenshot

Menulis Test Pertama Anda

1. Buat Direktori Tests 

mkdir tests
Enter fullscreen mode Exit fullscreen mode

2. Buat File Test Pertama

Buat file tests/homepage.test.js:

const { test, expect } = require('testsprite');

test.describe('Homepage', () => {
  test.beforeEach(async ({ page }) => {
    // Navigasi ke homepage sebelum setiap test
    await page.goto('/');
  });

  test('should load homepage successfully', async ({ page }) => {
    // Verifikasi bahwa halaman berhasil dimuat
    const title = await page.locator('h1').textContent();
    expect(title).toBe('Selamat Datang');
  });

  test('should display navigation menu', async ({ page }) => {
    // Verifikasi bahwa menu navigasi ada
    const navbar = await page.locator('nav');
    await expect(navbar).toBeVisible();
  });

  test('should login successfully', async ({ page }) => {
    // Test login flow
    await page.fill('input[name="email"]', 'user@example.com');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');

    // Tunggu redirect ke dashboard
    await expect(page).toHaveURL('/dashboard');
  });
});
Enter fullscreen mode Exit fullscreen mode

Penjelasan Code:

  • test.describe(): Mengelompokkan test-test yang terkait
  • test.beforeEach(): Hook yang dijalankan sebelum setiap test
  • page.goto(): Navigasi ke URL tertentu
  • page.locator(): Mencari elemen di halaman
  • expect(): Assertion untuk verifikasi hasil

Menjalankan Tests

1. Jalankan Semua Tests 

npx testsprite run
Enter fullscreen mode Exit fullscreen mode

Output yang diharapkan:

TestSprite v2.4.1

Running tests in 3 browsers...
✓ Homepage › should load homepage successfully (2s)
✓ Homepage › should display navigation menu (1s)
✓ Homepage › should login successfully (3s)

Passed: 3/3 tests
Time: 6s
Enter fullscreen mode Exit fullscreen mode

2. Jalankan Tests untuk Browser Spesifik 

npx testsprite run --browser chromium
Enter fullscreen mode Exit fullscreen mode

3. Jalankan Tests untuk Lokalisasi Spesifik 

npx testsprite run --locale id-ID
Enter fullscreen mode Exit fullscreen mode

4. Jalankan Tests dalam Mode Watch 

npx testsprite run --watch
Enter fullscreen mode Exit fullscreen mode

Mode watch akan menjalankan ulang tests setiap kali file berubah.

Testing dengan Berbagai Lokalisasi

TestSprite memudahkan testing aplikasi dalam multiple bahasa dan region. Berikut cara menggunakannya:

1. Konfigurasi Lokalisasi

Update testsprite.config.js:

module.exports = {
  baseURL: 'https://localhost:3000',
  locales: [
    { code: 'en-US', timezone: 'America/New_York' },
    { code: 'id-ID', timezone: 'Asia/Jakarta' },
    { code: 'ja-JP', timezone: 'Asia/Tokyo' },
    { code: 'ar-SA', timezone: 'Asia/Riyadh' }
  ],
  // ... konfigurasi lainnya
};
Enter fullscreen mode Exit fullscreen mode

2. Tulis Test untuk Verifikasi Lokalisasi 

test('should display correct date format for each locale', async ({ page, locale }) => {
  await page.goto('/');

  const dateDisplay = await page.locator('[data-testid="date"]').textContent();

  if (locale === 'en-US') {
    expect(dateDisplay).toMatch(/\d{1,2}\/\d{1,2}\/\d{4}/); // MM/DD/YYYY
  } else if (locale === 'id-ID') {
    expect(dateDisplay).toMatch(/\d{1,2}-\d{1,2}-\d{4}/); // DD-MM-YYYY
  } else if (locale === 'ja-JP') {
    expect(dateDisplay).toMatch(/\d{4}年\d{1,2}月\d{1,2}日/); // YYYY年MM月DD日
  }
});
Enter fullscreen mode Exit fullscreen mode

Tangkap Screenshot untuk Visual Regression Testing

1. Tambahkan Screenshot ke Test 

test('should match homepage screenshot', async ({ page }) => {
  await page.goto('/');
  await page.screenshot({ path: './screenshots/homepage.png' });
});
Enter fullscreen mode Exit fullscreen mode

2. Jalankan Tests dengan Screenshot 

npx testsprite run --screenshots
Enter fullscreen mode Exit fullscreen mode

Screenshots akan disimpan di folder ./screenshots.

3. Bandingkan Screenshot (Regression Testing) 

npx testsprite compare-screenshots
Enter fullscreen mode Exit fullscreen mode

TestSprite akan membandingkan screenshot baru dengan baseline dan menampilkan perbedaan.

Debugging Tests

1. Mode Debug Interaktif 

npx testsprite debug tests/homepage.test.js
Enter fullscreen mode Exit fullscreen mode

Ini akan membuka browser inspector sehingga Anda bisa step-by-step debug test.

2. Tampilkan Log Detail 

npx testsprite run --verbose
Enter fullscreen mode Exit fullscreen mode

Opsi ini menampilkan log lengkap dari setiap step test.

3. Pause Test di Titik Tertentu 

test('debug example', async ({ page }) => {
  await page.goto('/');
  await page.pause(); // Browser akan berhenti di sini
  await page.click('button');
});
Enter fullscreen mode Exit fullscreen mode

Best Practices

1. Selectors yang Stabil

Gunakan data-testid attributes untuk menghindari brittle tests:

<!-- ✅ Baik -->
<button data-testid="submit-button">Submit</button>

<!-- ❌ Hindari -->
<button class="btn btn-primary mt-2">Submit</button>
Enter fullscreen mode Exit fullscreen mode 
// ✅ Baik
await page.click('[data-testid="submit-button"]');

// ❌ Hindari
await page.click('.btn.btn-primary.mt-2');
Enter fullscreen mode Exit fullscreen mode

2. Tunggu Elemen dengan Benar 

// ✅ Baik - Tunggu sampai elemen visible
await expect(page.locator('[data-testid="loading"]')).not.toBeVisible({ timeout: 10000 });

// ❌ Hindari - Hard wait
await page.waitForTimeout(5000);
Enter fullscreen mode Exit fullscreen mode

3. Isolasi Tests

Setiap test harus independen dan tidak bergantung pada test lain:

test.beforeEach(async ({ page }) => {
  // Reset state sebelum setiap test
  await page.goto('/');
});

test('test 1', async ({ page }) => {
  // Tidak bergantung pada hasil test lainnya
});
Enter fullscreen mode Exit fullscreen mode

4. Gunakan Page Objects

Untuk test yang lebih kompleks, gunakan page objects:

class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailInput = page.locator('input[name="email"]');
    this.passwordInput = page.locator('input[name="password"]');
    this.submitButton = page.locator('button[type="submit"]');
  }

  async login(email, password) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

test('login flow', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await page.goto('/login');
  await loginPage.login('user@example.com', 'password123');
  await expect(page).toHaveURL('/dashboard');
});
Enter fullscreen mode Exit fullscreen mode

Integrasi dengan CI/CD

1. GitHub Actions

Buat file .github/workflows/test.yml:

name: TestSprite Tests

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

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Run tests
        run: npx testsprite run

      - name: Upload screenshots
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: screenshots
          path: ./screenshots
Enter fullscreen mode Exit fullscreen mode

2. Jalankan Tests Sebelum Merge 

# Pre-commit hook menggunakan husky
npm install husky --save-dev
npx husky install
npx husky add .husky/pre-push "npm run test:ci"
Enter fullscreen mode Exit fullscreen mode

Troubleshooting

Error: "Browser not found"

Solusi:

npx testsprite install-browsers
Enter fullscreen mode Exit fullscreen mode

Error: "Connection timeout"

Solusi:

  • Pastikan aplikasi sudah running: npm start
  • Update baseURL di testsprite.config.js
  • Tingkatkan timeout value

Error: "Element not found"

Solusi:

  • Verifikasi selector dengan inspect element
  • Pastikan element sudah visible sebelum interact
  • Gunakan page.waitForSelector() jika perlu

Langkah Selanjutnya

  1. Baca dokumentasi lengkap: https://docs.testsprite.com
  2. Eksplor advanced features seperti API testing
  3. Integrasi dengan test management tools
  4. Setup parallel testing untuk performa lebih cepat

Sumber Daya Tambahan

Ditulis untuk: Developer Indonesia yang ingin memulai automated testing dengan TestSprite

Terakhir diupdate: 2026-05-03

Lisensi: CC BY 4.0

FAQ (Pertanyaan Umum)

Q: Apakah TestSprite gratis?

A: Ya, TestSprite menyediakan tier gratis dengan 1000 test runs per bulan. Tier berbayar tersedia untuk kebutuhan lebih besar.

Q: Apakah TestSprite support testing aplikasi mobile?

A: Ya, TestSprite support mobile browser testing via viewport emulation dan real device testing untuk tier enterprise.

Q: Berapa lama test biasanya berjalan?

A: Tergantung kompleksitas aplikasi. Rata-rata test suite dengan 50 tests berjalan 10-15 menit.

Q: Apakah TestSprite bisa test aplikasi offline?

A: Ya, TestSprite support testing aplikasi lokal via localhost atau custom servers.

Q: Bagaimana cara share hasil test dengan tim?

A: TestSprite menyediakan dashboard reporting dan integration dengan

Top comments (0)