This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel
Testing skip navigation links can be tricky, since Cypress still does not have proper support for the Tab key. As a way around it, Cypress recommends cypress-plugin-tab, but that module is no longer maintained, not to mention a little flaky.
I recently implemented a proper automated test using cypress-real-events instead. Unfortunately, it does not work in Firefox since it relies on the Chromium remote debugger protocol.
As you’ll see, my test code makes very few asumptions about the way the skip link is implemented. Instead, it makes sure that:
- The skip link is not visible to begin with.
- The skip link is the first interactive element in the page.
- The skip link is visible when focused.
- The skip link moves the focus to the main element.
Without further ado:
// Load the page
cy.visit('/')
// Ensure the skip link is not visible to start with
cy.get('[data-cy="skip-link"]').as('skipLink').should('not.be.visible')
// Press Tab once to enter the page
// See: https://github.com/dmtrKovalenko/cypress-real-events/issues/355#issuecomment-1365813070
cy.window().focus().realPress('Tab')
// Ensure the skip link is now focused and visible
cy.get('@skipLink').should('have.focus').and('be.visible')
// Interact with the skip link
cy.get('skipLink').realPress('Enter')
// Ensure the skip link is no longer focused or visible
cy.get('@skipLink').should('not.have.focus').and('not.be.visible')
// Press tab again and ensure the focus was moved to the main element
cy.realPress('Tab')
.focused()
.then($el => expect($el.closest('main').not.to.be.null))I hope this helps! ✨
This content originally appeared on Kitty Giraudel and was authored by Kitty Giraudel
Kitty Giraudel | Sciencx (2023-01-31T00:00:00+00:00) Testing skip links with Cypress. Retrieved from https://www.scien.cx/2023/01/31/testing-skip-links-with-cypress/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.