Menghubungkan axe-core ke Pengujian Playwright
Gagalkan build saat regresi a11y muncul.
Menghubungkan axe-core ke Pengujian Playwright adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Dari Pemindaian Manual ke Pengujian Otomatis
Mengeklik ekstensi peramban sangat baik untuk satu halaman. Untuk melindungi setiap halaman pada setiap commit, Anda perlu mengintegrasikan axe-core ke dalam rangkaian pengujian otomatis.
Mengapa Playwright
Playwright mengendalikan peramban sungguhan melalui kode, sehingga axe berjalan pada halaman persis seperti yang dilihat pengguna, termasuk konten yang dirender oleh JavaScript.
Paket Penghubung
Paket axe-core/playwright menghubungkan keduanya. Instal paket tersebut bersama Playwright agar pengujian Anda dapat menyisipkan dan menjalankan mesin axe.
npm install --save-dev @axe-core/playwrightImpor Builder
Dalam berkas pengujian, Anda mengimpor AxeBuilder. Ini adalah pembantu yang menyisipkan axe-core ke halaman saat ini dan mengumpulkan hasilnya untuk Anda.
import AxeBuilder from '@axe-core/playwright';Navigasikan, Lalu Analisis
Pertama, biarkan Playwright memuat halaman, lalu panggil analyze pada AxeBuilder baru untuk memindai apa pun yang sedang dirender di peramban.
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();Pastikan Tidak Ada Pelanggaran
Hasilnya memuat array violations. Halaman yang lolos memiliki array kosong, sehingga Anda memastikan panjangnya nol agar pengujian gagal jika ada masalah.
expect(results.violations).toEqual([]);Kasus Pengujian Lengkap
Gabungkan semuanya dan Anda memiliki pengujian aksesibilitas sungguhan yang berjalan di CI seperti spesifikasi Playwright lainnya.
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});Uji Setelah Interaksi
Kekuatan sebenarnya terletak pada pemindaian keadaan dinamis. Buka modal atau perluas menu terlebih dahulu, lalu lakukan analisis agar axe memeriksa UI yang benar-benar dipicu pengguna.
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();Persempit Cakupan
Anda dapat memusatkan pemindaian pada satu wilayah dengan include, yang berguna saat menguji satu komponen tanpa gangguan dari bagian halaman lainnya.
new AxeBuilder({ page }).include('#signup-form').analyze();Pilih Kumpulan Aturan
Gunakan withTags untuk menjalankan hanya aturan yang terkait dengan suatu standar, seperti kriteria WCAG 2.1 AA, sehingga pengujian Anda sesuai dengan target kesesuaian.
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();Ingat Batasnya
Pengujian Playwright yang berhasil tetap hanya mencakup bagian masalah yang dapat diotomatisasi. Pengujian tersebut melengkapi pemeriksaan pembaca layar secara manual, bukan menggantikannya.
Pemeriksaan Singkat
Ingat kembali cara membuat pengujian gagal ketika ada masalah aksesibilitas.
Ringkasan: a11y dalam Pipeline Anda
AxeBuilder menyisipkan axe-core ke peramban sungguhan, Anda menganalisis setiap keadaan, lalu memastikan tidak ada pelanggaran. Kini regresi aksesibilitas akan otomatis menghentikan proses build. ✅
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menghubungkan axe-core ke Pengujian Playwright” gratis?
Ya — teks lengkap “Menghubungkan axe-core ke Pengujian Playwright” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menghubungkan axe-core ke Pengujian Playwright”?
Gagalkan build saat regresi a11y muncul. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Menghubungkan axe-core ke Pengujian Playwright” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Hal yang Dapat dan Tidak Dapat Dideteksi Otomatisasi
- Memindai dengan axe DevTools dan Lighthouse
- Menghubungkan axe-core ke Pengujian Playwright
- Lint dan Gerbang CI untuk Aksesibilitas