Web Automation

Belajar Playwright untuk Web Automation Testing

Playwright adalah framework browser automation untuk menguji aplikasi web di Chromium, Firefox, dan WebKit. Cara belajar yang efektif bukan menghafal seluruh API, melainkan menguasai locator, sinkronisasi, assertion, isolasi test, dan debugging melalui satu alur web yang nyata.

Lihat kelas yang tersedia

Panduan Ini Cocok untuk Siapa?

  • Pemula yang ingin memulai web UI automation
  • QA yang menghadapi aplikasi web modern dan interaksi asynchronous
  • Pengguna Selenium yang ingin memahami pendekatan Playwright

Roadmap Belajar Bertahap

  1. Langkah 1

    Kenali browser dan DOM

    Pahami elemen HTML, role, label, atribut, event, serta perbedaan antara halaman selesai dimuat dan elemen benar-benar siap digunakan.

  2. Langkah 2

    Tulis alur pertama

    Buka halaman, temukan elemen dengan locator yang bermakna, lakukan interaksi, lalu buktikan hasilnya dengan assertion.

  3. Langkah 3

    Kelola setup dan data

    Gunakan fixture atau helper seperlunya, pisahkan data test, dan pastikan setiap test dapat berjalan sendiri.

  4. Langkah 4

    Debug dan jalankan di CI

    Pelajari trace, screenshot, report, retry yang terukur, lalu jalankan suite yang stabil di pipeline.

Konsep Inti Playwright yang Perlu Dikuasai

Locator adalah pusat dari test Playwright. Prioritaskan cara yang mencerminkan perilaku pengguna, seperti role, accessible name, label, atau teks yang stabil. Selector CSS yang panjang dan bergantung pada struktur visual cenderung mudah rusak ketika UI berubah.

Playwright memiliki auto-waiting untuk banyak action dan assertion. Meski begitu, test tetap perlu menunggu kondisi bisnis yang benar. Hindari sleep tetap; gunakan assertion atau kondisi eksplisit yang menggambarkan state yang ditunggu.

  • Browser, browser context, dan page sebagai tingkat isolasi yang berbeda
  • Locator yang dievaluasi ulang saat digunakan
  • Web-first assertion yang menunggu kondisi sampai batas waktu
  • Trace, screenshot, video, dan report untuk investigasi kegagalan

Menyusun Test Playwright yang Mudah Dibaca

Mulailah dengan test yang langsung dan jelas. Ketika pola berulang muncul, ekstrak helper atau page object secukupnya. Abstraksi yang terlalu dini dapat menyembunyikan maksud test dan membuat debugging lebih sulit.

Pisahkan aksi dari verifikasi dengan batas yang masuk akal. Nama test harus menjelaskan perilaku, sementara assertion memastikan hasil yang dapat diamati pengguna atau sistem.

  • Simpan base URL dan pilihan browser pada konfigurasi
  • Gunakan hook untuk setup yang benar-benar sama, bukan seluruh detail test
  • Jaga state antar-test tetap terisolasi
  • Gunakan tag atau project untuk mengelompokkan eksekusi bila diperlukan

Debugging dan Pencegahan Flaky Test

Ketika test gagal, bedakan kegagalan produk, data, environment, dan script. Baca pesan assertion serta trace sebelum menambah timeout. Timeout yang lebih besar dapat menyamarkan masalah sinkronisasi tanpa memperbaiki penyebabnya.

  • Periksa apakah locator menemukan elemen yang tepat dan unik
  • Tunggu response atau perubahan UI yang relevan, bukan jeda acak
  • Kontrol pembuatan serta pembersihan data test
  • Gunakan retry sebagai sinyal observasi, bukan solusi permanen

Urutan Project Latihan Playwright

Bangun suite kecil terlebih dahulu. Satu repository yang rapi dan dapat dijalankan ulang lebih berguna untuk belajar dibanding puluhan script tanpa struktur atau dokumentasi.

  • Test form: label, input, validasi, dan pesan error
  • Test daftar data: pencarian, filter, sorting, dan pagination
  • Test autentikasi dengan state yang dibuat secara aman
  • Cross-browser smoke test serta report di CI

Pertanyaan yang Sering Ditanyakan

Apakah Playwright hanya untuk aplikasi React?

Tidak. Playwright mengotomasi browser dan dapat digunakan pada aplikasi web dengan berbagai framework, selama halaman dapat diakses melalui browser yang didukung.

Apakah masih perlu memakai sleep di Playwright?

Sebisa mungkin tidak. Gunakan locator, assertion, atau penantian kondisi yang relevan. Jeda tetap memperlambat suite dan tetap dapat gagal ketika environment lebih lambat.

Apakah harus menggunakan Page Object Model?

Tidak selalu. Page object berguna ketika interaksi berulang dan batas halaman cukup jelas. Untuk test kecil, helper sederhana atau test langsung sering lebih mudah dipahami.

Playwright atau Selenium untuk pemula?

Keduanya dapat dipelajari oleh pemula. Pilih berdasarkan ekosistem tim, bahasa, browser target, dan project yang akan diuji. Fokus pada prinsip test design karena prinsip tersebut dapat dipindahkan antar-tool.

Lihat semua kelas Kelas Otomesyen