Newfoundland Pitbull Mix

    @testcafe-community/axe
    TypeScript icon, indicating that this package has built-in type declarations

    3.5.0 • Public • Published

    @testcafe-community/axe

    The TestCafe module that allows you to use the aXe accessibility engine in TestCafe tests.

    Installation

    yarn add -D axe-core @testcafe-community/axe

    Or using npm:

    npm i -D axe-core @testcafe-community/axe

    How to use

    You can write a TestCafe test with automated accessibility checks like this.

    Add the following clientScript in your testcafe config:

    "clientScripts":[{"module":"axe-core/axe.min.js"}]
    import { checkForViolations } from '@testcafe-community/axe';
    
    fixture `TestCafe tests with Axe`
        .page `http://example.com`;
    
    test('Automated accessibility testing', async t => {
        // do stuff on your page
        await checkForViolations(t);
    });

    If any accessibility issues are found, you will see a detailed report in the error log.

    Accessibility errors

    aXe options

    The @testcafe-community/axe module allows you to define the context and options axe.run parameters in a TestCafe test.

    import { checkForViolations } from '@testcafe-community/axe';
    
    test('Automated accessibility testing', async (t) => {
        const context = { exclude: [['select']] };
        const options = { rules: { 'html-has-lang': { enabled: false } } };
    
        await checkForViolations(t, context, options);
    });

    Legacy API

    This project was forked from axe-testcafe which has been dormant for quite some time. If you prefer to use that API you can still use that:

    import { axeCheck, createReport } from 'axe-testcafe';
    
    fixture `TestCafe tests with Axe`
        .page `http://example.com`;
    
    test('Automated accessibility testing', async t => {
        const { error, violations } = await axeCheck(t);
        await t.expect(violations.length === 0).ok(createReport(violations));
    });

    Using full axe result object and axe.configure

    If you prefer to use a custom reporter for axe results you can get result object using runAxe function:

    import { runAxe } from '@testcafe-community/axe';
    import { createHtmlReport } from 'axe-html-reporter'; // example of custom html report for axe results
    
    fixture `TestCafe tests with Axe`
        .page `http://example.com`;
    
    test('Automated accessibility testing', async t => {
        const { error, results } = await runAxe(); // "context" and "options" parameters are optional
        // "results" constant contains full axe Results object (https://www.deque.com/axe/core-documentation/api-documentation/#results-object)
        await t.expect(error).eql(null, `axe check failed with an error: ${error}`);
        createHtmlReport({
            violations: results.violations,
            passes: results.passes,
            incomplete: results.incomplete,
            url: results.url,
            projectKey: 'EXAMPLE',
        }); // creates HTML report with the default file name `accessibilityReport.html`
    });

    Install

    npm i @testcafe-community/axe

    DownloadsWeekly Downloads

    3,341

    Version

    3.5.0

    License

    MIT

    Unpacked Size

    7.56 kB

    Total Files

    4

    Last publish

    Collaborators

    • benmonro