Playwright: Framework E2E Testing Modern untuk Aplikasi Web — Panduan untuk Developer Indonesia

Daftar Isi

1. Apa Itu Playwright?
2. Kenapa Playwright Trending di 2025-2026?
3. Fitur Unggulan Playwright
4. Instalasi dan Setup
5. Contoh Test Pertama
6. Playwright vs Cypress vs Selenium
7. Tips untuk Developer Indonesia
8. Kesimpulan

---

Apa Itu Playwright?

Playwright adalah framework end-to-end (E2E) testing open-source yang dikembangkan oleh Microsoft. Dengan Playwright, kamu bisa mengotomatiskan browser — Chrome, Firefox, Safari (WebKit), dan Edge — menggunakan satu API yang seragam.

Dirilis pada Januari 2020, Playwright dengan cepat menjadi favorit developer karena pendekatannya yang modern: auto-wait, network interception, mobile emulation, dan dukungan multi-browser tanpa perlu driver terpisah.

Playwright mendukung tiga bahasa pemrograman utama:

• JavaScript / TypeScript (paling populer)
• Python
• Java
• .NET (C#)

Kalau kamu baru mulai belajar programming, baca dulu Apa Itu Programming? untuk memahami konsep dasarnya.

---

Kenapa Playwright Trending di 2025-2026?

Playwright lagi naik daun karena beberapa faktor:

Faktor	Penjelasan
Dukungan Microsoft	Dikembangkan tim yang sama dengan Puppeteer — kode solid, maintenance aktif
WebKit untuk Safari	Satu-satunya framework E2E yang bisa test Safari (WebKit) selain Selenium
Auto-wait	Nggak perlu sleep() atau waitForTimeout() manual — elemen ditunggu otomatis
Network mocking	Intercept request API langsung dari test, tanpa tool tambahan
Test Generator	Record test dari browser langsung — record, generate kode, jalankan
Component testing	Bisa test komponen React/Vue/Svelte tanpa perlu browser penuh

Di GitHub sendiri, repositori cypress-io/cypress konsisten masuk trending dengan 50 ribu bintang, sementara Playwright (65k⭐) juga terus tumbuh. Ini menandakan bahwa E2E testing lagi jadi prioritas utama developer web di 2026.

Playwright juga jadi fondasi banyak tools modern — termasuk SWC yang merupakan Rust-based compiler untuk JavaScript/TypeScript yang banyak dipakai di ekosistem testing.

---

Fitur Unggulan Playwright

1. Auto-Wait (Pembeda Utama)

Playwright otomatis menunggu elemen sebelum melakukan aksi. Nggak perlu kode kayak gini:

// ❌ Cara lama (Selenium)
await driver.wait(until.elementLocated(By.id('submit')), 5000);
await driver.findElement(By.id('submit')).click();

// ✅ Playwright — auto-wait built-in
await page.click('#submit');

2. Multi-Browser

const { chromium, firefox, webkit } = require('playwright');

// Satu kode, tiga browser
const browser = await chromium.launch();  // Chrome/Edge
const browser = await firefox.launch();   // Firefox
const browser = await webkit.launch();    // Safari

3. Network Interception

Mock API response tanpa perlu backend sungguhan:

// Intercept request API
await page.route('**/api/users', async route => {
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([{ id: 1, name: 'Test User' }])
  });
});

4. Mobile Emulation & Geolocation

const iPhone = devices['iPhone 15 Pro'];
const browser = await chromium.launch();
const context = await browser.newContext({
  ...iPhone,
  locale: 'id-ID',
  geolocation: { longitude: 106.8, latitude: -6.2 },  // Jakarta
  permissions: ['geolocation']
});

5. Test Generator (Codegen)

Jalankan ini di terminal, Playwright akan merekam interaksi kamu dan generate kode test:

npx playwright codegen https://tokopedia.com

Bergerak di browser, kode test tergenerate otomatis. Cocok buat kamu yang baru belajar testing!

---

Instalasi dan Setup

Prasyarat

• Node.js versi 18 atau lebih baru
• npm atau yarn

Langkah Instalasi

# 1. Buat project baru
mkdir test-playwright && cd test-playwright
npm init -y

# 2. Install Playwright
npm install -D @playwright/test

# 3. Install browser
npx playwright install

# 4. Inisialisasi konfigurasi
npx playwright init

Struktur project yang dihasilkan:

test-playwright/
├── playwright.config.ts      # Konfigurasi global
├── tests/
│   └── example.spec.ts       # File test
├── package.json
└── playwright-report/        # Report HTML (auto-generated)

Konfigurasi Dasar (playwright.config.ts)

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  retries: 1,
  use: {
    baseURL: 'https://demowebai.my.id',
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Ini mirip konsep struktur data — konfigurasi yang terstruktur dengan baik bikin kode lebih mudah di-maintain.

---

Contoh Test Pertama

Buat file tests/demowebai.spec.ts:

import { test, expect } from '@playwright/test';

test('halaman blog bisa diakses dan punya konten', async ({ page }) => {
  await page.goto('/blog/');

  // Judul halaman muncul
  await expect(page.locator('h1')).toBeVisible();

  // Ada artikel dengan link
  const articleLinks = page.locator('article a');
  const count = await articleLinks.count();
  expect(count).toBeGreaterThanOrEqual(1);

  console.log(`Ditemukan ${count} artikel di halaman blog`);
});

test('navigasi ke artikel', async ({ page }) => {
  await page.goto('/blog/');

  // Klik artikel pertama
  await page.locator('article a').first().click();

  // Halaman artikel terbuka
  await expect(page.locator('h1')).toBeVisible();
  expect(page.url()).toContain('/blog/');
});

Jalankan test:

npx playwright test

# Dengan UI mode (visual)
npx playwright test --ui

# Debug mode (step-by-step)
npx playwright test --debug

Hasil report HTML bisa kamu buka di browser:

npx playwright show-report

---

Playwright vs Cypress vs Selenium

Bingung pilih framework testing? Ini perbandingannya:

Aspek	Playwright	Cypress	Selenium
Browser support	Chrome, Firefox, Safari, Edge	Chrome, Firefox, Edge, WebKit (beta)	Semua browser
Bahasa	JS/TS, Python, Java, .NET	JavaScript/TypeScript	Java, Python, C#, Ruby, JS
Auto-wait	✅ Built-in	✅ Built-in	❌ Manual
Network interception	✅ Native	✅ Native	❌ Butuh proxy (BrowserMob)
Mobile emulation	✅	❌ Terbatas	✅ (Appium)
Shadow DOM	✅ Auto-penetrate	✅ Auto-penetrate	❌ Manual
Parallel execution	✅ Built-in	✅ Dashboard (berbayar)	✅ Manual setup
IFrame support	✅ Native	❌ Terbatas	✅ Native
Kecepatan	⚡ Sangat cepat	⚡ Cepat	🐢 Lambat
Ekosistem	🔥 Bertumbuh pesat	🔥 Matang	🏛️ Stabil, mature

Kapan pakai Playwright:

• Butuh cross-browser testing (terutama Safari)
• Proyek modern dengan JS/TS/Next.js
• Testing API + UI sekaligus
• Mobile web testing

Kapan tetap pakai Cypress:

• Tim sudah terbiasa dengan Cypress
• Butuh mature plugin ecosystem
• Testing komponen React secara terisolasi

Kapan pakai Selenium:

• Proyek legacy yang sudah pakai Selenium
• Butuh bahasa non-JS (Java, C#)
• Integrasi dengan tool enterprise

---

Tips untuk Developer Indonesia

1. Test Lokal dengan Aplikasi Indonesia

Playwright punya locale detection — kamu bisa set lokalisasi ke Indonesia:

const context = await browser.newContext({
  locale: 'id-ID',
  timezoneId: 'Asia/Jakarta',
});

2. Test di CI/CD Gratis

Playwright jalan di GitHub Actions tanpa biaya tambahan:

# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test

3. Visual Regression Testing

Cocok buat mastiin tampilan web konsisten di semua halaman:

test('halaman home tampil sesuai desain', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('home.png', {
    maxDiffPixelRatio: 0.02  // toleransi 2%
  });
});

4. Test dalam Bahasa Indonesia

Playwright bisa test teks dalam Bahasa Indonesia:

await expect(page.getByText('Cari')).toBeVisible();
await page.getByPlaceholder('Cari artikel...').fill('Playwright');
await page.getByRole('button', { name: 'Cari' }).click();

---

Kesimpulan

Aspek	Intinya
Apa itu Playwright?	Framework E2E testing modern dari Microsoft untuk otomatisasi browser
Kenapa populer?	Auto-wait, multi-browser (termasuk Safari), network mocking, test generator
Cara mulai?	npm init → npm install @playwright/test → npx playwright install
Kapan pakai?	Butuh cross-browser testing, proyek modern JS/TS, mobile web
Alternatif?	Cypress (lebih mature), Selenium (enterprise legacy)

Testing bukan lagi opsional di 2026 — ini adalah keahlian wajib bagi developer profesional. Playwright memberikan cara paling modern dan efisien untuk memastikan aplikasi web kamu berfungsi dengan baik di semua browser, perangkat, dan skenario.

Mulai dari yang kecil: buat satu test untuk halaman utama website kamu. Jalankan. Lihat hasilnya. Tambah test berikutnya. Dalam seminggu, kamu sudah punya test suite yang melindungi aplikasi kamu dari bug.

Happy testing, Sobat Developer! 🚀

---

Related Posts

• SWC: Rust-Based Compiler untuk JavaScript Modern
• Struktur Data Dasar untuk Programmer
• Apa Itu Programming? Panduan untuk Pemula

---