Ujian Kebolehcapaian Automatik dengan Cypress: Panduan Komprehensif

pengenalan

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.

Mengapa Kebolehcapaian Penting

1. Pematuhan Undang-undang: Memastikan permohonan anda memenuhi keperluan undang-undang seperti Akta Orang Kurang Upaya Amerika (ADA) dan Garis Panduan Kebolehcapaian Kandungan Web (WCAG).
2. Pengalaman Pengguna: Meningkatkan keseluruhan pengalaman pengguna untuk semua pengguna, termasuk mereka yang kurang upaya.
3. Keterangkuman: Menunjukkan komitmen terhadap keterangkuman dan kepelbagaian, menjadikan aplikasi anda boleh diakses oleh khalayak yang lebih luas.
4. Faedah SEO: Meningkatkan pengoptimuman enjin carian, kerana enjin carian memilih tapak web yang boleh diakses.

Menyediakan Ujian Kebolehcapaian Automatik dalam Cypress

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.

Menyesuaikan Pemeriksaan Kebolehcapaian

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']
    }
});

Mengendalikan Pelanggaran Kebolehcapaian

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}`);
        });
    });
});

Amalan Terbaik untuk Ujian Kebolehcapaian

1. Sepadukan Awal: Sepadukan ujian kebolehaksesan awal dalam proses pembangunan untuk menangkap isu lebih awal.
2. Uji Selalu: Jalankan ujian kebolehaksesan dengan kerap sebagai sebahagian daripada saluran paip CI/CD anda untuk memastikan pematuhan berterusan.
3. Didik Pasukan Anda: Didik pasukan pembangunan anda tentang amalan dan garis panduan terbaik kebolehaksesan.
4. Gunakan Ujian Manual: Gabungkan ujian automatik dan manual untuk merangkumi semua aspek kebolehcapaian, kerana alatan automatik mungkin tidak menangkap segala-galanya.

Kesimpulan

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!