[PROJECT] DEMOBLAZE : PLAYWRIGHT AUTOMATION FRAMEWORK

Proyek ini adalah framework automation pengujian fungsionalitas UI untuk website DemoBlaze. Framework ini dibangun dengan standar industri untuk memastikan reliabilitas, skalabilitas, dan laporan yang transparan bagi tim pengembang maupun pemangku kepentingan bisnis.

🛠️ Tech Stack

• Engine: Playwright
• Language: JavaScript (Node.js)
• Reporting: Allure Report
• CI/CD: GitHub Actions
• Data Provider: XLSX Library

📊 Demo & Live Report

Hasil eksekusi tes terbaru dapat diakses secara publik. Dashboard ini mencakup tren riwayat pengujian, kategori fitur, dan bukti visual untuk setiap test case. 👉 Lihat Allure Test Report

📊 Test Documentation

🌟 Fitur Kunci

• Page Object Model (POM): Arsitektur kode yang terorganisir untuk meningkatkan reusability dan kemudahan pemeliharaan.
• Data-Driven Testing (DDT): Integrasi dengan file Excel (.xlsx) untuk manajemen data uji yang fleksibel.
• CI/CD Pipeline: Integrasi penuh dengan GitHub Actions untuk pengujian otomatis pada setiap push atau pull request.
• Advanced Reporting: Menggunakan Allure Report untuk visualisasi data, grafik tren, dan pengelompokan fitur (Behaviors).
• Automated Evidence: Pengambilan Screenshot (Alert & UI State) serta Video secara otomatis pada setiap langkah krusial.

🌟Kegiatan yang dilakukan  

1. Tahap perencanaan dan analisis

1. Analisis Target (SUT): Menganalisis situs DemoBlaze untuk menentukan elemen-elemen kritikal (Login, Cart, Checkout).
2. Pemilihan Stack Teknologi: Memutuskan menggunakan Playwright (karena cepat & modern), JavaScript (bahasa dasar), dan Excel (XLSX) sebagai sumber data agar pengujian bisa dilakukan berulang kali tanpa mengubah kode.

2. Inisialisasi Project (Setup Dasar)

1. Environment Setup: Melakukan npm init untuk membuat file package.json.
2. Instalasi Dependencies: Menginstal library inti melalui terminal
3. Konfigurasi Awal: Membuat file playwright.config.js untuk mengatur timeout, browser, dan retry logic.

3. Pengembangan Arsitektur POM (Page Object Model)

1. Identifikasi Selector: Mencari ID, CSS, atau XPath dari setiap tombol dan form di website.
2. Pembuatan Class Page: Membuat folder pageobjects dan menyusun file seperti LoginPage.js, ProductPage.js, dll. Di sini kita membungkus aksi (seperti klik tombol login) ke dalam fungsi agar bisa dipanggil berkali-kali.

4. Penyiapan Data-Driven Testing (DDT)

1. Pembuatan Dataset: Menyusun file Excel di folder data/ (seperti signup_data.xlsx atau add_to_cart_data.xlsx).
2. Integrasi Logic: Menulis fungsi pembaca Excel di dalam file .spec.js sehingga skrip bisa melakukan looping (perulangan) otomatis sesuai jumlah baris data di Excel.

5. Penulisan Skrip Pengujian (Spec Files)

• Skenario Identitas: Membuat tes untuk Login dan Signup
• Skenario Produk & Cart: Membuat tes untuk navigasi kategori, tambah barang, verifikasi keranjang, hingga hapus barang
• Skenario Transaksi: Membuat alur checkout positif (berhasil) dan negatif (validasi form kosong)
• Skenario Pendukung: Mengetes modal About Us (video) dan Contact Us 

 
6. Optimasi untuk Kondisi Jaringan Buruk

• Smart Waiting (toPass): Menambahkan logika agar Playwright mencoba kembali (retry) navigasi jika gagal di tengah jalan.
• Image Blocking: Menambahkan skrip untuk tidak memuat gambar agar loading lebih ringan.
• Performance Metrics: Menambahkan kode untuk mencatat waktu muat halaman sebagai bukti laporan.

7. Pengaturan Pelaporan (Reporting)

• Artifacts: Mengatur agar framework otomatis mengambil screenshot dan rekaman trace jika ada langkah yang gagal.
• Allure/HTML Report: Mengonfigurasi reporter agar hasil pengujian bisa dilihat dalam bentuk grafik dan tabel yang mudah dipahami oleh tim lain.

8. Debugging & Finalisasi (Tahap Anda Sekarang)

• Perbaikan Error Config: Memperbaiki struktur playwright.config.js agar tidak terjadi error "No overload matches this call".
• Verifikasi Serial: Memastikan semua file berjalan harmonis dalam mode serial agar tidak terjadi tabrakan session di browser.

🧪 Skenario Pengujian (Test Scenarios)

Berikut adalah daftar skenario pengujian yang diimplementasikan dalam framework ini, mencakup validasi fungsionalitas utama (Happy Path) dan penanganan kesalahan (Negative Path).

1. Registrasi & Login (Identity)

• Positif:
  • Berhasil mendaftar akun baru dengan username unik (menggunakan generator otomatis).
  • Berhasil login dengan kredensial valid dan verifikasi nama profil di menu navigasi.
  • Berhasil logout dan memastikan sesi pengguna telah berakhir.
• Negatif:
  • Gagal daftar akun jika username sudah terpakai (Alert: "This user already exist.").
  • Gagal login jika password salah atau username tidak ditemukan (Alert: "Wrong password.").

2. Manajemen Produk & Keranjang (Cart)

• Positif:
  • Memastikan setiap kategori (Phones, Laptops, Monitors) menampilkan daftar produk yang relevan.
  • Verifikasi detail produk (Nama, Harga, Deskripsi) sesuai dengan data referensi Excel.
  • Berhasil menambahkan produk ke keranjang dan memvalidasi pesan alert sukses.
  • Berhasil menghapus produk dari keranjang dan memastikan tabel UI terupdate.
• Negatif:
  • Mencoba menambahkan produk ke keranjang saat koneksi terputus (Verifikasi mekanisme retry).

3. Proses Pembayaran (Checkout Flow)

• Positif:
  • TC_CH001 (Successful Purchase): Mengisi formulir "Place Order" dengan data lengkap (Nama, Negara, Kota, Kartu Kredit, dll) dan memverifikasi struk pembelian.
• Negatif:
  • TC_CH002 (Missing Name): Mencoba checkout dengan mengosongkan kolom Nama.
  • TC_CH003 (Missing Credit Card): Mencoba checkout dengan mengosongkan kolom Kartu Kredit.
  • Ekspektasi: Sistem menampilkan alert "Please fill out Name and Creditcard."

4. Fitur Informasi & Dukungan (Support)

• Positif:
  • Berhasil mengirim pesan dukungan melalui formulir "Contact" dengan email valid.
  • Memastikan modal "About Us" dapat memuat video promosi dengan benar.
• Negatif:
  • Mengirim formulir kontak dengan format email yang tidak valid atau kolom kosong.

🚀 Link

>> Click Here : Link Repository