Belajar Cypress - Visual Testing & Regression

#Pendahuluan

Assertion teks tidak bisa menangkap perubahan visual: tombol yang bergeser, warna yang berubah, atau font yang rusak. Episode 16 membahas visual testing — integrasi dengan Percy dan Applitools, baseline screenshots, visual diff, serta deteksi layout regressions dan UI drift.

Visual testing menambah dimensi pengujian: apa yang kalian lihat, bukan hanya apa yang tertulis.

#Integrasi dengan Percy dan Applitools

#Mengenal Percy dan Applitools

Percy dari BrowserStack dan Applitools adalah layanan visual regression. Keduanya menyediakan SDK yang menangkap screenshot, menyimpannya sebagai baseline, dan membandingkannya dengan snapshot berikutnya. Install SDK pilihan kalian:

npm install -D @percy/cli @percy/cypress

npm install -D @percy/cli @percy/cypress menambahkan CLI dan adapter Cypress untuk Percy. Applitools memakai @applitools/eyes-cypress dengan konsep Eyes yang serupa.

#Menghubungkan ke Cypress

Snapshot visual dengan Percy

import "@percy/cypress";
 
it("tampilan dashboard konsisten", () => {
  cy.visit("/dashboard");
  cy.get("[data-cy=konten]").should("be.visible");
  cy.percySnapshot("dashboard");
});

cy.percySnapshot("dashboard") mengirim snapshot ke layanan Percy dengan nama dashboard. Snapshot pertama menjadi baseline; snapshot berikutnya dibandingkan dengannya.

#Baseline Screenshots dan Visual Diff

#Konsep Baseline

Visual regression bergantung pada baseline — gambar yang dianggap benar. Saat snapshot baru berbeda dari baseline, layanan menandainya sebagai perubahan yang perlu disetujui atau ditolak:

npx percy exec -- npx cypress run

npx percy exec -- npx cypress run membungkus run Cypress dengan agen Percy. Token PERCY_TOKEN harus disediakan di environment agar snapshot bisa diunggah.

#Memahami Visual Diff

Diff dihitung piksel per piksel dengan toleransi. Perbedaan kecil seperti anti-aliasing font bisa diabaikan lewat threshold; perubahan besar ditampilkan dengan area yang disorot. Keputusan approve atau reject menjadi bagian dari alur review tim — ini bukan hanya pekerjaan CI.

#Mendeteksi Layout Regressions dan UI Drift

#Regresi Layout

Regresi layout muncul saat CSS berubah tanpa disadari: elemen tumpang tindih, margin berubah, atau komponen terpotong. Visual testing menangkapnya dengan jelas:

Snapshot pada beberapa viewport

["desktop", "mobile"].forEach((ukuran) => {
  it(`tampilan konsisten di ${ukuran}`, () => {
    if (ukuran === "mobile") {
      cy.viewport(375, 667);
    }
    cy.visit("/beranda");
    cy.percySnapshot(`beranda-${ukuran}`);
  });
});

cy.viewport(375, 667) mensimulasikan layar ponsel. Snapshot per viewport membuat regresi layout di berbagai ukuran layar terdeteksi.

#UI Drift

UI drift adalah perubahan visual bertahap yang tidak disadari sampai terakumulasi. Baseline yang diperbarui secara disiplin — bukan otomatis tanpa review — menjaga drift tetap terlihat. Tetapkan pemilik review snapshot agar tidak ada perubahan yang lolos tanpa pengawasan.

#Best Practices Visual Regression

#Kapan Memakai Visual Testing

Tidak semua halaman perlu visual test. Prioritaskan:

• Halaman dengan layout kompleks yang rawan berubah.
• Komponen yang dipakai banyak tempat, seperti header dan footer.
• Halaman beranda atau halaman marketing yang sering di-retouch.

#Menjaga Snapshot Tetap Relevan

Update baseline dengan sengaja saat perubahan memang diinginkan:

npx percy approve <build-id>

npx percy approve <build-id> menyetujui snapshot yang berubah dan menjadikannya baseline baru. Proses ini harus melibatkan manusia — mengapprove otomatis berarti menghapus fungsi visual testing itu sendiri.

#Penutup

Episode 16 menambahkan dimensi visual pada pengujian: integrasi Percy dan Applitools, konsep baseline dan visual diff, deteksi layout regressions di berbagai viewport, serta best practices menjaga snapshot tetap relevan dengan review manusia.

Inti yang harus dibawa pulang:

• Visual testing menangkap regresi yang tidak terlihat oleh assertion teks.
• Snapshot pertama menjadi baseline untuk perbandingan berikutnya.
• Uji beberapa viewport agar regresi layout lintas perangkat terdeteksi.
• Approve baseline melibatkan manusia, bukan otomatis.
• Freeze data dinamis sebelum mengambil snapshot.

Di episode 17 selanjutnya kita akan membahas accessibility testing — menambahkan axe-core untuk accessibility assertions, menguji keyboard navigation, ARIA roles, dan semantic HTML, memahami accessibility rules, serta membangun accessible test flows.