Cypress を使用した自動アクセシビリティ テスト: 包括的なガイド

npm install cypress --save-dev

npm install cypress-axe --save-dev

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

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

cy.checkA11y(null, {
    rules: {
        'color-contrast': { enabled: false }
    }
});

cy.checkA11y(null, {
    runOnly: {
        type: 'tag',
        values: ['wcag2a', 'wcag2aa']
    }
});

cy.checkA11y(null, null, (violations) => {
    violations.forEach((violation) => {
        cy.log(`${violation.id} - ${violation.description}`);
        violation.nodes.forEach((node) => {
            cy.log(`Node: ${node.target}`);
        });
    });
});