Pelajari cara menerapkan pengujian visual frontend yang andal dengan Chromatic dan Percy. Panduan ini memberikan tinjauan komprehensif bagi developer, mencakup penyiapan, praktik terbaik, dan teknik lanjutan.
Pengujian Visual Frontend: Tinjauan Mendalam Integrasi Chromatic dan Percy
Dalam lanskap pengembangan web yang serba cepat saat ini, memastikan antarmuka pengguna (UI) yang konsisten dan menarik secara visual di berbagai browser, perangkat, dan ukuran layar adalah hal yang terpenting. Namun, pengujian UI manual memakan waktu, rentan terhadap kesalahan, dan seringkali gagal menangkap regresi visual yang halus. Di sinilah pengujian visual frontend berperan, menawarkan solusi ampuh untuk mengotomatiskan pemeriksaan UI dan menjaga integritas visual di seluruh siklus pengembangan. Panduan komprehensif ini mengeksplorasi dua platform pengujian visual terkemuka: Chromatic dan Percy, merinci integrasi, manfaat, dan praktik terbaiknya bagi para developer di seluruh dunia.
Memahami Pengujian Visual Frontend
Pengujian visual frontend, juga dikenal sebagai pengujian regresi visual atau pengujian tangkapan layar, mengotomatiskan proses membandingkan tangkapan layar UI dengan garis dasar (baseline) untuk mendeteksi perubahan visual. Ini memungkinkan developer untuk mengidentifikasi perubahan tak terduga pada UI yang disebabkan oleh modifikasi kode, pembaruan desain, atau pembaruan browser. Pendekatan ini secara signifikan mengurangi risiko merilis antarmuka pengguna yang rusak secara visual atau tidak konsisten kepada pengguna, yang pada akhirnya meningkatkan pengalaman pengguna.
Manfaat Pengujian Visual
- Deteksi Kesalahan Sejak Dini: Menangkap bug visual di awal siklus pengembangan, sebelum mencapai produksi.
- Kualitas Kode yang Lebih Baik: Mendorong developer untuk menulis kode yang lebih bersih dan mudah dipelihara.
- Siklus Pengembangan Lebih Cepat: Mengotomatiskan proses pengujian, menghemat waktu dan sumber daya.
- Pengalaman Pengguna yang Ditingkatkan: Memastikan UI yang konsisten dan menarik secara visual di semua platform.
- Mengurangi Upaya Pengujian Manual: Membebaskan tim QA untuk fokus pada skenario pengujian yang lebih kompleks.
- Peningkatan Kepercayaan Diri dalam Rilis: Memberikan jaminan lebih besar bahwa UI berfungsi seperti yang diharapkan.
Memperkenalkan Chromatic dan Percy
Chromatic dan Percy adalah platform pengujian visual berbasis cloud terkemuka yang menyederhanakan proses pengujian visual. Kedua platform menawarkan fungsionalitas serupa, termasuk pembuatan tangkapan layar, perbandingan visual, dan integrasi dengan pipeline CI/CD populer. Namun, mereka juga memiliki fitur dan kekuatan unik. Mari kita selami setiap platform.
Chromatic
Chromatic, yang dikembangkan oleh Storybook, terintegrasi secara mendalam dengan ekosistem Storybook. Storybook adalah alat yang ampuh untuk membangun dan mendokumentasikan komponen UI secara terisolasi. Chromatic memperluas kemampuan Storybook dengan menyediakan fitur pengujian dan peninjauan visual. Ini menyederhanakan proses pengujian komponen UI dengan memungkinkan developer mengambil tangkapan layar komponen dalam berbagai status dan konfigurasi. Chromatic kemudian membandingkan tangkapan layar ini dengan garis dasar, menyoroti setiap perbedaan visual.
Fitur Utama Chromatic:
- Integrasi Storybook yang Erat: Terintegrasi secara mulus dengan Storybook untuk pengembangan dan pengujian berbasis komponen.
- Pembuatan Tangkapan Layar Otomatis: Secara otomatis menghasilkan tangkapan layar komponen UI dalam status yang berbeda.
- Perbandingan Visual: Membandingkan tangkapan layar dengan garis dasar dan menyoroti perubahan visual.
- Peninjauan dan Kolaborasi: Menyediakan antarmuka kolaboratif untuk meninjau dan menyetujui perubahan visual.
- Integrasi CI/CD: Terintegrasi dengan pipeline CI/CD populer, seperti Jenkins, CircleCI, dan GitHub Actions.
- Pengujian Aksesibilitas: Menyediakan pemeriksaan aksesibilitas dasar.
Percy
Percy, yang diakuisisi oleh BrowserStack, adalah platform pengujian visual serbaguna yang mendukung berbagai kerangka kerja pengujian dan alur kerja pengembangan. Ini memungkinkan developer untuk mengambil tangkapan layar seluruh halaman, komponen tertentu, atau bahkan konten dinamis. Algoritma perbandingan visual canggih Percy dapat mendeteksi bahkan perbedaan visual sekecil apa pun. Ini menawarkan platform komprehensif untuk mengelola regresi visual dan memastikan konsistensi UI.
Fitur Utama Percy:
- Dukungan Lintas Platform: Mendukung berbagai kerangka kerja pengujian, termasuk Jest, Cypress, dan Selenium.
- Pembuatan Tangkapan Layar: Mengambil tangkapan layar seluruh halaman, komponen tertentu, dan konten dinamis.
- Perbandingan Visual: Membandingkan tangkapan layar menggunakan algoritma perbandingan visual canggih.
- Kolaborasi dan Peninjauan: Menyediakan antarmuka kolaboratif untuk meninjau dan menyetujui perubahan visual.
- Integrasi CI/CD: Terintegrasi dengan pipeline CI/CD populer.
- Pengujian Desain Responsif: Mendukung pengujian desain responsif di berbagai ukuran layar dan perangkat.
- Pengujian Kompatibilitas Browser: Menguji terhadap berbagai browser dan versi.
Menyiapkan Pengujian Visual dengan Chromatic
Mari kita lalui proses penyiapan pengujian visual menggunakan Chromatic, dengan asumsi Anda sudah memiliki proyek Storybook. Langkah-langkah berikut memberikan gambaran umum; konsultasikan dokumentasi resmi Chromatic untuk instruksi terbaru. Contoh ini didasarkan pada penyiapan React dan Storybook; konsep serupa berlaku untuk kerangka kerja lainnya.
Prasyarat
- Proyek Storybook yang telah disiapkan dengan komponen.
- Akun Chromatic (gratis atau berbayar).
- Node.js dan npm atau yarn terinstal.
Instalasi dan Konfigurasi
- Instal CLI Chromatic:
npm install -g chromatic - Autentikasi dengan Chromatic:
Ini akan meminta Anda untuk masuk ke akun Chromatic Anda. Kemudian, ini akan menyiapkan konfigurasi yang diperlukan.
chromatic login - Jalankan Chromatic:
Chromatic akan membangun Storybook Anda dan mengunggahnya ke platform Chromatic. Kemudian, ia akan mengambil tangkapan layar komponen Anda dan membandingkannya dengan garis dasar.
chromatic - Tinjau dan Setujui Perubahan: Chromatic akan memberikan tautan ke antarmuka Chromatic, di mana Anda dapat meninjau setiap perubahan visual yang terdeteksi. Anda kemudian dapat menyetujui atau menolak perubahan tersebut.
- Integrasikan dengan CI/CD: Integrasikan Chromatic ke dalam pipeline CI/CD Anda (mis., GitHub Actions, GitLab CI) untuk pengujian otomatis pada setiap pull request. Langkah-langkahnya bervariasi berdasarkan layanan CI/CD yang Anda gunakan; rujuk ke dokumentasi Chromatic untuk instruksi terperinci. Misalnya, menggunakan GitHub actions, Anda dapat menambahkan pekerjaan ke file alur kerja Anda yang menjalankan Chromatic setelah build dan pengujian unit Anda berhasil.
Contoh: Mengintegrasikan Chromatic dengan GitHub Actions
Buat file alur kerja baru (mis., .github/workflows/chromatic.yml) dengan konten berikut (sesuaikan CHROMATIC_PROJECT_TOKEN dengan token proyek Anda):
name: Chromatic
on:
push:
branches:
- main
pull_request:
branches:
- main
jobs:
chromatic-deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
with:
fetch-depth: 0
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
- name: Install dependencies
run: npm ci
- name: Publish to Chromatic
run: |
npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
env:
CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} # Use a secret to store the token
Alur kerja ini akan memicu Chromatic pada setiap push dan pull request ke cabang `main`. Ingatlah untuk mengganti `CHROMATIC_PROJECT_TOKEN` dengan token proyek Chromatic Anda yang sebenarnya yang disimpan sebagai rahasia (secret) GitHub.
Menyiapkan Pengujian Visual dengan Percy
Menyiapkan pengujian visual dengan Percy melibatkan langkah-langkah serupa dengan Chromatic tetapi berfokus pada integrasi dengan kerangka kerja pengujian yang ada. Berikut adalah panduan umum, dengan instruksi spesifik yang bergantung pada kerangka kerja Anda (mis., React dengan Jest, Vue dengan Cypress).
Prasyarat
- Akun Percy (gratis atau berbayar).
- Kerangka kerja pengujian (mis., Jest, Cypress, Selenium).
- Node.js dan npm atau yarn terinstal.
Instalasi dan Konfigurasi
- Instal CLI Percy:
npm install -D @percy/cli - Autentikasi dengan Percy: Buat proyek Percy di dalam platform Percy dan dapatkan token proyek Anda. Anda akan mengatur token ini sebagai variabel lingkungan (mis., `PERCY_TOKEN`) dalam konfigurasi CI/CD Anda.
- Integrasikan Percy dengan kerangka kerja pengujian Anda:
Ini melibatkan penambahan perintah Percy ke skrip pengujian Anda. Langkah-langkah pastinya bervariasi tergantung pada kerangka kerja pengujian Anda. Misalnya, dengan Cypress, Anda akan menginstal paket `@percy/cypress` dan menambahkan perintah untuk mengambil snapshot Percy. Dengan Jest, Anda kemungkinan akan menggunakan API Percy secara langsung atau adaptor khusus.
Contoh menggunakan Cypress (dalam pengujian Cypress Anda - mis.,
cypress/integration/my_spec.js):it('should render the homepage', () => { cy.visit('/'); cy.percySnapshot('Homepage'); });Dalam contoh Cypress di atas,
cy.percySnapshot('Homepage')mengambil tangkapan layar dari status halaman saat ini dan mengunggahnya ke Percy. - Konfigurasi Integrasi CI/CD:
Di dalam konfigurasi CI/CD Anda, pastikan Percy berjalan setelah pengujian Anda selesai. Anda biasanya akan mengatur variabel lingkungan `PERCY_TOKEN` dan kemudian menjalankan perintah CLI Percy.
Contoh menggunakan GitHub Actions (di file alur kerja Anda):
jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: 18 - name: Install dependencies run: npm ci - name: Run tests run: npm test # Replace with your test command - name: Percy Snapshot if: github.event_name == 'pull_request' # Only run Percy on pull requests run: | npx percy snapshot --token $PERCY_TOKEN env: PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }} # Use a GitHub secret - Tinjau dan Setujui Perubahan:
Percy akan memberikan tautan ke platformnya, di mana Anda dapat meninjau perbedaan visual (visual diffs) dan menyetujui atau menolak perubahan tersebut.
Praktik Terbaik untuk Pengujian Visual
Pengujian visual yang efektif membutuhkan pendekatan yang bijaksana. Berikut adalah beberapa praktik terbaik untuk memaksimalkan manfaatnya:
1. Tentukan Garis Dasar (Baseline) yang Jelas
Tetapkan garis dasar yang terdefinisi dengan baik. Ini adalah keadaan awal UI Anda, yang akan menjadi pembanding untuk semua tangkapan layar di masa mendatang. Pastikan garis dasar ini secara akurat mencerminkan penampilan visual yang diinginkan dari aplikasi Anda. Tinjau dan perbarui garis dasar Anda secara teratur untuk memastikannya tetap terkini dan mencerminkan perubahan desain yang sedang berlangsung.
2. Fokus pada Elemen UI Kritis
Prioritaskan pengujian elemen UI dan alur pengguna yang paling kritis. Ini termasuk elemen yang sering digunakan, memiliki dampak signifikan pada pengalaman pengguna, atau rentan terhadap perubahan. Jangan merasa perlu menguji setiap piksel; fokuslah pada area yang paling penting bagi pengguna Anda.
3. Uji di Berbagai Lingkungan
Uji UI Anda di berbagai lingkungan, termasuk browser yang berbeda (Chrome, Firefox, Safari, Edge, dll.), perangkat (desktop, tablet, smartphone), dan ukuran layar. Ini akan membantu memastikan bahwa UI Anda dirender secara konsisten di semua platform.
4. Tangani Konten Dinamis
Jika UI Anda berisi konten dinamis (mis., data yang diambil dari API), Anda perlu menanganinya dengan hati-hati. Pertimbangkan teknik seperti meniru (mocking) respons API untuk membuat data pengujian yang dapat diprediksi atau menggunakan set data deterministik. Pastikan Anda memiliki strategi untuk mengelola konten dinamis secara konsisten di berbagai build.
5. Atasi Pengujian yang Tidak Stabil (Flaky Tests)
Pengujian yang tidak stabil (flaky tests) adalah pengujian yang terkadang lulus dan terkadang gagal. Ini bisa menjadi sumber frustrasi yang besar. Identifikasi dan atasi akar penyebab pengujian yang tidak stabil. Ini mungkin melibatkan penyesuaian konfigurasi pengujian Anda, meningkatkan batas waktu (timeout), atau meningkatkan keandalan data pengujian Anda. Jika sebuah pengujian secara konsisten gagal, investasikan waktu untuk men-debug dan memperbaiki masalahnya. Jangan hanya mengabaikan kegagalan.
6. Integrasikan dengan CI/CD
Integrasikan proses pengujian visual Anda ke dalam pipeline CI/CD Anda. Ini memungkinkan Anda untuk secara otomatis menjalankan pengujian visual pada setiap perubahan kode, memastikan bahwa setiap regresi visual ditangkap di awal siklus pengembangan. Otomatisasi adalah kunci untuk menghemat waktu dan mengurangi risiko kesalahan manusia.
7. Gunakan Lingkungan Pengujian yang Konsisten
Pastikan lingkungan pengujian Anda sekonsisten mungkin dengan lingkungan produksi Anda. Ini termasuk menggunakan browser, sistem operasi, dan font yang sama. Lingkungan yang konsisten akan meningkatkan akurasi perbandingan visual Anda.
8. Dokumentasikan Strategi Pengujian Anda
Dokumentasikan strategi pengujian visual Anda, termasuk komponen mana yang diuji, lingkungan pengujian, dan hasil yang diharapkan. Dokumentasi ini akan membantu memastikan bahwa proses pengujian Anda konsisten dan dapat dipelihara dari waktu ke waktu. Ini sangat penting untuk orientasi anggota tim baru atau saat membuat perubahan signifikan pada UI Anda.
9. Prioritaskan Aksesibilitas
Meskipun Chromatic dan Percy menawarkan beberapa tingkat pemeriksaan aksesibilitas, prioritaskan pengujian aksesibilitas. Integrasikan pemeriksaan aksesibilitas ke dalam pengujian visual Anda untuk memastikan bahwa UI Anda dapat diakses oleh semua pengguna. Lihatlah pedoman WCAG.
10. Tinjau dan Perbarui Pengujian Secara Teratur
Seiring berkembangnya UI Anda, tinjau dan perbarui pengujian visual Anda secara teratur. Ini termasuk memperbarui garis dasar, menambahkan pengujian baru untuk fitur baru, dan menghapus pengujian untuk komponen yang sudah usang. Ini memastikan pengujian Anda terus memberikan nilai.
Memilih Platform yang Tepat: Chromatic vs. Percy
Pilihan terbaik antara Chromatic dan Percy bergantung pada kebutuhan spesifik dan penyiapan proyek Anda:
Pertimbangkan Chromatic jika:
- Anda sudah menggunakan Storybook untuk pengembangan berbasis komponen.
- Anda menginginkan integrasi yang erat dengan fitur-fitur Storybook.
- Anda lebih suka penyiapan yang ramping dan kemudahan penggunaan, terutama jika Anda sudah memiliki penyiapan Storybook.
- Anda menginginkan pemeriksaan aksesibilitas bawaan.
Pertimbangkan Percy jika:
- Anda menggunakan kerangka kerja pengujian selain Storybook, seperti Jest, Cypress, atau Selenium.
- Anda memerlukan dukungan untuk skenario pengujian yang lebih luas.
- Anda memerlukan fitur canggih seperti pengujian desain responsif atau pengujian kompatibilitas browser.
- Anda lebih suka solusi yang lebih agnostik terhadap kerangka kerja.
Baik Chromatic maupun Percy adalah pilihan yang sangat baik untuk pengujian visual. Evaluasi platform berdasarkan alat yang ada, persyaratan proyek, dan preferensi tim Anda. Pertimbangkan untuk memulai dengan uji coba gratis atau paket gratis untuk mengevaluasi fitur dan kemampuannya. Banyak tim bahkan menggunakan kedua alat untuk bagian proyek yang berbeda.
Teknik dan Integrasi Tingkat Lanjut
Di luar dasar-dasarnya, platform pengujian visual menawarkan teknik canggih untuk melayani skenario UI yang lebih kompleks dan integrasi dengan alat pengembangan lainnya.
1. Menguji Konten Dinamis: Mocking API
Salah satu tantangan terbesar dalam pengujian visual adalah mengelola konten dinamis. Untuk menanganinya, pertimbangkan untuk meniru (mocking) respons API untuk memastikan data pengujian dapat diprediksi. Ini akan memungkinkan Anda untuk menangkap tangkapan layar yang konsisten dan mencegah positif palsu atau negatif palsu yang disebabkan oleh data yang terus berubah. Manfaatkan alat seperti Mock Service Worker (MSW) atau fungsionalitas mock dari Jest untuk meniru panggilan API.
2. Menguji Komponen UI Interaktif
Untuk menguji komponen UI interaktif (mis., menu dropdown, modal), Anda sering kali perlu mensimulasikan interaksi pengguna. Ini dapat melibatkan pemicuan peristiwa secara terprogram (mis., klik, hover, input keyboard) menggunakan kerangka kerja pengujian Anda. Alat seperti Cypress dapat mensimulasikan perilaku pengguna secara lebih langsung.
3. Integrasi Pengujian Aksesibilitas
Integrasikan alat pengujian aksesibilitas (mis., axe-core) dalam pengujian visual Anda. Chrome dan Percy dapat menyediakan pemeriksaan aksesibilitas dasar; untuk pengujian yang lebih canggih, pertimbangkan untuk menjalankan audit aksesibilitas sebagai bagian dari pipeline pengujian Anda dan integrasikan hasil ini dengan hasil pengujian visual Anda. Melakukan ini akan membantu memastikan UI Anda dapat diakses oleh semua pengguna. Aksesibilitas bukan hanya tentang membuat UI dapat diakses, tetapi memastikan desain inklusif untuk pengguna dengan beragam kebutuhan.
4. Pustaka Komponen UI
Pengujian visual sangat berguna saat bekerja dengan pustaka komponen UI (mis., Material UI, Ant Design). Buat pengujian visual untuk setiap komponen di pustaka Anda untuk memastikan konsistensi dan mencegah regresi visual saat memperbarui pustaka atau mengintegrasikannya ke dalam proyek Anda.
5. Mengintegrasikan dengan Sistem Desain
Jika Anda menggunakan sistem desain, tautkan pengujian visual Anda ke dokumentasi sistem desain Anda. Ini akan memungkinkan Anda untuk dengan cepat mengidentifikasi setiap inkonsistensi visual antara UI Anda dan spesifikasi sistem desain Anda. Sinkronkan komponen UI dengan komponen sistem desain. Ini akan membantu menjaga konsistensi desain di seluruh produk Anda.
Pertimbangan Aksesibilitas
Aksesibilitas harus menjadi komponen inti dari strategi pengujian visual Anda. Meskipun Chromatic dan Percy menawarkan beberapa pemeriksaan aksesibilitas dasar, Anda harus menerapkan audit aksesibilitas yang komprehensif sebagai bagian dari proses pengujian Anda.
1. Alat Pengujian Aksesibilitas Otomatis
Gunakan alat pengujian aksesibilitas otomatis seperti Axe, Lighthouse, atau Pa11y di dalam pipeline CI/CD Anda. Alat-alat ini memindai UI Anda untuk pelanggaran aksesibilitas dan memberikan laporan terperinci tentang masalah apa pun yang ditemukan.
2. Pengujian Aksesibilitas Manual
Lengkapi pengujian otomatis dengan pengujian manual. Lakukan pemeriksaan manual menggunakan pembaca layar (mis., JAWS, NVDA, VoiceOver), navigasi keyboard, dan penganalisis kontras warna untuk mengidentifikasi masalah apa pun yang mungkin terlewatkan oleh alat otomatis. Pertimbangkan untuk mempekerjakan konsultan aksesibilitas untuk melakukan audit penuh.
3. Tinjauan Kode (Code Reviews)
Masukkan tinjauan aksesibilitas ke dalam proses tinjauan kode Anda. Minta developer untuk saling meninjau kode satu sama lain untuk masalah aksesibilitas. Edukasi tim Anda tentang praktik terbaik aksesibilitas, dan dorong mereka untuk memperhatikan aksesibilitas di seluruh proses pengembangan.
Kesimpulan: Masa Depan Pengujian Visual Frontend
Pengujian visual frontend bukan lagi sebuah kemewahan tetapi sebuah keharusan untuk pengembangan web modern. Dengan mengintegrasikan platform seperti Chromatic dan Percy ke dalam alur kerja Anda, Anda dapat secara signifikan meningkatkan kualitas, konsistensi, dan kemudahan pemeliharaan UI Anda. Penggunaan platform pengujian visual akan terus berkembang seiring dengan meningkatnya kompleksitas UI dan permintaan akan aplikasi web yang ramah pengguna, responsif, dan dapat diakses. Seiring web terus berevolusi, pengujian visual akan menjadi semakin penting dalam proses pengembangan.
Dengan mengikuti praktik terbaik yang diuraikan dalam panduan ini dan tetap mengikuti perkembangan terbaru dalam pengujian visual, Anda dapat membangun pengalaman pengguna yang lebih tangguh, andal, dan menarik secara visual untuk pengguna Anda di seluruh dunia. Nilai strategi pengujian Anda secara teratur, ikuti perkembangan alat dan teknik baru, dan beradaptasi dengan tuntutan lanskap pengembangan frontend yang selalu berubah. Peningkatan berkelanjutan sangat penting untuk kesuksesan berkelanjutan dalam pengujian visual.