AI Class

Automasi Uji Regresi Visual dengan n8n + AI: Screenshot, Visual-Diff, dan Triage Otomatis

· 4 menit baca

Automasi Uji Regresi Visual dengan n8n + AI: Screenshot, Visual-Diff, dan Triage Otomatis

Uji regresi visual menjadi krusial ketika UI berubah cepat: bug visual bisa lolos walau semua tes fungsional lulus. Di artikel ini kamu akan mempelajari cara membangun pipeline otomasi uji regresi visual menggunakan n8n dan AI untuk screenshot, perbandingan visual (visual-diff), triage otomatis dan integrasi ke CI/CD serta notifikasi tim.

Mengapa automasi visual regression penting?

Perubahan kecil di CSS, font atau gambar bisa merusak pengalaman pengguna. Visual regression membantu mendeteksi perubahan visual yang tidak diinginkan dengan membandingkan screenshot antar versi. Dengan menambahkan n8n dan AI, kamu bisa:

  • Mengotomatiskan proses screenshot dari berbagai viewport dan perangkat.
  • Mendeteksi perubahan visual secara akurat (pixel diff + perceptual diff).
  • Menggunakan AI untuk mengevaluasi signifikansi perubahan dan mengurangi false positive.
  • Membuat triage otomatis: assign ticket, attach diff, dan memberi prioritas berdasarkan dampak.

Arsitektur high-level

Pipeline yang direkomendasikan terdiri dari komponen berikut:

  1. Runner screenshot (Playwright/Puppeteer) - menghasilkan screenshot baseline & new.
  2. n8n sebagai orkestrator - jadwalkan, jalankan, bandingkan, dan trigger AI triage.
  3. Visual-diff engine (pixelmatch, Resemble.js, atau SSIM/perceptual diff).
  4. AI triage (LLM atau model vision+LLM) untuk menjelaskan perubahan dan menentukan severity.
  5. Integrasi notifikasi: Slack, Jira/GitHub Issues, storage (S3) dan dashboard reporting.

Langkah-langkah konstruksi workflow di n8n

1. Trigger: Jadwalkan & CI Hook

Gunakan node Cron di n8n untuk jadwal harian/mingguan. Untuk CI, tambahkan webhook yang dipanggil oleh GitHub Actions atau GitLab CI saat ada PR/merge ke branch release.

2. Runner Screenshot

Node HTTP Request di n8n bisa memanggil service internal yang menjalankan Playwright. Alternatif: gunakan n8n Execute Command (self-hosted) untuk memicu skrip yang menghasilkan screenshot dan mengunggah ke S3.

// Contoh payload ke service screenshot
{
  "url": "https://example.com/page",
  "viewports": ["1920x1080","375x812"],
  "tag": "build-123"
}

3. Simpan Artefak

Simpan screenshot baseline dan current ke object storage (S3/MinIO). Simpan metadata (URL, build id, timestamp) di database ringan (Postgres/Firestore) untuk tracking dan historical.

4. Visual Diff

Gunakan node Function di n8n untuk memanggil visual-diff engine (mis. pixelmatch via service). Output yang penting: diff image, diff percentage (percent pixels changed), dan bounding boxes perubahan.

5. Thresholding & Filter

Terapkan threshold awal: jika diff < 0.5% — tandai sebagai minor/accepted. Jika di atas threshold, kirim ke AI triage.

6. AI Triage

Di sinilah n8n + AI shine. Kirim metadata dan diff summary (gambar atau link S3 + diff percentage + bounding boxes) ke model LLM atau pipeline vision+LLM untuk melakukan:

  • Deskripsi perubahan: "header berpindah 20px ke kiri"
  • Estimasi severity: low/medium/high
  • Saran tindakan: "assign ke tim frontend", "rollback style", atau "update baseline"

Contoh prompt singkat:

Berikan ringkasan masalah visual berdasarkan informasi berikut: 
- URL: {url}
- Diff%: {diff_percent}
- Bounding boxes: {boxes}
- Link diff image: {diff_url}

Kategorikan severity (low/medium/high) dan rekomendasikan langkah mitigasi singkat.

7. Automasi Triage: Ticket & Notifikasi

Jika AI mengkategorikan sebagai medium/high, n8n otomatis membuat issue di Jira/GitHub dengan deskripsi yang di-generate AI dan melampirkan diff image. Kirim juga notifikasi ke Slack channel dan tag pemilik komponen berdasar routing rules.

Tips untuk mengurangi false positives

  • Gunakan baseline yang tepat: baseline harus stabil dan di-update saat perubahan UI sengaja dilakukan.
  • Perceptual diff: pixelmatch saja sering sensitif; gabungkan algoritme perceptual seperti SSIM atau algoritme berbasis model vision.
  • Mask dynamic areas: area seperti timestamps, ads, atau carousel dinamis harus di-mask sebelum diff.
  • Batch screenshot: kelompokkan per komponen/page agar perbandingan lebih terfokus.
  • Gunakan AI untuk filtering: model dapat mempelajari pola false positive dan menolak perubahan yang tidak relevan.

Contoh implementasi singkat (aliran)

Berikut aliran singkat yang bisa di-implement di n8n:

  1. Cron trigger -> kirim job ke screenshot service
  2. Terima screenshot URLs -> simpan ke S3
  3. Panggil visual-diff service -> terima diff% dan diff image
  4. Jika diff% > threshold -> panggil AI triage (OpenAI/LLM lokal)
  5. AI mengembalikan severity & summary -> buat issue di GitHub + notifikasi Slack
  6. Jika developer menandai accepted via comment -> otomatis update baseline (opsional)

Contoh prompt AI yang efektif

Prompt yang baik memuat konteks, data numerik, dan link artifact. Contoh:

Anda adalah asisten QA visual. Ringkas ruang lingkup perubahan visual berdasarkan data berikut:
- URL: https://example.com/home
- Diff percent: 7.3
- Bounding boxes: [{x:10,y:20,w:300,h:50}, ...]
- Link diff image: https://s3/.../diff.png
Berikan: 1) ringkasan 2) kemungkinan penyebab 3) severity (low/medium/high) 4) suggested assignee berdasarkan komponen header/footer/main

Integrasi ke CI/CD (GitHub Actions)

Jalankan pipeline visual regression saat PR dibuat: workflow CI memanggil webhook n8n dengan build id dan environment. Jika hasil diff high, workflow dapat memblokir merge atau menambahkan label otomatis.

Penyimpanan & Retensi Artefak

Simpan artefak selama 30-90 hari tergantung regulasi dan kebutuhan audit. Gunakan lifecycle policy di S3/MinIO untuk menghemat biaya. Simpan ringkasan diff di DB untuk laporan trending visual changes.

Monitoring & Metrics

Lacak metrik:

  • Jumlah diffs per minggu
  • False positive rate (berdasarkan feedback)
  • Mean time to triage (AI + manusia)
  • Top pages with recurring visual drift

Kesimpulan

Menggabungkan n8n sebagai orkestrator dan AI untuk triage membuat pipeline uji regresi visual menjadi lebih efisien dan scalable. Dengan langkah-langkah: screenshot, visual-diff, thresholding, AI triage, dan integrasi notifikasi/issue tracker, tim bisa mendeteksi dan memperbaiki regresi visual lebih cepat—mengurangi gangguan UX dan mempercepat rilis.

Ingin template workflow n8n untuk automasi ini? Di JIPRAKS Classroom kita akan mempublikasikan contoh workflow & skrip Playwright yang siap dipakai. Tinggalkan komentar atau subscribe untuk notifikasi update.

Artikel terkait