axe-playwright 1.2.1 → 2.0.0

package/README.md

@@ -6,7 +6,7 @@
 [![NPM release](https://img.shields.io/npm/v/axe-playwright.svg 'NPM release')](https://www.npmjs.com/package/axe-playwright)
 [![NPM Downloads](https://img.shields.io/npm/dt/axe-playwright.svg?style=flat-square)](https://www.npmjs.com/package/axe-playwright)
 
-[Axe](https://www.deque.com/axe/) is an accessibility testing engine for websites and other HTML-based user interfaces. This package provides simple axe analyser commands which you can incorporate in your [Playwright](https://www.npmjs.com/package/playwright) tests.
+[Axe](https://www.deque.com/axe/) is an accessibility testing engine for websites and other HTML-based user interfaces. This package provides simple axe analyser commands which you can incorporate in your [Playwright](https://www.npmjs.com/package/playwright) tests. [Axe](https://www.deque.com/axe/) seamlessly functions across all Playwright browsers: Chromium, Firefox, and WebKit.
 
 ## Install and configure
 
@@ -118,14 +118,16 @@ The `detailedReport` key is a boolean whether to print the more detailed report
 
 The `verbose` key is a boolean to whether to print the message `No accessibility violations detected!` when there aren't accessibility violations present in the test. For the `DefaultTerminalReporter` this is true and for the `v2 Reporter` this is false.
 
-##### reporter (optional)
-
-A class instance that implements the `Reporter` interface or values `default` and `v2`. Custom reporter instances can be supplied to override default reporting behaviour dictated by `DefaultTerminalReporter` set by the value `default`. `v2` is the new TerminalReporter inspired by the reports from [jest-axe](https://github.com/nickcolley/jest-axe).
-
 ##### skipFailures (optional, defaults to false)
 
 Disables assertions based on violations and only logs violations to the console output. If you set `skipFailures` as `true`, although accessibility check is not passed, your test will not fail. It will simply print the violations in the console, but will not make the test fail.
 
+##### reporter (optional)
+
+A class instance that implements the `Reporter` interface or values `default`, `v2` and `html`. Custom reporter instances can be supplied to override default reporting behaviour dictated by `DefaultTerminalReporter` set by the value `default`. `v2` is the new TerminalReporter inspired by the reports from [jest-axe](https://github.com/nickcolley/jest-axe). `html` reporter will generate external HTML file.
+
+Note! `html` reporter will disable printed to logs violations.
+
 ##### options (dedicated for axe-html-reporter)
 
 Options dedicated for HTML reporter. 
@@ -303,7 +305,8 @@ await checkA11y(
           },
         },
       },
-      true, 'default',
+      true,
+      'html',
       {
         outputDirPath: 'results',
         outputDir: 'accessibility',
@@ -311,8 +314,29 @@ await checkA11y(
       }
     )
 ```
+#### JUnit Report
 
-
+```
+await checkA11y(
+      page,
+      'form',
+      {
+        axeOptions: {
+          runOnly: {
+            type: 'tag',
+            values: ['wcag2a'],
+          },
+        },
+      },
+      true,
+      'junit',
+     {
+        outputDirPath: 'results',
+        outputDir: 'accessibility',
+        reportFileName: 'accessibility-audit.xml',
+      },
+    )
+```
 ## Before you Go
 
 If it works for you , leave a [Star](https://github.com/abhinaba-ghosh/axe-playwright)! :star:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "axe-playwright",
-  "version": "1.2.1",
+  "version": "2.0.0",
   "description": "Custom Playwright commands to inject axe-core and test for a11y",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -40,9 +40,11 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "picocolors": "^1.0.0",
+    "@types/junit-report-builder": "^3.0.0",
     "axe-core": "^4.5.1",
-    "axe-html-reporter": "2.2.3"
+    "axe-html-reporter": "2.2.3",
+    "junit-report-builder": "^3.0.1",
+    "picocolors": "^1.0.0"
   },
   "repository": {
     "type": "git",

package/dist/index.d.ts

@@ -1,56 +0,0 @@
-import { Page } from 'playwright';
-import { AxeResults, ElementContext, Result, RunOptions } from 'axe-core';
-import DefaultTerminalReporter from './reporter/defaultTerminalReporter';
-import Reporter, { ConfigOptions, AxeOptions } from './types';
-import { Options } from 'axe-html-reporter';
-declare global {
-    interface Window {
-        axe: any;
-    }
-}
-declare module 'axe-core' {
-    interface Node {
-    }
-}
-/**
- * Injects axe executable commands in the active window
- * @param page
- */
-export declare const injectAxe: (page: Page) => Promise<void>;
-/**
- * Configures axe runtime options
- * @param page
- * @param configurationOptions
- */
-export declare const configureAxe: (page: Page, configurationOptions?: ConfigOptions) => Promise<void>;
-/**
- * Runs axe-core tools on the relevant page and returns all results
- * @param page
- * @param context
- * @param options
- */
-export declare const getAxeResults: (page: Page, context?: ElementContext, options?: RunOptions) => Promise<AxeResults>;
-/**
- * Runs axe-core tools on the relevant page and returns all accessibility violations detected on the page
- * @param page
- * @param context
- * @param options
- */
-export declare const getViolations: (page: Page, context?: ElementContext, options?: RunOptions) => Promise<Result[]>;
-/**
- * Report violations given the reporter.
- * @param violations
- * @param reporter
- */
-export declare const reportViolations: (violations: Result[], reporter: Reporter) => Promise<void>;
-/**
- * Performs Axe validations
- * @param page
- * @param context
- * @param axeOptions
- * @param skipFailures
- * @param reporter
- * @param options
- */
-export declare const checkA11y: (page: Page, context?: ElementContext | undefined, axeOptions?: AxeOptions | undefined, skipFailures?: boolean, reporter?: Reporter | 'default' | 'v2', options?: Options | undefined) => Promise<void>;
-export { DefaultTerminalReporter };

package/dist/index.js

@@ -1,128 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DefaultTerminalReporter = exports.checkA11y = exports.reportViolations = exports.getViolations = exports.getAxeResults = exports.configureAxe = exports.injectAxe = void 0;
-const fs = __importStar(require("fs"));
-const utils_1 = require("./utils");
-const defaultTerminalReporter_1 = __importDefault(require("./reporter/defaultTerminalReporter"));
-exports.DefaultTerminalReporter = defaultTerminalReporter_1.default;
-const terminalReporterV2_1 = __importDefault(require("./reporter/terminalReporterV2"));
-const axe_html_reporter_1 = require("axe-html-reporter");
-/**
- * Injects axe executable commands in the active window
- * @param page
- */
-const injectAxe = (page) => __awaiter(void 0, void 0, void 0, function* () {
-    const axe = fs.readFileSync(require.resolve('axe-core/axe.min.js'), 'utf8');
-    yield page.evaluate((axe) => window.eval(axe), axe);
-});
-exports.injectAxe = injectAxe;
-/**
- * Configures axe runtime options
- * @param page
- * @param configurationOptions
- */
-const configureAxe = (page, configurationOptions = {}) => __awaiter(void 0, void 0, void 0, function* () {
-    yield page.evaluate((configOptions) => window.axe.configure(configOptions), configurationOptions);
-});
-exports.configureAxe = configureAxe;
-/**
- * Runs axe-core tools on the relevant page and returns all results
- * @param page
- * @param context
- * @param options
- */
-const getAxeResults = (page, context, options) => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield page.evaluate(([context, options]) => {
-        return window.axe.run(context || window.document, options);
-    }, [context, options]);
-    return result;
-});
-exports.getAxeResults = getAxeResults;
-/**
- * Runs axe-core tools on the relevant page and returns all accessibility violations detected on the page
- * @param page
- * @param context
- * @param options
- */
-const getViolations = (page, context, options) => __awaiter(void 0, void 0, void 0, function* () {
-    const result = yield (0, exports.getAxeResults)(page, context, options);
-    return result.violations;
-});
-exports.getViolations = getViolations;
-/**
- * Report violations given the reporter.
- * @param violations
- * @param reporter
- */
-const reportViolations = (violations, reporter) => __awaiter(void 0, void 0, void 0, function* () {
-    yield reporter.report(violations);
-});
-exports.reportViolations = reportViolations;
-/**
- * Performs Axe validations
- * @param page
- * @param context
- * @param axeOptions
- * @param skipFailures
- * @param reporter
- * @param options
- */
-const checkA11y = (page, context = undefined, axeOptions = undefined, skipFailures = false, reporter = 'default', options = undefined) => __awaiter(void 0, void 0, void 0, function* () {
-    var _a, _b, _c;
-    const violations = yield (0, exports.getViolations)(page, context, axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.axeOptions);
-    if (violations.length > 0) {
-        yield (0, axe_html_reporter_1.createHtmlReport)({ results: { violations }, options });
-    }
-    else
-        console.log("There were no violations to save in report");
-    const impactedViolations = (0, utils_1.getImpactedViolations)(violations, axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.includedImpacts);
-    let reporterWithOptions;
-    if (reporter === 'default') {
-        reporterWithOptions = new defaultTerminalReporter_1.default(axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.detailedReport, (_a = axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.detailedReportOptions) === null || _a === void 0 ? void 0 : _a.html, (_b = axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.verbose) !== null && _b !== void 0 ? _b : true);
-    }
-    else if (reporter === 'v2') {
-        reporterWithOptions = new terminalReporterV2_1.default((_c = axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.verbose) !== null && _c !== void 0 ? _c : false);
-    }
-    else {
-        reporterWithOptions = reporter;
-    }
-    yield (0, exports.reportViolations)(impactedViolations, reporterWithOptions);
-    if (reporter !== 'v2')
-        (0, utils_1.testResultDependsOnViolations)(impactedViolations, skipFailures);
-});
-exports.checkA11y = checkA11y;

package/dist/reporter/defaultTerminalReporter.d.ts

@@ -1,9 +0,0 @@
-import Reporter from '../types';
-import { Result } from 'axe-core';
-export default class DefaultTerminalReporter implements Reporter {
-    protected detailedReport: boolean | undefined;
-    protected includeHtml: boolean | undefined;
-    protected verbose: boolean | undefined;
-    constructor(detailedReport: boolean | undefined, includeHtml: boolean | undefined, verbose: boolean | undefined);
-    report(violations: Result[]): Promise<void>;
-}

package/dist/reporter/defaultTerminalReporter.js

@@ -1,52 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const utils_1 = require("../utils");
-class DefaultTerminalReporter {
-    constructor(detailedReport, includeHtml, verbose) {
-        this.detailedReport = detailedReport;
-        this.includeHtml = includeHtml;
-        this.verbose = verbose;
-    }
-    report(violations) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const violationData = violations.map(({ id, impact, description, nodes }) => {
-                return {
-                    id,
-                    impact,
-                    description,
-                    nodes: nodes.length,
-                };
-            });
-            if (violationData.length > 0) {
-                // summary
-                console.table(violationData);
-                if (this.detailedReport) {
-                    const nodeViolations = (0, utils_1.describeViolations)(violations).map(({ target, html, violations }) => {
-                        if (!this.includeHtml) {
-                            return {
-                                target,
-                                violations,
-                            };
-                        }
-                        return { target, html, violations };
-                    });
-                    // per node
-                    console.table(nodeViolations);
-                }
-            }
-            else {
-                this.verbose && console.log(`No accessibility violations detected!`);
-            }
-        });
-    }
-}
-exports.default = DefaultTerminalReporter;

package/dist/reporter/terminalReporterV2.d.ts

@@ -1,7 +0,0 @@
-import Reporter from '../types';
-import { Result } from 'axe-core';
-export default class TerminalReporterV2 implements Reporter {
-    protected verbose: boolean | undefined;
-    constructor(verbose: boolean | undefined);
-    report(violations: Result[]): Promise<void>;
-}

package/dist/reporter/terminalReporterV2.js

@@ -1,69 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const assert_1 = __importDefault(require("assert"));
-const picocolors_1 = __importDefault(require("picocolors"));
-class TerminalReporterV2 {
-    constructor(verbose) {
-        this.verbose = verbose;
-    }
-    report(violations) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const lineBreak = '\n\n';
-            const message = violations.length === 0
-                ? 'No accessibility violations detected!'
-                : `Found ${violations.length} accessibility violations: \n`;
-            const horizontalLine = picocolors_1.default.bold('-'.repeat(message.length));
-            const reporter = (violations) => {
-                if (violations.length === 0) {
-                    return [];
-                }
-                return violations
-                    .map((violation) => {
-                    const errorBody = violation.nodes
-                        .map((node) => {
-                        const selector = node.target.join(', ');
-                        const expectedText = `Expected the HTML found at $('${selector}') to have no violations:` +
-                            '\n';
-                        return (picocolors_1.default.bold(expectedText) +
-                            picocolors_1.default.gray(node.html) +
-                            lineBreak +
-                            `Received:\n` +
-                            picocolors_1.default.red(`${violation.help} (${violation.id})`) +
-                            lineBreak +
-                            picocolors_1.default.bold(picocolors_1.default.yellow(node.failureSummary)) +
-                            lineBreak +
-                            (violation.helpUrl
-                                ? `You can find more information on this issue here: \n${picocolors_1.default.bold(picocolors_1.default.blue(violation.helpUrl))}`
-                                : '') +
-                            '\n' +
-                            horizontalLine);
-                    })
-                        .join(lineBreak);
-                    return errorBody;
-                })
-                    .join(lineBreak);
-            };
-            const formatedViolations = reporter(violations);
-            const pass = formatedViolations.length === 0;
-            if (pass) {
-                this.verbose && console.log(message);
-            }
-            else {
-                assert_1.default.fail(message + horizontalLine + '\n' + formatedViolations);
-            }
-        });
-    }
-}
-exports.default = TerminalReporterV2;

package/dist/types.d.ts

@@ -1,45 +0,0 @@
-import { Result, Check, ImpactValue, Locale, Rule, RunOptions } from 'axe-core';
-export interface NodeViolation {
-    target: string;
-    html: string;
-    violations: string;
-}
-export interface Aggregate {
-    [key: string]: {
-        target: string;
-        html: string;
-        violations: number[];
-    };
-}
-export default interface Reporter {
-    report(violations: Result[]): Promise<void>;
-}
-export interface axeOptionsConfig {
-    axeOptions?: RunOptions;
-}
-export interface ConfigOptions {
-    branding?: {
-        brand?: string;
-        application?: string;
-    };
-    reporter?: 'v1' | 'v2' | 'no-passes';
-    checks?: Check[];
-    rules?: Rule[];
-    locale?: Locale;
-    axeVersion?: string;
-}
-/**
- * Implement this interface to be able to specific custom reporting behaviour for checkA11y method.
- * @see checkA11y
- */
-export default interface Reporter {
-    report(violations: Result[]): Promise<void>;
-}
-export type AxeOptions = {
-    includedImpacts?: ImpactValue[];
-    detailedReport?: boolean;
-    detailedReportOptions?: {
-        html?: boolean;
-    };
-    verbose?: boolean;
-} & axeOptionsConfig;

package/dist/types.js

@@ -1,2 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils.d.ts

@@ -1,5 +0,0 @@
-import { NodeViolation } from './types';
-import { ImpactValue, Result } from 'axe-core';
-export declare const getImpactedViolations: (violations: Result[], includedImpacts?: ImpactValue[]) => Result[];
-export declare const testResultDependsOnViolations: (violations: Result[], skipFailures: boolean) => void;
-export declare const describeViolations: (violations: Result[]) => NodeViolation[];

package/dist/utils.js

@@ -1,49 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.describeViolations = exports.testResultDependsOnViolations = exports.getImpactedViolations = void 0;
-const assert_1 = __importDefault(require("assert"));
-const getImpactedViolations = (violations, includedImpacts = []) => {
-    return Array.isArray(includedImpacts) && includedImpacts.length
-        ? violations.filter((v) => v.impact && includedImpacts.includes(v.impact))
-        : violations;
-};
-exports.getImpactedViolations = getImpactedViolations;
-const testResultDependsOnViolations = (violations, skipFailures) => {
-    if (!skipFailures) {
-        assert_1.default.strictEqual(violations.length, 0, `${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${violations.length === 1 ? 'was' : 'were'} detected`);
-    }
-    else {
-        if (violations.length) {
-            console.warn({
-                name: 'a11y violation summary',
-                message: `${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${violations.length === 1 ? 'was' : 'were'} detected`,
-            });
-        }
-    }
-};
-exports.testResultDependsOnViolations = testResultDependsOnViolations;
-const describeViolations = (violations) => {
-    const aggregate = {};
-    violations.map(({ nodes }, index) => {
-        nodes.forEach(({ target, html }) => {
-            const key = JSON.stringify(target) + html;
-            if (aggregate[key]) {
-                aggregate[key].violations.push(index);
-            }
-            else {
-                aggregate[key] = {
-                    target: JSON.stringify(target),
-                    html,
-                    violations: [index],
-                };
-            }
-        });
-    });
-    return Object.values(aggregate).map(({ target, html, violations }) => {
-        return { target, html, violations: JSON.stringify(violations) };
-    });
-};
-exports.describeViolations = describeViolations;