Giter VIP home page Giter VIP logo

Comments (20)

avanslaars avatar avanslaars commented on May 18, 2024 2

Thanks, @JoshuaKGoldberg for posting the repo for verification. I verified with default Cypress setup (using browserify as the preprocessor), as well as a setup with the webpack preprocessor (no TS). With your TS setup, it looks like this update covers the scenarios that seemed to be causing problems.

from cypress-axe.

marcysutton avatar marcysutton commented on May 18, 2024 1

Maybe it's a timing issue with cypress-axe testing page content before it's fully loaded? I don't work on cypress-axe myself, but I used to be on the axe-core team and I maintain the cypress docs in Gatsby. So I have lots of ideas of things to try if you aren't getting a response from the maintainer!

Some things you could do to play around with it:

  • Try adding an intentional violation to the h1 to see if it outputs a rule failure, like an invalid ARIA role (to check if that node is being evaluated at all)
  • Try cy.get('header') or some other element that contains the h1 instead of cy.wait to see if anything changes with DOM readiness

Looks like better-cypress-axe bundles axe-core with it instead of a peer dependency, maybe it's related to an axe-core version? not sure.

from cypress-axe.

tanyabot avatar tanyabot commented on May 18, 2024

Any update/response on this? I'm also getting these potential false positives.

from cypress-axe.

marcysutton avatar marcysutton commented on May 18, 2024

It would help to investigate which DOM nodes are failing with those rules in cypress-axe, and report what you find. Are those elements present in all the tests? That can help narrow down the test conditions leading to those results.

from cypress-axe.

tanyabot avatar tanyabot commented on May 18, 2024

Hey @marcysutton, so I'm running cy.checkA11y() over the entire document as soon as we visit the landing page and both the errors that @xthilakx reported appear on the <html> tag.

I'm unable to see these errors using the Axe Chrome Extension and have manually checked that there is only one main landmark and the landing page has a header one being rendered to the DOM.

from cypress-axe.

piemasters avatar piemasters commented on May 18, 2024

I'm having the same issue. Everything worked fine until moving I moved over to using TypeScript with Cypress using webpack.

For me the errors you've listed aren't false positives, it seems the scoping is off somehow as adding content that should trigger A11Y errors doesn't, you only ever get those two no matter what.

Sadly so far I've not found a fix either...

from cypress-axe.

piemasters avatar piemasters commented on May 18, 2024

I moved over to using this and it all works ok for now: https://www.npmjs.com/package/better-cypress-axe

I'd rather not be dependant on it though. Having looked through the source I'm not fully sure what the 'fix' is compared to the setup recommended by others that I've used below:

cypress/plugins/index.js

const wp = require("@cypress/webpack-preprocessor");

module.exports = on => {
  const options = {
    webpackOptions: {
      resolve: {
        extensions: [".ts", ".tsx", ".js"]
      },
      module: {
        rules: [
          {
            test: /\.tsx?$/,
            loader: "ts-loader",
            options: { transpileOnly: true }
          }
        ]
      }
    }
  };
  on("file:preprocessor", wp(options));
};

cypress/support/commands.js

import axe from "axe-core";
Cypress.Commands.add("injectAxe", () => {
  cy.window({ log: false }).then(window => {
    window.axe = axe;
  });
});

cypress/support/index.js

import "cypress-axe";
import "./commands";

cypress/commands/index.d.ts

/// <reference types="cypress" />
declare namespace Cypress {
  interface Chainable {
    injectAxe(): Chainable<Element>;
    checkA11y(): Chainable<Element>;
  }
}

cypress/tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"],
    "typeRoots": ["./support"]
  },
  "include": ["**/*.ts"]
}

The test:

describe("Accessibility checks", () => {
  beforeEach(() => {
    cy.visit("/");
    cy.injectAxe();
    cy.wait(500);
  });
  it("Has no a11y violations", () => {
    cy.checkA11y();
  });
});

from cypress-axe.

tanyabot avatar tanyabot commented on May 18, 2024

I've also considered moving over to better cypress axe, but would prefer not to.
If it's working for you (for the time being at least) @piemasters then I'l give it a go until this has been resolved

from cypress-axe.

piemasters avatar piemasters commented on May 18, 2024

Thanks for the reply @marcysutton! I finally had some time to look into this again.

I added a few violations into a simple page with two headers and nope it's not getting evaluated. I replaced the wait with a get for a header on the page with the violation and it made no difference. I tried adding the get to before the injectAxe() call as well as after to see if that made any difference but sadly no.

I tried using the same version of axe-core that better-cypress-axe uses (3.2.2) and no difference. I noticed better-cypress-axe is overriding the checkA11y command by calling window.axe.run(...).

Could injectAxe and checkA11y be accessing different window instances somehow?

from cypress-axe.

GentlemanHal avatar GentlemanHal commented on May 18, 2024

After upgrading axe-core to 3.5.0 I started getting the page-has-heading-one violation, downgrading back to 3.4.1 stops the violation appearing.

My cypress version is 4.0.1 and cypress-axe version is 0.5.3. I know v4 of cypress isn't officially on the peer dependency list but everything else seemed to be working before upgrading axe-core.

Aside:
Using the chrome extension doesn't have the violation but that is still using axe-core 3.4.1.

from cypress-axe.

JoshuaKGoldberg avatar JoshuaKGoldberg commented on May 18, 2024

@marcysutton unfortunately that's not it in my case. +1 to the "different window" theory. Simplifying source code here:

cy.window()
    .then(win => {
      const axe = (win.axe = require('axe-core'));
      console.log(
        'Axe is there with',
        win.document.body.innerHTML.includes('<h1')
          ? 'an h1 on the page'
          : 'no h1, oh no!'
      );

      return axe.run({ context: win });
    })
    .then(results => {
      console.log(results.violations.map(({ id }) => id));
    });

Logs:

Axe is there with an h1 on the page
["landmark-one-main", "page-has-heading-one"]

(I've double-checked, and yes, the full page content is there - not just the <h1)

This issue happens both with axe.run() and axe.run({ context: ... }) set to win, win.document, or win.document.body,

Edit: Oh, and better-cypress-axe fixes it for me to... and I would also prefer not to have to rely on it 😄

from cypress-axe.

avanslaars avatar avanslaars commented on May 18, 2024

If somebody is able to provide a repo that reproduces the issue and/or try to reproduce with the latest (0.7.0) release of cypress axe, I can either close this issue or work to get to the bottom of the issue.

from cypress-axe.

JoshuaKGoldberg avatar JoshuaKGoldberg commented on May 18, 2024

https://github.com/JoshuaKGoldberg/cypress-axe-repro

FWIW, 0.7.0 fixes it for me. Thanks so much! 🙌

from cypress-axe.

tavelli avatar tavelli commented on May 18, 2024

@avanslaars I was excited to read this so I bumped my repo version to 0.7.0 but still getting same false positives. Will create sample repo on Monday and share to reproduce. Running Cypress basic checkA11y on an angular app

from cypress-axe.

avanslaars avatar avanslaars commented on May 18, 2024

@tavelli sounds good, I’ll see what I can figure out with your sample when it’s available. Thanks!

from cypress-axe.

tavelli avatar tavelli commented on May 18, 2024

@avanslaars when creating sample repo realized there was some extra config code i added earlier, it was suggested somewhere for typescript support. i removed that and now it works fine, no false positives 👍

from cypress-axe.

avanslaars avatar avanslaars commented on May 18, 2024

@tavelli Thanks for the update! Glad it's working for you now. Sounds like it's safe to close this one again :)

from cypress-axe.

rowindatas25 avatar rowindatas25 commented on May 18, 2024

Hi! I am having the same issue as others have reported here with the false positives: page-has-heading-one
landmark-one-main. Is there a definitive workaround for the solution? Or is it suggested to try better cypress axe?

Cypress version: 6.1
cypress-axe version: 0.12.0

from cypress-axe.

arielperez82 avatar arielperez82 commented on May 18, 2024

@avanslaars when creating sample repo realized there was some extra config code i added earlier, it was suggested somewhere for typescript support. i removed that and now it works fine, no false positives 👍

I'm facing the same issue on a Gatsby project. I get flaky false positives when running the development server however, it's clean when running against the final build.

What was the extra config you had if I may ask?

from cypress-axe.

piouson avatar piouson commented on May 18, 2024

@avanslaars when creating sample repo realized there was some extra config code i added earlier, it was suggested somewhere for typescript support. i removed that and now it works fine, no false positives 👍

I'm facing the same issue on a Gatsby project. I get flaky false positives when running the development server however, it's clean when running against the final build.

What was the extra config you had if I may ask?

Check for an element on the page before you check for violations:

cy.get('h1');
cy.checkA11y();

from cypress-axe.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.