axe-playwright 1.1.12 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +34 -1
- package/dist/index.d.ts +5 -3
- package/dist/index.js +13 -6
- package/dist/types.d.ts +1 -1
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -95,7 +95,7 @@ The `page` instance of `playwright`.
|
|
|
95
95
|
|
|
96
96
|
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.
|
|
97
97
|
|
|
98
|
-
#####
|
|
98
|
+
##### axeOptions (optional)
|
|
99
99
|
|
|
100
100
|
Set of options passed into rules or checks, temporarily modifying them. This contrasts with axe.configure, which is more permanent.
|
|
101
101
|
|
|
@@ -126,6 +126,11 @@ A class instance that implements the `Reporter` interface or values `default` an
|
|
|
126
126
|
|
|
127
127
|
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.
|
|
128
128
|
|
|
129
|
+
##### options (dedicated for axe-html-reporter)
|
|
130
|
+
|
|
131
|
+
Options dedicated for HTML reporter.
|
|
132
|
+
[axe-html-reporter](https://www.npmjs.com/package/axe-html-reporter)
|
|
133
|
+
|
|
129
134
|
### getAxeResults
|
|
130
135
|
|
|
131
136
|
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 +285,34 @@ describe('Playwright web page accessibility test', () => {
|
|
|
280
285
|
|
|
281
286
|

|
|
282
287
|
|
|
288
|
+
#### HTML Report
|
|
289
|
+
|
|
290
|
+
Thanks to [axe-html-reporter](https://www.npmjs.com/package/axe-html-reporter) you can generate HTML report(s).
|
|
291
|
+
From default HTML file(s) will be generated under `/artifacts/accessibilityReport.html`.
|
|
292
|
+
Report's options can customized from `checkAlly` level:
|
|
293
|
+
|
|
294
|
+
```
|
|
295
|
+
await checkA11y(
|
|
296
|
+
page,
|
|
297
|
+
'form',
|
|
298
|
+
{
|
|
299
|
+
axeOptions: {
|
|
300
|
+
runOnly: {
|
|
301
|
+
type: 'tag',
|
|
302
|
+
values: ['wcag2a'],
|
|
303
|
+
},
|
|
304
|
+
},
|
|
305
|
+
},
|
|
306
|
+
true, 'default',
|
|
307
|
+
{
|
|
308
|
+
outputDirPath: 'results',
|
|
309
|
+
outputDir: 'accessibility',
|
|
310
|
+
reportFileName: 'accessibility-audit.html'
|
|
311
|
+
}
|
|
312
|
+
)
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
|
|
283
316
|
## Before you Go
|
|
284
317
|
|
|
285
318
|
If it works for you , leave a [Star](https://github.com/abhinaba-ghosh/axe-playwright)! :star:
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Page } from 'playwright';
|
|
2
2
|
import { AxeResults, ElementContext, Result, RunOptions } from 'axe-core';
|
|
3
3
|
import DefaultTerminalReporter from './reporter/defaultTerminalReporter';
|
|
4
|
-
import Reporter, { ConfigOptions,
|
|
4
|
+
import Reporter, { ConfigOptions, AxeOptions } from './types';
|
|
5
|
+
import { Options } from 'axe-html-reporter';
|
|
5
6
|
declare global {
|
|
6
7
|
interface Window {
|
|
7
8
|
axe: any;
|
|
@@ -46,9 +47,10 @@ export declare const reportViolations: (violations: Result[], reporter: Reporter
|
|
|
46
47
|
* Performs Axe validations
|
|
47
48
|
* @param page
|
|
48
49
|
* @param context
|
|
49
|
-
* @param
|
|
50
|
+
* @param axeOptions
|
|
50
51
|
* @param skipFailures
|
|
51
52
|
* @param reporter
|
|
53
|
+
* @param options
|
|
52
54
|
*/
|
|
53
|
-
export declare const checkA11y: (page: Page, context?: ElementContext | undefined,
|
|
55
|
+
export declare const checkA11y: (page: Page, context?: ElementContext | undefined, axeOptions?: AxeOptions | undefined, skipFailures?: boolean, reporter?: Reporter | 'default' | 'v2', options?: Options | undefined) => Promise<void>;
|
|
54
56
|
export { DefaultTerminalReporter };
|
package/dist/index.js
CHANGED
|
@@ -41,6 +41,7 @@ const utils_1 = require("./utils");
|
|
|
41
41
|
const defaultTerminalReporter_1 = __importDefault(require("./reporter/defaultTerminalReporter"));
|
|
42
42
|
exports.DefaultTerminalReporter = defaultTerminalReporter_1.default;
|
|
43
43
|
const terminalReporterV2_1 = __importDefault(require("./reporter/terminalReporterV2"));
|
|
44
|
+
const axe_html_reporter_1 = require("axe-html-reporter");
|
|
44
45
|
/**
|
|
45
46
|
* Injects axe executable commands in the active window
|
|
46
47
|
* @param page
|
|
@@ -96,20 +97,26 @@ exports.reportViolations = reportViolations;
|
|
|
96
97
|
* Performs Axe validations
|
|
97
98
|
* @param page
|
|
98
99
|
* @param context
|
|
99
|
-
* @param
|
|
100
|
+
* @param axeOptions
|
|
100
101
|
* @param skipFailures
|
|
101
102
|
* @param reporter
|
|
103
|
+
* @param options
|
|
102
104
|
*/
|
|
103
|
-
const checkA11y = (page, context = undefined,
|
|
105
|
+
const checkA11y = (page, context = undefined, axeOptions = undefined, skipFailures = false, reporter = 'default', options = undefined) => __awaiter(void 0, void 0, void 0, function* () {
|
|
104
106
|
var _a, _b, _c;
|
|
105
|
-
const violations = yield (0, exports.getViolations)(page, context,
|
|
106
|
-
|
|
107
|
+
const violations = yield (0, exports.getViolations)(page, context, axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.axeOptions);
|
|
108
|
+
if (violations.length > 0) {
|
|
109
|
+
yield (0, axe_html_reporter_1.createHtmlReport)({ results: { violations }, options });
|
|
110
|
+
}
|
|
111
|
+
else
|
|
112
|
+
console.log("There were no violations to save in report");
|
|
113
|
+
const impactedViolations = (0, utils_1.getImpactedViolations)(violations, axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.includedImpacts);
|
|
107
114
|
let reporterWithOptions;
|
|
108
115
|
if (reporter === 'default') {
|
|
109
|
-
reporterWithOptions = new defaultTerminalReporter_1.default(
|
|
116
|
+
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);
|
|
110
117
|
}
|
|
111
118
|
else if (reporter === 'v2') {
|
|
112
|
-
reporterWithOptions = new terminalReporterV2_1.default((_c =
|
|
119
|
+
reporterWithOptions = new terminalReporterV2_1.default((_c = axeOptions === null || axeOptions === void 0 ? void 0 : axeOptions.verbose) !== null && _c !== void 0 ? _c : false);
|
|
113
120
|
}
|
|
114
121
|
else {
|
|
115
122
|
reporterWithOptions = reporter;
|
package/dist/types.d.ts
CHANGED
|
@@ -35,7 +35,7 @@ export interface ConfigOptions {
|
|
|
35
35
|
export default interface Reporter {
|
|
36
36
|
report(violations: Result[]): Promise<void>;
|
|
37
37
|
}
|
|
38
|
-
export type
|
|
38
|
+
export type AxeOptions = {
|
|
39
39
|
includedImpacts?: ImpactValue[];
|
|
40
40
|
detailedReport?: boolean;
|
|
41
41
|
detailedReportOptions?: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "axe-playwright",
|
|
3
|
-
"version": "1.1
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "Custom Playwright commands to inject axe-core and test for a11y",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -41,7 +41,8 @@
|
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
43
|
"picocolors": "^1.0.0",
|
|
44
|
-
"axe-core": "^4.5.1"
|
|
44
|
+
"axe-core": "^4.5.1",
|
|
45
|
+
"axe-html-reporter": "2.2.3"
|
|
45
46
|
},
|
|
46
47
|
"repository": {
|
|
47
48
|
"type": "git",
|