Cara menguji situs web Anda secara visual menggunakan Chromatic dan Playwright – Beragampengetahuan

Saat membuat situs web yang menakjubkan, seperti yang ditampilkan dalam kumpulan beragampengetahuan ini, sama pentingnya untuk menguji cara kerja dan tampilan situs tersebut. Kami berupaya keras untuk membangun antarmuka yang indah dan memastikan pengalaman pengguna yang lancar, namun situs web yang dirancang paling indah pun dapat dirusak oleh kesalahan visual dan inkonsistensi.

Pengujian fungsional (seperti pengujian end-to-end atau unit) sangat bagus untuk memvalidasi logika dan perilaku halaman web, namun pengujian tersebut tidak dapat mendeteksi bug pada tampilan UI. Hal ini karena pengujian fungsional tidak benar-benar “melihat” piksel yang dirender oleh antarmuka pengguna.

Misalnya, CSS yang rusak dapat menyebabkan tombol Checkout tertutup spanduk. Uji fungsional Anda akan menunjukkan bahwa tombol tersebut masih dapat diklik (karena secara teknis memang demikian) meskipun pengguna sebenarnya tidak dapat mengaksesnya.

Dalam artikel ini, saya akan menunjukkan cara menggunakan alur kerja yang disebut pengujian visual untuk mengatasi kesalahan positif dan mencegah kesalahan rendering mencapai produksi. Anda akan mempelajari cara kerja pengujian visual dan cara menerapkannya menggunakan Penulis Drama dan Chromatic.

Bagaimana tes penglihatan dilakukan?

Anda dapat menganggap pengujian visual sebagai gambaran “sebelum dan sesudah” situs web Anda. Anda mulai dengan mengambil gambar “sebelum” yang sempurna – ini akan menjadi dasar Anda. Setelah perubahan kode apa pun, Anda dapat membandingkan snapshot “setelah” yang baru dengan piksel demi piksel dasar untuk mengungkap perbedaan visual apa pun.

Alat pengujian visual seperti Chromatic dapat mengotomatiskan proses pengambilan snapshot dan menjalankan pemeriksaan perbedaan di seluruh UI situs web.

Alur kerja Chromatic terdiri dari empat langkah:

1. Rendering awan: Chromatic merender UI Anda di browser berbasis cloud.
2. Pengambilan cuplikan: Chromatic mengambil cuplikan setiap pengujian dan semua pengujian dijalankan secara bersamaan untuk menghemat waktu Anda.
3. Perbandingan otomatis: Setiap kali Anda memperbarui kode, Chromatic mengambil snapshot baru dan membandingkannya dengan data dasar.
4. Tinjauan dan Verifikasi: Saat Chromatic mendeteksi perubahan, Anda akan diminta untuk meninjaunya untuk memastikan perubahan tersebut disengaja. Setiap perubahan yang tidak terduga akan memicu notifikasi sehingga Anda dapat memperbaikinya dengan cepat.

Mari kita lihat teknologi ini beraksi melalui demonstrasi. Saya akan menguji UI dari artikel “Animasi Tampilan Tooltip Dinamis”. Situs web menggunakan tata letak grid dengan berbagai elemen. Perhatikan bagaimana mengarahkan kursor ke tautan di konten utama memicu tooltip animasi.

Ikuti proyeknya dengan mendapatkan kode di sini:

$ npx degit winkerVSbecks/PixelGooeyTooltip#starting-point PixelGooeyTooltip
$ cd PixelGooeyTooltip
$ npm install

Bagaimana Chromatic dan Playwright berintegrasi untuk pengujian visual?

Chromatic terintegrasi secara mulus dengan alat pengujian populer seperti Storybook, Playwright, dan Cypress. Meskipun Buku Cerita sangat bagus untuk situs web berbasis komponen, kami akan memanfaatkan integrasi Penulis Drama Chromatic untuk melakukan pengujian visual pada halaman HTML statis ini.

Playwright adalah alat sumber terbuka yang mengotomatiskan pengujian end-to-end (E2E) dengan mensimulasikan interaksi pengguna seperti mengklik, mengarahkan kursor, dan mengetik langsung ke browser.

Saat pengujian Penulis Drama dijalankan, Chromatic bekerja di belakang layar, menangkap arsip setiap halaman, termasuk DOM, gaya, dan sumber dayanya. Arsip tersebut kemudian diunggah ke cloud, tempat Chromatic menghasilkan snapshot dan melakukan perbandingan piksel demi piksel untuk mengidentifikasi perubahan visual yang tidak terduga.

proses kerja

Kami akan membagi alur kerja ini menjadi dua bagian. Pertama, kita akan menyiapkan Playwright dan menulis tes E2E untuk memicu tooltips. Kami kemudian akan menggunakan Chromatic untuk mengubah pengujian E2E ini menjadi pengujian visual.

mengatur dramawan

Jalankan perintah berikut untuk menyiapkan Penulis Drama:

$ npm init playwright@latest

Ini akan menambahkan penulis naskah ke Anda package.jsonmenghasilkan a playwright.config.js file dan buat a tests Folder dengan contoh dasar. Anda juga akan mendapatkan tests-examples Folder dengan contoh lebih detail.

Tulis tes E2E pertama Anda

Ganti Nama tests/example.spec.js tiba tests/segmented-tooltip.spec.js Dan perbarui isinya sebagai berikut:

// tests/segmented-tooltip.spec.js

const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('
  await expect(page).toHaveTitle(/Segmented Tooltip Animation/);
});

Jalankan npx http-server. Sajikan situs web di server pengembangan lokal. Kemudian jalankan tes Playwright menggunakan perintah berikut:

$ npx playwright test

Anda akan melihat hasil tes di terminal. Anda akan melihat tiga tes di output. Hal ini karena, secara default, Playwright menjalankan setiap pengujian di Chromium, WebKit, dan Firefox.

Uji tip alat hover

Tes pertama memverifikasi judul situs web. Mari kita perluas rangkaian pengujian kita dengan menambahkan pengujian kedua yang menemukan dan mengaktifkan salah satu tooltip hover. Tooltip dianimasikan, sehingga pernyataan memeriksa apakah konten tooltip terlihat di akhir animasi.

// tests/segmented-tooltip.spec.js

const { test, expect } = require('@playwright/test');

test('has title', async ({ page }) => {
  await page.goto('
  await expect(page).toHaveTitle(/Segmented Tooltip Animation/);
});

test('displays tooltip', async ({ page }) => {
  await page.goto('
  await page.locator('css=.trigger').first().hover({ force: true });
  await expect(
    page.locator('css=#tooltip-1 .tooltip__content-desc.glitch')
  ).toHaveCSS('opacity', '1');
});

Kali ini mari kita jalankan pengujian ini dalam mode UI untuk benar-benar melihat bagaimana pengujian ini dijalankan di browser.

$ npx playwright test --ui

Seru! Tes E2E kami sudah aktif dan berjalan. Sekarang, mari kita lihat cara menggunakannya untuk pengujian visual.

Daftarkan dan buat proyek baru

Daftar untuk mendapatkan akun Chromatic gratis menggunakan akun GitHub, GitLab, Bitbucket, atau email Anda. Anda akan menerima 5.000 snapshot gratis setiap bulan.

lalu klik Tambahkan Barang dan ikuti petunjuk untuk membuat proyek Penulis Drama baru. Terakhir, salin token unik proyek Anda. seperti ini:

Tambahkan skala kromatik ke tes penulis naskah

Instal paket terkait Chromatic:

$ npm install -D chromatic @chromatic-com/playwright

Kemudian, tukar utilitas pengujian Playwright dengan utilitas dari @chromatic-com/playwright. Itu saja, hanya dengan satu baris perubahan kode kita dapat mengubah tes E2E ini menjadi tes visual.

// tests/segmented-tooltip.spec.js

// ➖ Remove this line
// import { test, expect } from '@playwright/test';
// ➕ Add this line
import { test, expect } from "@chromatic-com/playwright";

test('has title', async ({ page }) => {
  await page.goto('
  await expect(page).toHaveTitle(/Segmented Tooltip Animation/);
});

test('displays tooltip', async ({ page }) => {
  await page.goto('
  await page.locator('css=.trigger').first().hover({ force: true });
  await expect(
    page.locator('css=#tooltip-1 .tooltip__content-desc.glitch')
  ).toHaveCSS('opacity', '1');
});

Jalankan tes visual

Jalankan tes penulis naskah Anda seperti biasa. Saat pengujian Playwright Anda dijalankan, Chromatic mengambil arsip halaman web untuk setiap pengujian.

$ npx playwright test

Kemudian, gunakan token proyek Anda dan jalankan perintah berikut di direktori proyek. Chromatic kemudian akan mengunggah arsip ke infrastruktur cloud-nya dan melakukan pengujian visual.

$ npx chromatic --playwright -t=<TOKEN>

Setelah perintah Chromatic selesai, Anda akan menerima konfirmasi bahwa pengujian berhasil dijalankan. Karena ini adalah pengujian pertama, kini garis dasar telah ditetapkan untuk pengujian ini.

✔ Started build 1
  → Continue setup at 
✔ Build 1 auto-accepted
  → Tested 2 stories across 2 components; captured 2 snapshots in 17 seconds

Menangkap perubahan visual

Setelah garis dasar ditetapkan, Chromatic akan menangkap setiap perubahan visual yang dibuat pada UI ini. Mari kita coba. Kami akan mengubah latar belakang tooltip dan warna teks tooltip.css dokumen.

/* css/tooltip.css */

.tooltip {
    --tt-width: 200px;
	--tt-height: 250px;
	--tt-columns: 3;
	--tt-rows: 4;
	--tt-bg-color: #FF6B6C; /* 👈 this one */
	--tt-text-color: #000; /* 👈 and this one */
	
  /* ... */

Jalankan tes lagi:

# First Playwright
$ npx playwright test
# Then Chromatic
$ npx chromatic --playwright -t=<TOKEN>

Chromatic sekarang akan memberikan ringkasan perubahan. Klik tautan untuk melihat perubahannya.

✖ Found 1 visual change: Review the changes at 

Build akan ditandai sebagai “Belum ditinjau” dan perubahannya akan dicantumkan dalam tabel “Pengujian”. Dalam kasus kami, pengujian “Tampilkan tooltip” telah berubah.

Idenya adalah meninjau perubahan ini untuk memverifikasi apakah perubahan tersebut disengaja atau merupakan kesalahan. Setelah semua perubahan diterima, bangunan Anda akan ditandai lulus 🟢. Hal ini juga memperbarui dasar pengujian ini, memastikan snapshot di masa mendatang dibandingkan dengan versi terbaru yang disetujui.

Uji desain responsif secara visual

Kami telah menyelesaikan alur kerja pengujian visual inti. Namun, ada satu aspek lagi yang perlu dipertimbangkan: pada ukuran area pandang yang lebih kecil, beberapa elemen UI akan disembunyikan. Kami perlu mempertimbangkan situasi ini dalam pengujian kami.

Dengan menggunakan fitur simulasi area pandang Playwright, kami dapat menyimulasikan berbagai ukuran layar dan mengambil cuplikan di berbagai area pandang.

// tests/segmented-tooltip.spec.js

// ...

test.use({
  viewport: { width: 800, height: 900 },
});

test('meta is hidden on smaller screens', async ({ page }) => {
  await page.goto('
  for (const meta of await page.locator('css=.meta').all())
    await await expect(meta).toBeHidden;
});

Dengan menjalankan kembali pengujian kami, Chromatic akan mengambil cuplikan situs pada ukuran area pandang yang lebih kecil, memungkinkan kami memverifikasi tata letak layar yang kecil.

Tingkatkan keterampilan pengujian visual Anda

Dalam artikel ini, kami menjelajahi dasar-dasar pengujian visual dengan Penulis Drama dan Chromatic, namun masih banyak lagi yang bisa ditemukan!

Untuk benar-benar meningkatkan pengujian Anda, pertimbangkan untuk mengintegrasikan Chromatic ke dalam pipeline CI Anda. Dengan cara ini, Anda akan diberi tahu tentang perubahan visual apa pun yang disebabkan oleh permintaan tarik, sehingga memastikan UI Anda tetap sempurna pikselnya.

Chromatic juga memungkinkan Anda menyempurnakan pengambilan snapshot dengan menambahkan penundaan sebelum snapshot, menyesuaikan ambang batas perbedaan, atau mengambil beberapa snapshot pada titik tertentu selama pengujian. Untuk mempelajari lebih lanjut tentang kemampuan Chromatic, lihat dokumentasinya. Kode untuk demo ini dapat ditemukan di sini: