Tujuan Pembelajaran

Bisa setup Playwright
Menguasai locator, actions, dan assertions
Mengerti test isolation dan fixtures

Analogi

Diagram


      Playwright:
├── Multi-browser (Chrome, Firefox, Safari)
├── Auto-wait (tidak perlu sleep)
├── Codegen (rekam jadi test)
├── Trace viewer
└── Parallel execution

Playwright adalah E2E testing framework modern dari Microsoft — cepat, reliable, dan developer-friendly

Penjelasan Konsep

E2E test menguji aplikasi seperti user nyata: buka browser, klik tombol, isi form, navigasi halaman. Ini adalah test yang paling mirip dengan apa yang user lakukan.

Kenapa Playwright?

Auto-wait: Playwright otomatis menunggu elemen siap — tidak perlu sleep atau waitFor manual
Multi-browser: Chrome, Firefox, Safari — semuanya dengan satu API
Codegen: Rekam interaksi browser dan generate test script otomatis
Trace viewer: Lihat screenshot, video, dan network log saat test gagal
Speed: Parallel execution dan worker isolation

Setup Playwright

Setup Playwright npm init playwright@latest

Locator Strategies

Playwright menyarankan menggunakan atribut data-testid atau semantic locators:

page.getByTestId(‘submit-button’) page.getByRole(‘button’,

{ name: ‘Submit’ }) page.getByLabel(‘Email’) page.getByPlaceholder(‘Enter email’)

Test Isolation

Setiap test berjalan di context browser terpisah — cookies, localStorage, dan session tidak bocor antar test.

Fixtures

Fixtures adalah mekanisme setup/teardown.

Bisa extend untuk custom setup seperti authenticated state.

Inti yang Perlu Dipahami

Bagian ini berfokus pada bisa setup Playwright., menguasai locator, actions, dan assertions., dan mengerti test isolation dan fixtures. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca E2E Testing dengan Playwright, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Playwright adalah E2E testing framework modern dari Microsoft — cepat, reliable, dan developer-friendly. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. getByLabel dan getByRole adalah locators yang accessible — tidak bergantung pada struktur DOM. toHaveURL memeriksa navigasi.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// tests/auth.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Authentication', () => {
  test('user can login', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByText('Welcome back')).toBeVisible();
  });
  
  test('shows error for invalid credentials', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('wrong@example.com');
    await page.getByLabel('Password').fill('wrong');
    await page.getByRole('button', { name: 'Login' }).click();
    await expect(page.getByText('Invalid credentials')).toBeVisible();
  });
  
  test('user can logout', async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill('user@example.com');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Login' }).click();
    await page.getByRole('button', { name: 'Menu' }).click();
    await page.getByText('Logout').click();
    await expect(page).toHaveURL('/login');
  });
});

Penjelasan Kode

getByLabel dan getByRole adalah locators yang accessible — tidak bergantung pada struktur DOM. toHaveURL memeriksa navigasi.

Prompt AI

Setup Playwright untuk aplikasi React-mu. Tulis E2E test untuk flow: register → login → create post → logout.

Pertanyaan Reflektif

Gunakan Playwright codegen untuk merekam interaksi manual: npx playwright codegen. Bandingkan dengan test yang kamu tulis manual.