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 assumptions 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! ✨