Production monitoring

Many organizations use Cypress automation in CI, and for local development, but also run scheduled tests against production or staging environments. This pattern works especially well for situations where a Content Management System is involved and content authors can add or modify things that affect the user interface, or anything else where the content being tested is not fully controlled by the testing environment. Since it can be impossible to write explicit assertions for ever-changing content like this, or for A/B tests of different UI variations implemented outside your codebase, production smoke tests tend to be more high-level health checks.

Cypress Accessibility makes this kind of testing even more useful, as it will be able to run just fine against that dynamic set of content. Just by visiting a production URL in your Cypress tests, and taking one or two light actions in the UI, that page will be captured in your accessibility report, and alert you about content changes outside of your development lifecycle that introduce accessibility issues.

One common approach to this kind of monitoring, if the project does not already have Cypress tests, is to use something like a site map, or just an array of target URLs, to quickly spin up a lot of coverage without writing new tests for every page, and then run that Cypress test on a schedule to get daily updated accessibility reports. Here is an example of doing this by requesting the sitemap.xml file from a website and scrolling to the footer on each page.

describe('accessibility scan', () => {
  it('checks accessibility with the sitemap.xml', () => {
    cy.request('https://<YOUR_WEBSITE>/sitemap.xml').then((response) => {
      const xmlString = response.body
      const parser = new DOMParser()
      const xmlDoc = parser.parseFromString(xmlString, 'application/xml')
      const URLs = Array.from(xmlDoc.querySelectorAll('loc')).map(
        (loc) => loc.textContent
      )
      Cypress._.each(URLs, (URL) => {
        it(`visits ${URL}`, () => {
          cy.visit(URL)
          cy.contains('<YOUR_FOOTER_CONTENT>').scrollIntoView()
        })
      })
    })
  })
})

The outcome of this is a first-page-load accessibility report for every URL in the site. Any Cypress UI tests for specific workflows will increase the coverage area automatically to include the states and variations reached during the workflows.