Belajar Cypress - Dashboard & Reporting

#Pendahuluan

Test yang berjalan tanpa rekaman hasil adalah lubang hitam. Episode 11 membahas lapisan observabilitas: Cypress Dashboard, video recording dan screenshots, reporter seperti Mochawesome untuk CI, serta cara membaca hasil run dan debugging kegagalan dari artefak yang dihasilkan.

Setelah episode ini, kalian bisa menjelaskan apa pun yang terjadi di suite kalian — bahkan saat test gagal di tengah malam di CI.

#Fitur Cypress Dashboard

#Mendaftarkan Project ke Dashboard

Cypress Dashboard adalah layanan cloud yang menerima hasil run dari Test Runner. Untuk memakainya, daftarkan project sekali:

npx cypress open

npx cypress open membuka Test Runner; dari menu Runs kalian bisa membuat project ID dan memasang recordKey. Selanjutnya setiap run bisa dikirim ke Dashboard dengan flag --record.

#Yang Ditawarkan Dashboard

Setelah terhubung, Dashboard memberikan ringkasan run: status per spec, durasi, video, screenshots dari kegagalan, dan analytics flakiness dari waktu ke waktu. Fitur Smart Orchestration menyeimbangkan test ke seluruh runner paralel secara otomatis — akan kita pakai di episode 14.

#Video Recording dan Screenshots

#Mengaktifkan Rekaman

Secara bawaan Cypress merekam video setiap run headless dan mengambil screenshot saat test gagal:

Konfigurasi video dan screenshot

module.exports = defineConfig({
  e2e: {
    video: true,
    screenshotOnRunFailure: true,
    trashAssetsBeforeRuns: true,
  },
});

video: true mengaktifkan rekaman video ke folder cypress/videos. screenshotOnRunFailure: true memastikan setiap kegagalan menangkap gambar kondisi layar. Video dan screenshot ini adalah bukti utama saat debugging.

#Memakai Screenshot Secara Eksplisit

Selain otomatis, kalian bisa mengambil screenshot di titik tertentu:

Screenshot eksplisit

it("menampilkan halaman profil", () => {
  cy.visit("/profil");
  cy.get("[data-cy=kartu-profil]").should("be.visible");
  cy.screenshot("halaman-profil");
});

cy.screenshot("halaman-profil") menyimpan gambar dengan nama tertentu di folder cypress/screenshots. Berguna untuk dokumentasi visual, laporan regresi, atau artefak pembanding sebelum kita masuk ke visual testing di episode 16.

#Reporters, Mochawesome, dan CI Reporting

#Mochawesome Reporter

Untuk laporan HTML yang kaya, pasang reporter Mochawesome:

npm install -D mochawesome

npm install -D mochawesome menambahkan reporter yang menghasilkan laporan HTML dan JSON per spec. Laporan ini bisa digabung dan diupload ke CI sebagai artefak.

#Menjalankan dengan Reporter Kustom

npx cypress run --reporter mochawesome --reporter-options reportDir=cypress/reports

--reporter mochawesome mengganti reporter bawaan. Opsi reportDir=cypress/reports menentukan tempat laporan disimpan. Hasilnya berupa file HTML yang bisa dibuka atau diarsipkan di CI.

#Menganalisis Test Runs dan Debugging Failures

#Membaca Laporan dan Artefak

Saat run selesai, alur debugging yang baik: buka laporan, temukan spec yang gagal, buka screenshot kegagalan, tonton videonya, lalu bandingkan dengan log perintah di Dashboard. Perhatikan pula pesan error dan stack trace yang dicetak Cypress:

  X Berhasil login
      AssertionError: expected '/login' to include '/dashboard'

Pesan expected '/login' to include '/dashboard' menunjukkan assertion yang gagal dan nilai aktualnya. Dari informasi ini, kalian tahu test tidak sampai diarahkan ke dashboard — bisa karena kredensial salah, redirect rusak, atau elemen submit tidak terklik.

#Membandingkan Antar Run

Dashboard menampilkan riwayat run sehingga flakiness terlihat sebagai pola: test yang kadang lulus kadang gagal. Tandai test yang ragu-ragu dan tangani dengan prinsip di episode 13 dan 15. Konsistensi run lebih berharga daripada jumlah test yang banyak.

#Penutup

Episode 11 menjadikan hasil test dapat diamati: Cypress Dashboard untuk riwayat dan analytics, video dan screenshots sebagai bukti kondisi, reporter Mochawesome untuk laporan CI, serta pola debugging berbasis artefak yang sistematis.

Inti yang harus dibawa pulang:

• Daftarkan project di Cypress Dashboard lalu jalankan dengan --record.
• video: true dan screenshotOnRunFailure: true menghasilkan bukti visual.
• cy.screenshot(nama) mengambil tangkapan layar eksplisit.
• Mochawesome menghasilkan laporan HTML untuk CI.
• Debugging dimulai dari laporan, screenshot, video, lalu log perintah.

Di episode 12 selanjutnya kita akan membahas API testing dan network stubbing — memakai cy.intercept() untuk men-stub API, menguji error responses, retries, dan fallback flows, memvalidasi UI dengan data backend tiruan, serta full-stack testing dengan integrasi backend.