Axe Commands

Praganti Sharma: Right, let me tell you more about those two commands, cy.injectAxe, it would extract the dom. So you'll have to do this before every test case of yours and before every test case, we'll have to extract all the document object model so that we can access all the elements, whether it is a button, or div, an input, anything. Then the other command is checkA11y. So chechA11y is the short form of check accessibility. So as soon as you run this query, it would run an accessibility check and it would give you the vulnerabilities. Now let's use that in our code. So here I'll have to put before each hook. So before each, what do we have to do? We have to inject the Axe, so injectAxe is what we will do and then, I'll write another testcase we are with checking accessibility for page load. Now, we will check this and here I will use cy.checkA11y. That's it. Let's see what happens now. I'll run it again npx cypress open. Now let's run the todo spec. So this was successful because assertion got past the other test case was check accessibility for page load and now we have two accessibility violations. Now, if you would have noticed, we had four accessibility violations when we did this using our chrome extension. But here we have just two. So now this is an ongoing issue that you might feel when you use Cypress axe, that some of the elements are not getting exploited using Cypress Axe.