Skip to main content
Cypress Accessibility+ Add-on

Production monitoring

Cypress is commonly used in CI and local development workflows. It can also be leveraged to monitor production or staging environments through scheduled tests. This approach is particularly useful for environments involving dynamic content, such as those managed by Content Management Systems (CMS), where content changes can impact accessibility.

Dynamic or externally controlled content, such as A/B tests or user-generated content, often makes it challenging to write explicit assertions. For these cases, production smoke tests can serve as high-level health checks, ensuring the accessibility of dynamic UI variations without requiring full test coverage.

Using Cypress for Production Monitoring​

Cypress Accessibility enables you to test dynamic content seamlessly. By visiting a production URL within your Cypress tests and performing minimal UI interactions, you can capture the page's accessibility state in reports. This allows teams to detect accessibility issues introduced outside the regular development lifecycle.

Example: Automated Sitemap-Based Testing​

If your project lacks existing Cypress tests, a common approach is to generate test coverage from a sitemap or an array of target URLs. These URLs can be used to perform light interactions and capture accessibility reports. Below is an example of how to automate this process by using a sitemap 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) => {
        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.

Contents