Add TypeScript demo

.testcaferc.json

@@ -1,5 +1,5 @@
 {
     "browsers": "chrome",
-    "src": "*.js",
+    "src": "testcafe/*.**",
     "clientScripts": [{ "module": "axe-core/axe.min.js" }]
 }

README.md

@@ -14,16 +14,18 @@ Helper to create HTML report from aXe violations, passes, incomplete and incompa
 Install packages and run the tests `npm install && npm test`
 
 ```shell script
-$ npm test
+$ npx testcafe
  Running tests in:
- - Chrome 85.0.4183.121 / Linux
+ - Chrome xxx.xx.xxx / Linix
 
  TestCafe tests with Axe
-HTML report was saved into the following directory /Users/axe-demos/artifacts/accessibilityReport.html
+HTML report was saved into the following directory /gitlab/axe-testcafe-demo/artifacts/accessibilityReport.html
  ✓ Automated accessibility testing
 
+ TestCafe tests with Axe (TypeScript Example)
+HTML report was saved into the following directory /gitlab/axe-testcafe-demo/artifacts/example.html
+ ✓ Automated accessibility testing
 
- 1 passed (1s)
 ```
 
 `npm test` command automatically opens html report file in your browser.

test.js → testcafe/testNoTypeScript.js

@@ -1,6 +1,6 @@
 import { runAxe } from '@testcafe-community/axe';
 import { createHtmlReport } from 'axe-html-reporter';
-const customAxeRulesMap = require("./enableAxeRules.json");
+const customAxeRulesMap = require("../enableAxeRules.json");
 
 fixture('TestCafe tests with Axe').page('https://a11ydemo.wordpress.com');
 

testcafe/testTypeScriptExample.ts

@@ -0,0 +1,23 @@
+// @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 { t } from 'testcafe';
+const customAxeRulesMap = require("../enableAxeRules.json");
+
+fixture('TestCafe tests with Axe (TypeScript Example)').page('http://example.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}`);
+    // 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',
+        reportFileName: 'example.html'
+    });
+});