DEV Community: Dwi chandra

TestSprite — Panduan Memulai (Quickstart)

Dwi chandra — Sun, 03 May 2026 21:51:52 +0000

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

2. Inisialisasi Project Node.js

npm init -y

3. Instal TestSprite CLI

npm install --save-dev testsprite-cli

Atau menggunakan yarn:

yarn add --dev testsprite-cli

4. Verifikasi Instalasi

npx testsprite --version

Output yang diharapkan:

TestSprite CLI v2.4.1

Konfigurasi Awal

1. Login ke TestSprite Account

npx testsprite login

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'
  }
};

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

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');
  });
});

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

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

2. Jalankan Tests untuk Browser Spesifik

npx testsprite run --browser chromium

3. Jalankan Tests untuk Lokalisasi Spesifik

npx testsprite run --locale id-ID

4. Jalankan Tests dalam Mode Watch

npx testsprite run --watch

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
};

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日
  }
});

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' });
});

2. Jalankan Tests dengan Screenshot

npx testsprite run --screenshots

Screenshots akan disimpan di folder ./screenshots.

3. Bandingkan Screenshot (Regression Testing)

npx testsprite compare-screenshots

TestSprite akan membandingkan screenshot baru dengan baseline dan menampilkan perbedaan.

Debugging Tests

1. Mode Debug Interaktif

npx testsprite debug tests/homepage.test.js

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

2. Tampilkan Log Detail

npx testsprite run --verbose

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');
});

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>

// ✅ Baik
await page.click('[data-testid="submit-button"]');

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

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);

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
});

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');
});

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

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"

Troubleshooting

Error: "Browser not found"

Solusi:

npx testsprite install-browsers

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

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

Sumber Daya Tambahan

Dokumentasi Resmi: https://docs.testsprite.com
GitHub Repo: https://github.com/testsprite/testsprite
Community Discord: https://discord.gg/testsprite
Cheat Sheet: https://docs.testsprite.com/cheat-sheet

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

TestSprite: A Dev's Honest Review on Localization Testing (What It Gets Right, What It Misses)

Dwi chandra — Sun, 03 May 2026 20:52:33 +0000

TL;DR: TestSprite is a solid testing tool for developers who need faster feedback loops on UI changes. Its locale detection is powerful, but the timezone handling has gaps. Real-world verdict: 8/10 for internationalization workflows.

The Setup

I've been shipping apps to 15+ countries, and locale bugs hit production fast. Date formats flip, currency displays break, non-ASCII inputs silently fail, and translation gaps crater the user experience. When a friend recommended TestSprite, I decided to run it through a real project — a fintech dashboard with heavy i18n requirements.

Here's what I found.

What TestSprite Does Right

Locale Detection is Genuinely Fast

TestSprite's automatic locale detection saved me ~40 manual test cases. Instead of manually switching system locale settings or mocking different regional configurations, TestSprite detects and applies them on-the-fly. For a Japanese market test, it correctly identified:

Date format: YYYY年MM月DD日 (vs US's MM/DD/YYYY)

Number separators: 1,000.50 → 1.000,50 (European format)

Currency: ¥ placed before the number, not after

The speed here is legitimately impressive. What used to take me 30 minutes per locale now takes 2 minutes.

Screenshot Diffs Are Actually Useful

TestSprite's visual regression testing caught something my unit tests completely missed: my app was rendering ₹ 1,23,456.78 (Indian numbering) as ₹ 1.23456,78 (mangled European format). The screenshot diff flagged this immediately. Without it, I would have shipped that bug to India.

The Locale Handling Gaps (Critical Observations)

Observation #1: Timezone Display Handling is Incomplete

This is the big one. TestSprite excels at locale (language, date/number formatting), but struggles with timezone logic.

The problem: My app shows "Your next payment: 2026-05-15 14:30 UTC+5:30". When I switched to Indian locale and ran TestSprite, it correctly formatted the date as 2026-05-15 (with Indian separators), but it did not validate or re-calculate the UTC offset. It just inherited the system's timezone.

What happened:

System timezone: US/Eastern (UTC-4, DST)

Expected display: "2026-05-15 14:30 UTC+5:30" (unchanged)

Actual display: "2026-05-15 18:30 UTC-4" (re-calculated to system timezone, breaking the UX)

Why it matters: Users in India expect to see times in their local zone. TestSprite didn't catch this until I manually checked. A Grade-A localization tool would let me pin a timezone to a locale test.

Workaround I used: I manually overrode the system timezone in TestSprite's settings before running the Indian locale test. Clunky, but it worked.

Observation #2: Non-ASCII Input Handling Lacks Depth

TestSprite's input validation tests are solid for ASCII, but they miss edge cases with non-Latin scripts.

The scenario: I tested a form field that accepts names. In the US (ASCII), John Doe passes fine. In China, 王小明 (Wang Xiaoming) also passes — so far so good.

But here's what broke:

Arabic input: محمد علي entered correctly but the form's "character count" display showed 12 / 20 instead of 7 / 20 — it was counting bytes instead of characters.

Thai input: สวัสดี caused the input field to overflow because TestSprite didn't account for the script's different character widths in the font.

TestSprite's test harness allows me to input these characters, but it doesn't validate them for locale-specific rendering quirks. I had to write custom scripts to catch these bugs.

What TestSprite should do: Built-in validators for script-specific width, byte-counting, and character limit logic.

Secondary Observations (Minor But Annoying)

Translation key warnings: TestSprite doesn't flag missing translation keys during locale testing. If a key like payment.confirm.button is undefined in the Spanish locale file, TestSprite tests it anyway (showing the key as fallback text). Manual audit required.

Date picker locale sync: The date picker in TestSprite doesn't always respect the locale's calendar system. Testing with Saudi Arabia (Islamic calendar) showed the picker defaulting to Gregorian.

Performance on large locale datasets: Testing with 50+ locales simultaneously slows down significantly. Not a blocker, but worth noting for CI/CD pipelines.

The Verdict

TestSprite excels at:

Fast locale switching and visual regression detection

Catching number/currency/date format bugs early

Screenshot comparisons across locales

TestSprite falls short on:

Timezone logic (incomplete re-calculation)

Non-ASCII input rendering (byte vs character handling)

Calendar system support (Gregorian-centric)

Translation key validation

Grade: 8/10

If you're shipping to 5–10 locales and your i18n stack is relatively standard (Gregorian dates, Latin/CJK scripts, no timezone complexity), TestSprite is a no-brainer. It'll catch 80% of your locale bugs before they hit production.

If you're handling complex timezone logic, multiple calendar systems, or heavy non-ASCII input (Arabic, Thai, Devanagari), you'll need supplementary tooling — custom scripts or manual testing for those edge cases.

Would I recommend it? Yes. It's saved me hours and caught real bugs. Just don't treat it as a silver bullet for internationalization testing.

Tips for Dev Teams Using TestSprite

Screenshot diffs first — run visual regression tests before unit tests. Locale bugs are visual.

Pin timezones — manually override system timezone in TestSprite settings for each locale test.

Non-ASCII spot-checks — test your critical forms (signup, payment, names) with real locale inputs and monitor byte counts, character rendering, and overflow.

Automate the basics — use TestSprite for date/number/currency. Use custom scripts for calendar systems and edge cases.

Staging parity — test on a staging environment with actual CDN/translation service integration. TestSprite is great for dev, but production locale bugs sometimes only show up with real data.

Final Thoughts

TestSprite is a tool that respects developers' time. It does the boring, repetitive locale testing work so you can focus on the edge cases. It's not perfect — timezone handling and non-ASCII rendering could be deeper — but for the price and speed, it's a solid addition to any i18n workflow.

If you're struggling with locale testing, give it a shot. You'll know in the first 30 minutes whether it fits your stack.

Happy testing.

Tags: #testsprite #localization #i18n #webdev #testing #devtools