Testing [email protected]

package.json

@@ -4,17 +4,17 @@
     "description": "",
     "private": true,
     "scripts": {
-        "test": "testcafe chrome:headless testcafe/** && open ./artifacts/accessibilityReport.html"
+        "test": "rm -rf artifacts && mkdir artifacts && rm -rf docs && mkdir docs && testcafe chrome:headless testcafe/** && open ./docs/index.html"
     },
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "@testcafe-community/axe": "^3.4.0",
-        "axe-core": "^3.5.5",
-        "axe-html-reporter": "^1.0.0",
+        "@testcafe-community/axe": "^3.5.0",
+        "axe-core": "^4.1.1",
+        "axe-html-reporter": "^2.2.9",
         "axe-result-pretty-print": "^1.0.0",
         "prettier": "^2.1.2",
-        "testcafe": "^1.9.4"
+        "testcafe": "^3.6.2"
     },
     "dependencies": {}
 }

testcafe/testNoTypeScript.js

@@ -1,15 +1,15 @@
-import { runAxe } from '@testcafe-community/axe';
-import { createHtmlReport } from 'axe-html-reporter';
-import { prettyPrintAxeReport } from 'axe-result-pretty-print';
+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');
+fixture('TestCafe tests with Axe (Javascript example)').page('https://a11ydemo.wordpress.com');
 
 test('Automated accessibility testing', async (t) => {
-    const axeContext = { exclude: [['select']] };
-    const axeOptions = { rules: customAxeRulesMap };
-    const { error, results } = await runAxe(axeContext, axeOptions);
-    await t.expect(error).eql(null, `axe check failed with an error: ${error}`);
+    const axeContext = {exclude: [['select']]};
+    const axeOptions = {rules: customAxeRulesMap};
+    const { error, results} = await runAxe(axeContext, axeOptions);
     // prints full report with failed violations and passed rules summary
     prettyPrintAxeReport({
         violations: results.violations,
@@ -18,10 +18,9 @@ test('Automated accessibility testing', async (t) => {
     });
     // creates html report with the default file name `accessibilityReport.html`
     createHtmlReport({
-        violations: results.violations,
-        passes: results.passes,
-        incomplete: results.incomplete,
-        url: results.url,
-        projectKey: 'EXAMPLE',
+        results,
+        options: {
+            projectKey: 'EXAMPLE'
+        }
     });
 });

testcafe/testTypeScriptExample.ts

@@ -2,11 +2,17 @@ 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");
 
-fixture('TestCafe tests with Axe (TypeScript Example)').page('http://example.com');
+const customAxeRulesMap = require('../enableAxeRules.json');
 
-test('Automated accessibility testing', async (t) => {
+const urls = {
+    example: 'www.example.com',
+    axeHtmlReporterPages: 'https://lpelypenko.github.io/axe-html-reporter/',
+};
+
+fixture('TestCafe tests with Axe (TypeScript Example)');
+
+test.page(urls.example)('Automated accessibility testing', async (t) => {
     const axeContext = { exclude: [['select']] };
     const axeOptions = { rules: customAxeRulesMap };
     const { error, results } = await runAxe(axeContext, axeOptions);
@@ -15,15 +21,49 @@ test('Automated accessibility testing', async (t) => {
     prettyPrintAxeReport({
         violations: results.violations,
         passes: results.passes,
-        url: 'www.example.com',
+        url: urls.example,
     });
-    // creates html report with the default file name `accessibilityReport.html`
+    // creates html report with name 'example.html' that overwrite the default file name `accessibilityReport.html`
     createHtmlReport({
-        violations: results.violations,
-        passes: results.passes,
-        incomplete: results.incomplete,
-        url: results.url,
-        projectKey: 'EXAMPLE',
-        reportFileName: 'example.html'
+        results,
+        options: {
+            projectKey: 'EXAMPLE',
+            outputDirPath: 'docs',
+            reportFileName: 'index.html',
+        },
     });
 });
+
+test.page(urls.axeHtmlReporterPages)(
+    'Accessibility testing for axe-html-reporter github pages',
+    async (t) => {
+        const axeContext = { exclude: [['select']] };
+        const { error, results } = await runAxe(axeContext);
+        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: 'https://lpelypenko.github.io/axe-html-reporter/',
+        });
+        // creates html report with name 'axe-html-reporter-pages.html'
+        createHtmlReport({
+            results,
+            options: {
+                reportFileName: 'axe-html-reporter-pages.html',
+            },
+        });
+    }
+);
+
+
+test.page(urls.axeHtmlReporterPages)(
+    'Example of using raw axe results',
+    async (t) => {
+        const rawAxeResults = require('./rawAxeResults.json');
+        createHtmlReport({
+            results: rawAxeResults,
+            options: { outputDir: 'artifacts', reportFileName: 'reportFromRawAxeResults.html' },
+        });
+    }
+);