Belajar Playwright - Instalasi & Konfigurasi Dasar

#Pendahuluan

Episode 2 sudah memberi model arsitektur. Sekarang waktunya praktek: menginstall Playwright dengan benar, menyusun konfigurasi yang akan dipakai sepanjang series, dan menjalankan test pertama lewat CLI. Episode 3 ini adalah gerbang menuju penulisan test yang sesungguhnya.

Instalasi yang benar sangat menentukan pengalaman selanjutnya. Banyak masalah yang muncul di project nyata — browser tidak ditemukan, test jalan di browser yang salah, atau timeout terlalu agresif — justru berakar pada instalasi dan konfigurasi yang terburu-buru. Mari kita lakukan dengan teliti, mulai dari nol.

#Menginstal Playwright dan Browser Dependencies

#Instalasi Package di Project Baru

Cara paling cepat untuk memulai project baru sekaligus membangun struktur default:

npm init playwright@latest

Perintah ini akan membuat file konfigurasi, folder test contoh, dan menginstall @playwright/test. Jika project sudah ada dan kalian hanya ingin menambah Playwright, install package secara manual:

npm install -D @playwright/test

#Menginstall Browser Binaries

Setelah package terpasang, unduh browser binaries:

npx playwright install

Perintah npx playwright install mengunduh Chromium, Firefox, dan WebKit sekaligus. Di Linux, kalian mungkin perlu dependencies sistem tambahan yang bisa dipasang dengan:

npx playwright install --with-deps

#File .gitignore

Browser binaries tersimpan di direktori cache sistem, bukan di project — jadi tidak perlu di-commit. Yang perlu ditambahkan ke .gitignore adalah hasil test:

node_modules/
test-results/
playwright-report/

#Menyiapkan playwright.config.ts

#Konfigurasi Lengkap untuk Project

File playwright.config.ts adalah pusat kendali seluruh suite. Contoh lengkap yang akan menjadi pola di series ini:

playwright.config.ts lengkap

import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  expect: {
    timeout: 5000,
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

Konfigurasi di atas memakai fullyParallel agar test berjalan paralel, forbidOnly untuk mencegah test.only lolos di CI, dan retries yang otomatis lebih agresif saat berjalan di CI. Report dipilih html untuk kemudahan inspeksi hasil.

#Menjalankan Test Pertama dengan CLI

#Test Contoh dan Perintah Dasar

Buat test pertama:

tests/awal.spec.ts

import { test, expect } from '@playwright/test';
 
test('judul halaman contoh', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example Domain/);
});

Jalankan seluruh suite:

npx playwright test

Untuk menjalankan satu file, satu test, atau dengan UI interaktif:

npx playwright test tests/awal.spec.ts
npx playwright test -g "judul halaman"
npx playwright test --ui
npx playwright test --headed

--ui membuka Playwright UI yang interaktif, sedangkan --headed menjalankan browser dengan jendela terlihat sehingga kalian bisa mengamati jalannya test.

#Membuka Report

Setelah suite selesai, buka HTML report:

npx playwright show-report

Report HTML menampilkan hasil per test, langkah demi langkah, beserta trace dan screenshot jika tersedia. Ini akan menjadi teman setia kalian saat debugging.

#Mengelola Timeout dan Retries

#Timeout: Per Test vs Per Assertion

Ada dua level timeout yang paling sering disetel:

• Per test: batas waktu keseluruhan satu test, diatur lewat timeout di config.
• Per assertion: batas waktu menunggu satu assertion, diatur lewat expect.timeout.

Timeout per assertion penting karena auto-waiting Playwright menunggu kondisi assertion — misalnya elemen visible — sampai batas waktu ini tercapai sebelum dianggap gagal.

#Retries dan Kapan Memakainya

Retries menjalankan ulang test yang gagal. Default yang sehat untuk CI adalah 1-2 retries, dan 0 di lokal agar feedback cepat:

lokal:  retries 0
ci:     retries 2
staging: retries 3

Verifikasi konfigurasi kalian berjalan dengan:

npx playwright --version
npx playwright test --list

npx playwright test --list menampilkan daftar test tanpa menjalankannya, berguna untuk memastikan file test terbaca dan nama test sudah benar.

#Penutup

Episode 3 ini membuat project Playwright kalian benar-benar jalan: menginstall package dan browser dependencies, menyusun playwright.config.ts dengan project Chromium, Firefox, dan WebKit, menjalankan test pertama lewat CLI, serta memahami cara mengelola timeout dan retries untuk suite yang stabil.

Inti yang harus dibawa pulang:

• npm init playwright@latest adalah jalan tercepat untuk project baru.
• npx playwright install dibutuhkan sekali untuk mengunduh browser binaries.
• playwright.config.ts mengontrol testDir, project, timeout, dan retries.
• expect.timeout mengatur berapa lama assertion menunggu kondisi.
• Retries menutupi flakiness, tapi root cause tetap harus diselesaikan.

Di episode 4 selanjutnya kita akan membahas mengambil elemen dan berinteraksi dengan halaman — strategi locator berbasis text, role, CSS, dan XPath, interaksi dasar seperti click, fill, select, dan hover, serta bagaimana auto-waiting dan retry-ability bekerja di balik setiap aksi.