0
0
Cypresstesting~20 mins

cypress-axe for accessibility - Practice Problems & Coding Challenges

Choose your learning style9 modes available
LearnWhyDeepTraceTryChallengeAutomateRecallFrame
Challenge - 5 Problems
🎖️
Accessibility Master with cypress-axe
Get all challenges correct to earn this badge!
Test your skills under time pressure!
🧠 Conceptual
intermediate
1:30remaining
What does cypress-axe primarily test for?
cypress-axe is a tool used in Cypress tests. What is its main purpose?
ATo verify if CSS styles are applied correctly
BTo test the speed of page loading
CTo check if the web page meets accessibility standards
DTo validate JavaScript syntax errors
Attempts:
2 left
💡 Hint
Think about what 'axe' is known for in web testing.
📝 Syntax
intermediate
2:00remaining
How to inject axe-core in a Cypress test?
Which code snippet correctly injects axe-core into the current page in a Cypress test?
Cypress
cy.visit('https://example.com')
// inject axe-core here
Acy.loadAxe()
Bcy.injectAxe()
Ccy.injectAxeCore()
Dcy.axeInject()
Attempts:
2 left
💡 Hint
The function name starts with 'inject' and ends with 'Axe'.
❓ rendering
advanced
2:00remaining
What is the output of this accessibility check?
Given this Cypress test code, what will be the result shown in the test runner if the page has no accessibility violations?
Cypress
cy.visit('https://example.com')
cy.injectAxe()
cy.checkA11y()
ATest passes with no accessibility violations reported
BTest fails with a syntax error
CTest fails due to missing axe-core injection
DTest passes but reports many accessibility violations
Attempts:
2 left
💡 Hint
If the page is accessible and axe-core is injected, what should happen?
❓ selector
advanced
2:00remaining
How to limit axe checks to a specific element?
Which option correctly runs accessibility checks only on the element with id 'main-content'?
Cypress
cy.visit('https://example.com')
cy.injectAxe()
// run check here
Acy.checkA11y('#main-content')
Bcy.checkA11y('.main-content')
Ccy.checkA11y('main-content')
Dcy.checkA11y('id=main-content')
Attempts:
2 left
💡 Hint
Use a CSS selector for an id.
❓ accessibility
expert
2:30remaining
What accessibility issue does this axe violation report indicate?
If cypress-axe reports a violation with the rule 'color-contrast', what does it mean?
AForm inputs are missing labels
BImages are missing alt text
CPage has no keyboard focus indicators
DText color and background color do not have enough contrast
Attempts:
2 left
💡 Hint
Think about what 'color-contrast' refers to in accessibility.