Belajar Playwright - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Playwright! Series ini akan membawa kalian menguasai Playwright — framework end-to-end testing dan browser automation modern buatan Microsoft — dari fondasi konsep sampai production readiness. Total ada 23 episode yang tersusun dari enam fase.

Tapi sebelum menulis test pertama, ada beberapa skill dasar dan perangkat lunak yang wajib kalian miliki. Mengapa prasyarat ini penting? Karena Playwright berinteraksi dengan browser seperti pengguna asli: dia klik, mengetik, dan membaca halaman web. Kalau kalian belum paham bagaimana browser bekerja, seluruh API Playwright akan terasa seperti kotak hitam.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar, menyiapkan Node.js, menginstall Playwright beserta browser binaries, dan melakukan verifikasi pertama. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dikuasai

#Dasar Web: HTML, CSS, DOM, dan HTTP

Playwright bekerja di atas web platform. Kalian wajib paham bagaimana halaman dibangun dari HTML, bagaimana CSS menentukan tampilan, bagaimana DOM (Document Object Model) merepresentasikan halaman di memori browser, dan bagaimana HTTP membawa data antara browser dan server. Tanpa empat fondasi ini, istilah seperti selector atau response akan membingungkan.

#JavaScript atau TypeScript

Playwright berjalan di atas Node.js, dan seluruh contoh di series ini memakai TypeScript dengan dukungan penuh JavaScript. Pastikan sintaks dasar seperti arrow function, async/await, destructuring, dan module import sudah tidak asing. TypeScript bersifat opsional, tapi sangat disarankan karena autocompletion dan type safety membuat test lebih mudah dirawat.

#Konsep Automated Testing dan Test Pyramid

Pahami juga konsep automated testing: test ditulis sekali dan dijalankan berulang kali oleh mesin. Kenali test pyramid — banyak unit test di dasar, sebagian integration test di tengah, dan sedikit end-to-end test di puncak. Playwright adalah alat untuk lapisan paling atas: menguji alur lengkap aplikasi persis seperti pengguna.

#Perangkat Lunak yang Perlu Disiapkan

#Node.js dan Package Manager

Playwright membutuhkan Node.js versi 18 ke atas. Untuk mengelola dependency, kalian bisa memakai npm, yarn, atau pnpm. Series ini memakai npm karena paling universal. Verifikasi instalasi Node.js terlebih dahulu:

node --version
npm --version

Jika muncul peringatan bahwa versi Node.js sudah tua, upgrade dulu sebelum lanjut. Versi LTS (Long Term Support) adalah pilihan paling aman untuk project test.

#Playwright Package dan Browser Binaries

Playwright tidak hanya menginstall package npm, tapi juga browser binaries untuk Chromium, Firefox, dan WebKit. Kalian tidak perlu menginstall browser secara manual — ada perintah khusus Playwright yang mengunduhnya. Instalasi akan dilakukan di episode 3, tapi pastikan storage kalian menyisakan ruang karena browser binaries memakan sekitar 2-4 GB.

#IDE dan Git

Siapkan VS Code dengan ekstensi resmi Playwright untuk memperoleh fitur seperti running test langsung dari editor dan autocompletion selector. Siapkan juga Git untuk version control test suite kalian:

git --version

#Hardware Minimum yang Direkomendasikan

Menjalankan browser otomatis lebih berat daripada membuka browser biasa. Spesifikasi minimum yang disarankan:

• RAM minimal 4 GB, idealnya 8 GB untuk menjalankan test paralel.
• CPU dual-core, yang bisa dimanfaatkan dengan npx playwright test --workers=2.
• Storage 5 GB lebih untuk Node.js, browser binaries, dan artifact test seperti screenshot dan trace.

Jika kalian bekerja dengan laptop lama, jangan khawatir — kalian tetap bisa mengikuti series ini dengan mode single-worker dan menghindari menjalankan banyak browser sekaligus.

#Verifikasi Environment

#Instalasi Playwright

Sebelum episode 3, lakukan instalasi ringan untuk memastikan semuanya siap:

mkdir playwright-project
cd playwright-project
npm init -y
npm install -D @playwright/test
npx playwright install chromium

Perintah npx playwright install chromium mengunduh browser Chromium ke sistem kalian. Kalian bisa menambahkan firefox dan webkit sekarang, atau menunggu episode 10 saat kita membahas cross-browser testing.

#Menjalankan Verifikasi Pertama

Buat file test sederhana dan jalankan:

Verifikasi pertama Playwright

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

Jalankan dengan:

npx playwright test

Jika tidak ada error dan muncul pesan passed, environment kalian sudah siap. Metode page.goto() membuka halaman, dan expect(page).toHaveTitle() memverifikasi judulnya — detail keduanya akan kita bedah di episode 3 dan 7.

#Penutup

Di episode 0 ini kalian sudah menyiapkan pijakan untuk seluruh series: memahami dasar web dan JavaScript, konsep automated testing dan test pyramid, menyiapkan Node.js, menginstall Playwright beserta browser Chromium, dan memverifikasi operasi pertama kali.

Inti yang harus dibawa pulang:

• Playwright mengotomasi browser seperti pengguna asli: kuasai dulu HTML, CSS, DOM, dan HTTP.
• Pahami posisi end-to-end testing di puncak test pyramid.
• Node.js versi 18 ke atas adalah syarat mutlak untuk menjalankan Playwright.
• Browser binaries harus diinstall lewat npx playwright install, bukan secara manual.
• Verifikasi pertama: buka halaman, cek judul, dan pastikan test berstatus passed.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa memilih Playwright — dari akarnya di tim Puppeteer Microsoft, keunggulan auto-waiting dan cross-browser, hingga perbandingannya dengan Selenium, Cypress, dan Puppeteer. Pastikan environment kalian sudah siap, karena perjalanan Belajar Playwright baru saja dimulai!