Testcafe-hammerhead: Test accessibility using testcafe and axe-core

[ameyakoshti]

What is your Test Scenario?

Testing accessibility using axe-core runs into <title> element not found violation.

What is the Current behavior?

Running testcafe with axe-core reports the above mentioned error.

I believe the hammerhead injection is causing the axe-core problem. axe-core cannot find the document title element in the testcafe runner. Hence you see:
Documents must have <title> element to aid in navigation violations.

What is the Expected behavior?

axe-core should find the <title> element.

What is your web application and your TestCafe test code?

https://github.com/donsalari/testcafe-a11y-bug

Your website URL (or attach your complete example):

https://github.com/donsalari/testcafe-a11y-bug

Your complete test code (or attach your test files):

import { axeCheck, createReport } from 'axe-testcafe';

fixture `Getting Started`
    .page `./index.html`;

test('Automated accessibility testing', async t => {
    const { error, violations } = await axeCheck(t);
    await t.expect(violations.length === 0).ok(createReport(violations));
});

Your complete configuration file (if any):

Your complete test report:

$ testcafe chrome test.js
 Running tests in:
 - Chrome 83.0.4103.97 / macOS 10.15.5

 Getting Started
 ✖ Automated accessibility testing

   1) AssertionError: 1 violations found:
      1) Documents must have <title> element to aid in navigation
          "html"
      : expected false to be truthy

      Browser: Chrome 83.0.4103.97 / macOS 10.15.5

         3 |fixture `Getting Started`
         4 |    .page `./index.html`;
         5 |
         6 |test('Automated accessibility testing', async t => {
         7 |    const { error, violations } = await axeCheck(t);
       > 8 |    await t.expect(violations.length === 0).ok(createReport(violations));
         9 |});

         at <anonymous> (/Users/a0k00e3/Desktop/testcafe-a11y-bug/test.js:8:45)



 1/1 failed (1s)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Screenshots:

Steps to Reproduce:

1. Clone https://github.com/donsalari/testcafe-a11y-bug and yarn install
2. Execute yarn test
3. See the error

Although if you run the same static page directly in the browser (without test cafe), axe-core does not report any violations.

1. Load the https://github.com/donsalari/testcafe-a11y-bug/blob/master/index.html in chrome.
2. Execute the following in the browse console:

axe.run(document, {}, (error, { violations }) => {
  console.log({ error, violations });
});

1. No errors

Your Environment details:

• testcafe version: 1.8.6
• node.js version: 12.16.3
• command-line arguments: yarn test
• browser name and version: chrome 83.0.4103.97
• platform and version: macOS 10.15.5
• other:

[Dmitry-Ostashev]

Thank you for your report. I've reproduced the issue. We'll research it and update this thread as soon as we have any news.

[AndreyBelym]

Closed by https://github.com/DevExpress/testcafe-hammerhead/pull/2352

[ameyakoshti]

Thank you 🎉