+
+Page passed 44 axe rules: aria-allowed-attr, aria-hidden-body, aria-required-attr, aria-required-children, aria-required-parent, aria-roles, aria-valid-attr-value, aria-valid-attr, avoid-inline-spacing, button-name, bypass, color-contrast, document-title, duplicate-id-aria, duplicate-id, empty-heading, form-field-multiple-labels, heading-order, hidden-content, html-has-lang, html-lang-valid, image-alt, image-redundant-alt, input-button-name, label-title-only, label, landmark-banner-is-top-level, landmark-contentinfo-is-top-level, landmark-main-is-top-level, landmark-no-duplicate-banner, landmark-no-duplicate-contentinfo, landmark-no-duplicate-main, landmark-one-main, landmark-unique, link-in-text-block, link-name, list, listitem, meta-viewport-large, meta-viewport, p-as-heading, page-has-heading-one, region, skip-link
HTML report was saved into the following directory /gitlab/axe-testcafe-demo/artifacts/accessibilityReport.html
✓ Automated accessibility testing
TestCafe tests with Axe (TypeScript Example)
+Axe core library found 3 violations for the www.example.com
+┌─────────┬──────────────────────────────────────────────────────┬─────────────────────┬────────────────────┬────────────┬───────┐
+│ (index) │ description │ id │ wcag │ impact │ nodes │
+├─────────┼──────────────────────────────────────────────────────┼─────────────────────┼────────────────────┼────────────┼───────┤
+│ 0 │ 'Ensures every HTML document has a lang attribute' │ 'html-has-lang' │ 'WCAG 2.0 Level A' │ 'serious' │ 1 │
+│ 1 │ 'Ensures the document has a main landmark' │ 'landmark-one-main' │ 'Best practice' │ 'moderate' │ 1 │
+│ 2 │ 'Ensures all page content is contained by landmarks' │ 'region' │ 'Best practice' │ 'moderate' │ 1 │
+└─────────┴──────────────────────────────────────────────────────┴─────────────────────┴────────────────────┴────────────┴───────┘
+1. id: 'html-has-lang' learn more: https://dequeuniversity.com/rules/axe/3.5/html-has-lang?application=axeAPI
+ name: element must have a lang attribute
+ description: Ensures every HTML document has a lang attribute
+ WCAG: 'WCAG 2.0 Level A'
+ Affected elements:
+ Selector: "html" Source code:
+
+2. id: 'landmark-one-main' learn more: https://dequeuniversity.com/rules/axe/3.5/landmark-one-main?application=axeAPI
+ name: Document must have one main landmark
+ description: Ensures the document has a main landmark
+ WCAG: 'Best practice'
+ Affected elements:
+ Selector: "html" Source code:
+
+3. id: 'region' learn more: https://dequeuniversity.com/rules/axe/3.5/region?application=axeAPI
+ name: All page content must be contained by landmarks
+ description: Ensures all page content is contained by landmarks
+ WCAG: 'Best practice'
+ Affected elements:
+ Selector: "div" Source code:
+
+
+Page passed 12 axe rules: aria-hidden-body, bypass, color-contrast, document-title, empty-heading, heading-order, hidden-content, link-name, meta-viewport-large, meta-viewport, page-has-heading-one, region
HTML report was saved into the following directory /gitlab/axe-testcafe-demo/artifacts/example.html
✓ Automated accessibility testing
+
+ 2 passed (3s)
+
+
```
`npm test` command automatically opens html report file in your browser.
diff --git a/package-lock.json b/package-lock.json
index 2e0d0c7..be7d7f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -263,6 +263,66 @@
"mustache": "^4.0.1"
}
},
+ "axe-result-pretty-print": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/axe-result-pretty-print/-/axe-result-pretty-print-1.0.0.tgz",
+ "integrity": "sha512-BXOqQiAH3fGAB7I9rWABm0Dd06h5RdazF1jnbeW2xkI78KFSX/lHtKQeYYoWZ6/xdDepNuqIM4C7flD/OXMh0g==",
+ "dev": true,
+ "requires": {
+ "chalk": "^4.1.0"
+ },
+ "dependencies": {
+ "ansi-styles": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+ "dev": true,
+ "requires": {
+ "color-convert": "^2.0.1"
+ }
+ },
+ "chalk": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+ "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
+ }
+ },
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
+ "has-flag": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+ "dev": true
+ },
+ "supports-color": {
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+ "dev": true,
+ "requires": {
+ "has-flag": "^4.0.0"
+ }
+ }
+ }
+ },
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
diff --git a/package.json b/package.json
index 1ab8ada..cc56525 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "",
"private": true,
"scripts": {
- "test": "testcafe chrome:headless test.js jest && open ./artifacts/accessibilityReport.html"
+ "test": "testcafe chrome:headless testcafe/** && open ./artifacts/accessibilityReport.html"
},
"author": "",
"license": "ISC",
@@ -12,6 +12,7 @@
"@testcafe-community/axe": "^3.3.0",
"axe-core": "^3.5.5",
"axe-html-reporter": "^1.0.0",
+ "axe-result-pretty-print": "^1.0.0",
"prettier": "^2.1.2",
"testcafe": "^1.9.4"
},
diff --git a/testcafe/testNoTypeScript.js b/testcafe/testNoTypeScript.js
index f593b6e..565fa26 100644
--- a/testcafe/testNoTypeScript.js
+++ b/testcafe/testNoTypeScript.js
@@ -1,5 +1,6 @@
import { runAxe } from '@testcafe-community/axe';
import { createHtmlReport } from 'axe-html-reporter';
+import { prettyPrintAxeReport } from 'axe-result-pretty-print';
const customAxeRulesMap = require("../enableAxeRules.json");
fixture('TestCafe tests with Axe').page('https://a11ydemo.wordpress.com');
@@ -9,6 +10,12 @@ test('Automated accessibility testing', async (t) => {
const axeOptions = { rules: customAxeRulesMap };
const { error, results } = await runAxe(axeContext, axeOptions);
await t.expect(error).eql(null, `axe check failed with an error: ${error}`);
+ // prints full report with failed violations and passed rules summary
+ prettyPrintAxeReport({
+ violations: results.violations,
+ passes: results.passes,
+ url: 'www.example.com',
+ });
// creates html report with the default file name `accessibilityReport.html`
createHtmlReport({
violations: results.violations,
diff --git a/testcafe/testTypeScriptExample.ts b/testcafe/testTypeScriptExample.ts
index bf37c58..54e1e54 100644
--- a/testcafe/testTypeScriptExample.ts
+++ b/testcafe/testTypeScriptExample.ts
@@ -1,6 +1,7 @@
// @ts-ignore Type notice will be fixed in https://github.com/testcafe-community/axe/pull/4
import { runAxe } from '@testcafe-community/axe';
import { createHtmlReport } from 'axe-html-reporter';
+import { prettyPrintAxeReport } from 'axe-result-pretty-print';
import { t } from 'testcafe';
const customAxeRulesMap = require("../enableAxeRules.json");
@@ -11,6 +12,12 @@ test('Automated accessibility testing', async (t) => {
const axeOptions = { rules: customAxeRulesMap };
const { error, results } = await runAxe(axeContext, axeOptions);
await t.expect(error).eql(null, `axe check failed with an error: ${error}`);
+ // prints full report with failed violations and passed rules summary
+ prettyPrintAxeReport({
+ violations: results.violations,
+ passes: results.passes,
+ url: 'www.example.com',
+ });
// creates html report with the default file name `accessibilityReport.html`
createHtmlReport({
violations: results.violations,
Example Domain
+This domain is for use in illustrative examples in documents. You may use this + domain in literature without prior coordination or asking for permission.
+ +