axe-playwright 1.1.12 → 1.2.3

package/README.md

@@ -95,7 +95,7 @@ The `page` instance of `playwright`.
 
 Defines the scope of the analysis - the part of the DOM that you would like to analyze. This will typically be the document or a specific selector such as class name, ID, selector, etc.
 
-##### options (optional)
+##### axeOptions (optional)
 
 Set of options passed into rules or checks, temporarily modifying them. This contrasts with axe.configure, which is more permanent.
 
@@ -120,12 +120,19 @@ The `verbose` key is a boolean to whether to print the message `No accessibility
 
 ##### 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).
+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.
 
 ##### 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.
 
+##### options (dedicated for axe-html-reporter)
+
+Options dedicated for HTML reporter. 
+[axe-html-reporter](https://www.npmjs.com/package/axe-html-reporter)
+
 ### getAxeResults
 
 This will run axe against the document at the point in which it is called, then returns the full set of results as reported by `axe.run`.
@@ -280,6 +287,34 @@ describe('Playwright web page accessibility test', () => {
 
 ![Detailed Report with HTML](./docs/detailed-report-html-example.png)
 
+#### HTML Report
+
+Thanks to [axe-html-reporter](https://www.npmjs.com/package/axe-html-reporter) you can generate HTML report(s).
+From default HTML file(s) will be generated under `/artifacts/accessibilityReport.html`. 
+Report's options can customized from `checkAlly` level:
+
+```
+await checkA11y(
+      page,
+      'form',
+      {
+        axeOptions: {
+          runOnly: {
+            type: 'tag',
+            values: ['wcag2a'],
+          },
+        },
+      },
+      true, 'default',
+      {
+        outputDirPath: 'results',
+        outputDir: 'accessibility',
+        reportFileName: 'accessibility-audit.html'
+      }
+    )
+```
+
+
 ## Before you Go
 
 If it works for you , leave a [Star](https://github.com/abhinaba-ghosh/axe-playwright)! :star:

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 import { Page } from 'playwright';
 import { AxeResults, ElementContext, Result, RunOptions } from 'axe-core';
 import DefaultTerminalReporter from './reporter/defaultTerminalReporter';
-import Reporter, { ConfigOptions, Options } from './types';
+import Reporter, { ConfigOptions, AxeOptions } from './types';
+import { Options } from 'axe-html-reporter';
 declare global {
     interface Window {
         axe: any;
@@ -46,9 +47,10 @@ export declare const reportViolations: (violations: Result[], reporter: Reporter
  * Performs Axe validations
  * @param page
  * @param context
- * @param options
+ * @param axeOptions
  * @param skipFailures
  * @param reporter
+ * @param options
  */
-export declare const checkA11y: (page: Page, context?: ElementContext | undefined, options?: Options | undefined, skipFailures?: boolean, reporter?: Reporter | 'default' | 'v2') => Promise<void>;
+export declare const checkA11y: (page: Page, context?: ElementContext | undefined, axeOptions?: AxeOptions | undefined, skipFailures?: boolean, reporter?: Reporter | 'default' | 'html' | 'v2', options?: Options | undefined) => Promise<void>;
 export { DefaultTerminalReporter };

package/dist/index.js

@@ -41,6 +41,7 @@ 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
@@ -96,26 +97,35 @@ exports.reportViolations = reportViolations;
  * Performs Axe validations
  * @param page
  * @param context
- * @param options
+ * @param axeOptions
  * @param skipFailures
  * @param reporter
+ * @param options
  */
-const checkA11y = (page, context = undefined, options = undefined, skipFailures = false, reporter = 'default') => __awaiter(void 0, void 0, void 0, function* () {
+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, options === null || options === void 0 ? void 0 : options.axeOptions);
-    const impactedViolations = (0, utils_1.getImpactedViolations)(violations, options === null || options === void 0 ? void 0 : options.includedImpacts);
+    const violations = yield (0, exports.getViolations)(page, context, axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.axeOptions);
+    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(options === null || options === void 0 ? void 0 : options.detailedReport, (_a = options === null || options === void 0 ? void 0 : options.detailedReportOptions) === null || _a === void 0 ? void 0 : _a.html, (_b = options === null || options === void 0 ? void 0 : options.verbose) !== null && _b !== void 0 ? _b : true);
+        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 = options === null || options === void 0 ? void 0 : options.verbose) !== null && _c !== void 0 ? _c : false);
+        reporterWithOptions = new terminalReporterV2_1.default((_c = axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.verbose) !== null && _c !== void 0 ? _c : false);
+    }
+    else if (reporter === 'html') {
+        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");
     }
     else {
         reporterWithOptions = reporter;
     }
-    yield (0, exports.reportViolations)(impactedViolations, reporterWithOptions);
-    if (reporter !== 'v2')
+    if (reporter !== 'html')
+        yield (0, exports.reportViolations)(impactedViolations, reporterWithOptions);
+    if (reporter === 'v2' || reporter !== 'html')
         (0, utils_1.testResultDependsOnViolations)(impactedViolations, skipFailures);
 });
 exports.checkA11y = checkA11y;

package/dist/types.d.ts

@@ -35,7 +35,7 @@ export interface ConfigOptions {
 export default interface Reporter {
     report(violations: Result[]): Promise<void>;
 }
-export type Options = {
+export type AxeOptions = {
     includedImpacts?: ImpactValue[];
     detailedReport?: boolean;
     detailedReportOptions?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "axe-playwright",
-  "version": "1.1.12",
+  "version": "1.2.3",
   "description": "Custom Playwright commands to inject axe-core and test for a11y",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -41,7 +41,8 @@
   },
   "dependencies": {
     "picocolors": "^1.0.0",
-    "axe-core": "^4.5.1"
+    "axe-core": "^4.5.1",
+    "axe-html-reporter": "2.2.3"
   },
   "repository": {
     "type": "git",