2. Setup Playwright | Playwright Academy

Playwright adalah alat gratis buatan Microsoft untuk menggerakkan browser lewat kode.

Di dunia QA

Bayangkan rekan tester yang tidak pernah capek. Kamu memberinya test case tertulis, lalu ia menjalankannya di Chrome, Firefox, dan Safari, persis sama setiap kali. Playwright adalah rekan itu, dan test case-nya kamu tulis sebagai kode.

Apa itu Playwright?

Fitur	Artinya buat kamu
Banyak browser	Satu test jalan di Chromium (Chrome, Edge), Firefox, dan WebKit (mesin Safari)
Banyak bahasa	TypeScript/JavaScript, Python, Java, dan .NET, dengan konsep yang sama
Auto-waiting	Playwright menunggu elemen siap sebelum beraksi, jadi kamu hampir tidak perlu `sleep`
Selalu mulai bersih	Setiap test dapat browser context baru dalam sepersekian detik
Alat bantu lengkap	Codegen (perekam aksi), Inspector, Trace Viewer, UI Mode, HTML report
Bukan hanya UI	API test, mock respons server, emulasi HP, lokasi GPS, mode gelap

Cara kerjanya

Kode test kamu
Python / TypeScript

Library Playwright
menerjemahkan perintah

Browser
Chromium · Firefox · WebKit

Kodemu memberi perintah, misalnya "klik tombol Masuk". Playwright menerjemahkannya, lalu mengirimnya ke browser lewat sambungan yang selalu terbuka.

Di dunia QA

Mirip QA lead yang membacakan langkah test case lewat telepon ke tester di depan layar. Teleponnya tidak ditutup, jadi tester juga bisa langsung melapor: "pop-up muncul", "halaman error", "tab baru terbuka".

Sambungannya dua arah, jadi Playwright juga mendengar yang terjadi di browser: request ke server, pop-up, tab baru, dan error. Dari situ auto-waiting dan mock respons server bekerja.

Playwright Python membawa mesin Node.js di dalamnya, jadi Python dan TypeScript memakai mesin yang sama. Bedanya hanya gaya penulisan: Python memakai snake_case, TypeScript memakai camelCase.

Playwright dibanding alat lain

	Playwright	Selenium	Cypress
Browser	Chromium, Firefox, WebKit	Semua (lewat driver)	Chromium, Firefox, WebKit masih percobaan
Bahasa	TS/JS, Python, Java, .NET	Banyak sekali	JS/TS saja
Auto-waiting	Bawaan	Diatur sendiri	Bawaan
Banyak tab dan iframe	Mudah	Repot	Terbatas
Kecepatan	Sangat cepat	Sedang	Cepat
Alat debug	Trace Viewer, UI Mode	Sedikit	Time-travel runner

Selenium masih banyak dipakai di perusahaan yang sudah lama berdiri, jadi tetap bagus dikenal. Untuk project baru, Playwright menjadi pilihan banyak tim.

Pilih Python atau TypeScript?

Dua-duanya sama bagus, dan tutorial ini selalu menampilkan keduanya.

Pertimbangan	Python	TypeScript
Ramah pemula	Paling ramah, tanpa `await`	Perlu paham `async/await` dulu
Test runner	`pytest` + plugin `pytest-playwright`	`@playwright/test`, fiturnya paling lengkap
Cocok untuk tim	Data, backend Python, QA yang baru belajar coding	Frontend JS/TS, full-stack

Baru pertama belajar coding? Mulai dari Python. Tim developer di kantormu memakai React atau Next.js? Pilih TypeScript, supaya alatnya sama dengan tim.

Menyiapkan project baru dari nol

Langkah ini sudah kamu jalankan di Persiapan. Di sini arti setiap perintahnya, supaya kamu bisa mengulanginya untuk project baru, misalnya di kantor.

Python pakai uv (cepat & modern)TypeScript pakai npm

# 1. Buat folder project baru bernama toko-tests, dengan Python 3.12
uv init --no-package toko-tests --python 3.12
# Masuk ke folder project itu
cd toko-tests

# 2. Tambahkan test runner pytest dan plugin Playwright
uv add pytest pytest-playwright

# 3. Unduh browser (sekali per komputer, ulangi setelah memperbarui Playwright)
uv run playwright install

# 4. Cek versinya
uv run playwright --version

# 1. Wizard resmi: membuat config, contoh test, dan mengunduh browser
npm init playwright@latest toko-tests

# --- atau manual ---
mkdir toko-tests                 # buat folder project
cd toko-tests                    # masuk ke folder itu
npm init -y                      # buat package.json dengan jawaban standar
npm install -D @playwright/test  # install Playwright Test sebagai alat development
npx playwright install           # unduh browser untuk test

# Cek versinya
npx playwright --version

Belum punya uv? Pakai cara lama: python -m venv .venv, aktifkan venv-nya, lalu pip install pytest-playwright dan playwright install. uv hanya membuatnya lebih cepat dan rapi.

Kenapa -D? Playwright hanya dipakai saat menulis dan menjalankan test, bukan saat aplikasi dipakai pengguna. Jadi ia dicatat sebagai devDependency di package.json.

Konfigurasi lengkap project contoh

Ini konfigurasi project contoh Academy, yang menjalankan semua contoh di tutorial. Punyamu masih lebih sederhana. Setiap bagiannya dijelaskan di modul yang membahasnya.

pyproject.tomlplaywright.config.tsLulus test

Memuat pyproject.toml…

Memuat playwright.config.ts…

Lebih jauh (opsional)Trik komunitas

uv menggantikan pip dan venv. Install-nya jauh lebih cepat, dan satu file pyproject.toml menyimpan daftar paket sekaligus pengaturan pytest.
Ekstensi VS Code "Playwright Test" (TypeScript): jalankan test sekali klik, centang Show browser, lalu pakai Pick locator dan Record new. Untuk Python, ekstensi Python dari Microsoft (bersama Pylance) sudah bisa menjalankan pytest dari panel Testing.
Unduh browser secukupnya. Untuk belajar, playwright install chromium sudah cukup. Di server CI tanpa layar, tambahkan --only-shell supaya unduhannya lebih kecil.
--with-deps di Linux atau CI sekalian menginstall library sistem yang dibutuhkan browser.
Sejak versi 1.57, Chromium bawaan Playwright memakai build Chrome for Testing (mode headless memakai chrome-headless-shell). Test lama tetap jalan, yang berubah hanya ikon dan judul jendela browser.

# Hanya Chromium tanpa jendela (untuk CI), unduhan lebih kecil
uv run playwright install chromium --only-shell
# Linux atau CI: browser sekaligus library sistem yang dibutuhkannya
uv run playwright install --with-deps chromium

# Hanya Chromium tanpa jendela (untuk CI), unduhan lebih kecil
npx playwright install chromium --only-shell
# Linux atau CI: browser sekaligus library sistem yang dibutuhkannya
npx playwright install --with-deps chromium

Latihan

Kerjakan di terminal laptopmu, lalu cocokkan hasilnya dengan jawaban.

Latihan 1

Cek versi Playwright

Buka terminal di folder project-mu (playwright-python atau playwright-typescript), lalu tampilkan versi Playwright yang terinstall.

Hasilterminal menampilkan versi Playwright, misalnya Version 1.63.0

Sudah dicoba

# Masuk ke folder project (lewati kalau terminal VS Code sudah di folder ini)
cd playwright-python
# Tampilkan versi Playwright
uv run playwright --version

# Masuk ke folder project (lewati kalau terminal VS Code sudah di folder ini)
cd playwright-typescript
# Tampilkan versi Playwright
npx playwright --version

Keluarannya kira-kira Version 1.63.0 (boleh lebih baru). Kalau muncul command not found, ulangi langkah Install bahasa pemrogramanmu dan Siapkan project di halaman Persiapan.

Latihan 2

Temukan base URL aplikasi

Buka pyproject.toml (Python) atau playwright.config.ts (TypeScript). Cari base_url atau baseURL, lalu tulis nilainya dan gunanya dengan kalimatmu sendiri.

Hasilkamu tahu nilai base URL dan gunanya

Sudah dicoba

Latihan 3

Jalankan satu test dari terminal

Jalankan test pertamamu dari Persiapan, lalu jalankan sekali lagi dengan browser yang terlihat (headed).

Hasilterminal menulis bahwa semua test lulus (passed)

Sudah dicoba

# Jalankan di belakang layar (headless)
uv run pytest tests/test_pertama.py
# Jalankan dengan jendela terlihat, setiap aksi diperlambat 300 milidetik
uv run pytest tests/test_pertama.py --headed --slowmo 300

# Jalankan di belakang layar (headless), hanya di Chromium
npx playwright test tests/pertama.spec.ts --project=chromium
# Jalankan dengan jendela terlihat
npx playwright test tests/pertama.spec.ts --project=chromium --headed

Dengan --headed, jendela browser terlihat bergerak sendiri. Tanpa itu, test jalan di belakang layar dan biasanya lebih cepat.