Playwright Basics
Menulis test Playwright kecil yang membuka route, menemukan UI melalui locator, dan memeriksa hasilnya.
Tujuan belajar
- Menjelaskan peran Playwright sebagai browser test runner
- Mengenali test, page, goto, locator, dan expect
- Menulis satu journey browser yang kecil
- Menjalankan test dari project lokal setelah setup tersedia
Isi lesson
6 blok- 1.Mulai dari satu file dan satu journey browserBelum selesaiWajib
- 2.Setup Playwright dari project lokalBelum selesaiWajib
- 3.Buka route lalu periksa heading yang terlihatBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.Jangan memulai dari suite atau config yang kompleksBelum selesaiWajib
- 6.RingkasanBelum selesaiWajib
Mulai dari satu file dan satu journey browser
WajibPlaywright Test menyediakan test runner, browser automation, locator, dan assertion untuk aplikasi web. Setiap test menerima page yang mewakili halaman browser terisolasi. Journey paling kecil biasanya dimulai dari page.goto, mencari satu element dengan locator yang user-facing, lalu memakai expect untuk menyatakan output yang harus terlihat. Jalankan installer dan browser download hanya dari folder project lokal yang benar. FluentStack membaca struktur code; practice workspace tidak membuka browser Playwright atau menjalankan command test.
Bagian ini memengaruhi progres lesson.
Setup Playwright dari project lokal
Wajibnpm init playwright@latest
npx playwright testCommand pertama menambah atau menginisialisasi Playwright sesuai prompt setup. Command kedua menjalankan test setelah browser serta konfigurasi yang diperlukan tersedia. Baca perubahan package.json, playwright.config, dan folder test sebelum mengubah opsi lanjutan. Jangan menyalin setup dari project lain tanpa mengecek framework serta command lokalmu.
Bagian ini memengaruhi progres lesson.
Buka route lalu periksa heading yang terlihat
Wajibimport { expect, test } from "@playwright/test";
test("opens the learning page", async ({ page }) => {
await page.goto("/learn");
await expect(
page.getByRole("heading", { name: "Frontend Engineering" }),
).toBeVisible();
});page.goto membuka route target. getByRole mencari heading berdasarkan semantics dan accessible name, lalu expect menunggu kondisi visible yang relevan. Base URL, web server, dan browser binary adalah bagian setup lokal, sehingga result yang sebenarnya harus dibaca dari terminal Playwright.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususWrite first Playwright lesson test
Tulis test Playwright kecil yang membuka lesson lalu memastikan heading lesson terlihat. Preview tidak menjalankan browser test.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Peringatan
WajibJangan memulai dari suite atau config yang kompleks
Jangan langsung menambah banyak project browser, retry, fixture custom, auth storage, atau CI workflow. Pastikan satu route dan satu assertion dapat berjalan terlebih dahulu. Bila test gagal, lihat route, locator, server lokal, dan error report sebelum mengubah timeout.
Bagian ini memengaruhi progres lesson.
Ringkasan
Wajib- Playwright menjalankan action dan assertion pada browser yang terisolasi.
- Test awal cukup berisi goto, locator user-facing, serta satu assertion visible.
- Setup browser, base URL, dan result test merupakan tanggung jawab local project.
- Jangan memperbesar config sebelum test kecil dapat dibaca dan dijalankan.
- Berikutnya, journey akan disusun sebagai flow produk yang jelas, bukan kumpulan click acak.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Mulai dari satu file dan satu journey browser.