From 95d12b1876a0192f3349e1182e376398d6ddc918 Mon Sep 17 00:00:00 2001 From: Liliia Pelypenko Date: Wed, 14 Oct 2020 18:44:12 +0900 Subject: [PATCH] Add axe-result-pretty-print --- README.md | 94 ++++++++++++++++++++++++++++++- package-lock.json | 60 ++++++++++++++++++++ package.json | 3 +- testcafe/testNoTypeScript.js | 7 +++ testcafe/testTypeScriptExample.ts | 7 +++ 5 files changed, 168 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index cd1a6b2..1fa5937 100644 --- a/README.md +++ b/README.md @@ -9,23 +9,113 @@ TestCafe framework specific wrapper: Helper to create HTML report from aXe violations, passes, incomplete and incompatible results: [axe-html-reporter](https://www.npmjs.com/package/axe-html-reporter) +Helper to provide prity console output for the axe results: +[axe-result-pretty-print](https://www.npmjs.com/package/axe-result-pretty-print) + # How to use Install packages and run the tests `npm install && npm test` ```shell script -$ npx testcafe +$ npm run test + +> axe-testcafe-demo@1.0.0 test /gitlab/axe-testcafe-demo +> testcafe chrome:headless testcafe/** && open ./artifacts/accessibilityReport.html + +The "src", "browsers" options from the configuration file will be ignored. Running tests in: - - Chrome xxx.xx.xxx / Linix + - Chrome xx.xx / OS xxx TestCafe tests with Axe +Axe core library found 9 violations for the www.example.com +┌─────────┬───────────────────────────────────────────────────────────────────┬─────────────────────┬────────────────────┬────────────┬───────┐ +│ (index) │ description │ id │ wcag │ impact │ nodes │ +├─────────┼───────────────────────────────────────────────────────────────────┼─────────────────────┼────────────────────┼────────────┼───────┤ +│ 0 │ 'Ensures role attribute has an appropriate value for the element' │ 'aria-allowed-role' │ 'Best practice' │ 'minor' │ 1 │ +│ 1 │ 'Ensures the order of headings is semantically correct' │ 'heading-order' │ 'Best practice' │ 'moderate' │ 1 │ +│ 2 │ 'Ensures every form element has a label' │ 'label' │ 'WCAG 2.0 Level A' │ 'critical' │ 1 │ +│ 3 │ 'Ensures all page content is contained by landmarks' │ 'region' │ 'Best practice' │ 'moderate' │ 6 │ +└─────────┴───────────────────────────────────────────────────────────────────┴─────────────────────┴────────────────────┴────────────┴───────┘ +1. id: 'aria-allowed-role' learn more: https://dequeuniversity.com/rules/axe/3.5/aria-allowed-role?application=axeAPI + name: ARIA role must be appropriate for the element + description: Ensures role attribute has an appropriate value for the element + WCAG: 'Best practice' + Affected elements: + Selector: "#toggle" Source code: + +2. id: 'heading-order' learn more: https://dequeuniversity.com/rules/axe/3.5/heading-order?application=axeAPI + name: Heading levels should only increase by one + description: Ensures the order of headings is semantically correct + WCAG: 'Best practice' + Affected elements: + Selector: "h4" Source code:

Latest from the Blog

+ +3. id: 'label' learn more: https://dequeuniversity.com/rules/axe/3.5/label?application=axeAPI + name: Form elements must have labels + description: Ensures every form element has a label + WCAG: 'WCAG 2.0 Level A' + Affected elements: + Selector: "#toggle" Source code: + +4. 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: ".marketing-bar-text" Source code:
Create your website at WordPress.com
+ Selector: ".marketing-bar-button" Source code: Get started + Selector: ".widget" Source code:
+ Selector: ".actnbr-btn > .actnbr-action.actnbr-actn-follow[href=""]" Source code: + Selector: ".gridicon__ellipsis" Source code: + Selector: "#wpstats" Source code: :) + +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:
+

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.

+

More information...

+
+ +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,