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

// Ensure the skip link is not visible to start with

// Press Tab once to enter the page
// See: https://github.com/dmtrKovalenko/cypress-real-events/issues/355#issuecomment-1365813070

// Ensure the skip link is now focused and visible

// Interact with the skip link

// Ensure the skip link is no longer focused or visible

// Press tab again and ensure the focus was moved to the main element
.then($el => expect($el.closest('main').not.to.be.null))

I hope this helps!