Kebolehcapaian ialah aspek kritikal pembangunan web, memastikan semua pengguna, termasuk mereka yang kurang upaya, boleh berinteraksi dengan aplikasi web anda dengan berkesan. Ujian kebolehaksesan automatik membantu mengenal pasti dan membetulkan isu kebolehaksesan pada awal proses pembangunan. Dalam siaran ini, kami akan meneroka cara melaksanakan ujian kebolehaksesan automatik menggunakan Cypress, memanfaatkan alatan seperti cypress-axe untuk menjadikan aplikasi anda lebih inklusif.
Untuk melakukan ujian kebolehcapaian automatik di Cypress, kami akan menggunakan pemalam cypress-axe, yang menyepadukan enjin kebolehaksesan Axe dengan Cypress.
Langkah 1: Pasang Cypress dan cypress-axe
Pertama, pastikan anda telah memasang Cypress dalam projek anda. Jika tidak, anda boleh memasangnya menggunakan arahan berikut:
npm install cypress --save-dev
Seterusnya, pasang pemalam cypress-axe:
npm install cypress-axe --save-dev
Langkah 2: Konfigurasikan cypress-axe
Cipta fail baharu dalam direktori cypress/support yang dipanggil commands.js dan tambah kod berikut untuk mengimport dan mengkonfigurasi cypress-axe:
import 'cypress-axe'; Cypress.Commands.add('injectAxe', () => { cy.window({ log: false }).then(window => { let axe = require('axe-core'); window.eval(axe.source); }); }); Cypress.Commands.add('checkA11y', (selector = null, options = null, violationCallback = null, skipFailures = false) => { cy.window({ log: false }).then(window => { let document = window.document; return axe.run(document, options).then(({ violations }) => { if (violations.length) { cy.wrap(violations, { log: false }).each(violation => { let nodes = Cypress._.get(violation, 'nodes', []); Cypress._.each(nodes, node => { let target = Cypress._.get(node, 'target', []); if (target.length) { Cypress._.each(target, target => { cy.wrap(target, { log: false }).then($target => { if (!skipFailures) { Cypress.log({ name: 'a11y error!', message: violation.help, consoleProps: () => violation }); violationCallback && violationCallback(violation); } }); }); } }); }); } }); }); });
Langkah 3: Buat Ujian Kebolehcapaian
Sekarang, mari buat ujian Cypress untuk menyemak kebolehcapaian halaman web. Buat fail baharu dalam direktori cypress/e2e yang dipanggil accessibility.spec.js dan tambah kod berikut:
describe('Automated Accessibility Testing with Cypress', () => { beforeEach(() => { cy.visit('/'); cy.injectAxe(); }); it('should have no detectable accessibility violations on load', () => { cy.checkA11y(); }); it('should have no detectable accessibility violations on specific elements', () => { cy.checkA11y('header'); cy.checkA11y('main'); cy.checkA11y('footer'); }); });
Dalam contoh ini, kami melakukan semakan kebolehaksesan pada keseluruhan halaman serta pada elemen tertentu seperti pengepala, kandungan utama dan pengaki.
Anda boleh menyesuaikan semakan kebolehaksesan dengan menyediakan pilihan dan mengkonfigurasi peraturan. Contohnya, anda boleh mengabaikan peraturan tertentu atau hanya menjalankan semakan tertentu.
Contoh: Mengabaikan Peraturan Khusus
cy.checkA11y(null, { rules: { 'color-contrast': { enabled: false } } });
Contoh: Menjalankan Pemeriksaan Khusus
cy.checkA11y(null, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] } });
Anda boleh mengendalikan pelanggaran kebolehaksesan dengan menyediakan fungsi panggil balik untuk log atau memproses pelanggaran. Contohnya:
cy.checkA11y(null, null, (violations) => { violations.forEach((violation) => { cy.log(`${violation.id} - ${violation.description}`); violation.nodes.forEach((node) => { cy.log(`Node: ${node.target}`); }); }); });
Ujian kebolehcapaian automatik dengan Cypress dan cypress-axe ialah cara yang berkesan untuk memastikan aplikasi web anda boleh diakses oleh semua pengguna. Dengan menyepadukan semakan kebolehaksesan ke dalam proses ujian anda, anda boleh mengenal pasti dan membetulkan isu lebih awal, memberikan pengalaman pengguna yang lebih baik dan memastikan pematuhan dengan piawaian kebolehaksesan. Ikuti amalan terbaik yang digariskan dalam panduan ini untuk menjadikan aplikasi anda lebih inklusif dan boleh diakses.
Selamat menguji!
Atas ialah kandungan terperinci Ujian Kebolehcapaian Automatik dengan Cypress: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!