Skip to main content
Cypress AccessibilityPremium Solution

Production monitoring and website crawling

Cypress is commonly used in CI and local development workflows. It can also be used 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.

Scan every page from a sitemap​

If your project lacks existing Cypress tests, a common approach is to drive Cypress Accessibility from a sitemap or an array of target URLs. Visiting each URL performs a light interaction that Cypress Accessibility records, giving you a first accessibility report for the pages your suite doesn't reach yet.

Example: Visit every sitemap URL in a single test​

The example below fetches your sitemap.xml at runtime and visits every URL it finds in a single test. This is the quickest way to get started, with no list to maintain:

describe('Accessibility Scan', () => {
  it('Checks accessibility against the URLs in sitemap.xml', () => {
    cy.request('https://<YOUR_WEBSITE>/sitemap.xml').then((response) => {
      const parser = new DOMParser()
      const xml = parser.parseFromString(response.body, 'application/xml')
      const urls = [...xml.querySelectorAll('loc')].map(
        (loc) => loc.textContent
      )

      urls.forEach((url) => {
        // Cypress Accessibility captures the accessibility state of each page
        cy.visit(url)

        // Optional: only needed when content appears as you scroll (lazy-loaded
        // images, infinite lists). Test Replay already captures the full page.
        cy.contains('<YOUR_FOOTER_CONTENT>').scrollIntoView()
      })
    })
  })
})

The scrollIntoView call is optional. Test Replay captures the full page for accessibility analysis on load, so you only need it when content appears through progressive scrolling, such as lazy-loaded images or infinite lists. It can also be worth keeping to exercise scrolling itself, since a page that cannot be scrolled to reach its content is an accessibility problem in its own right.

Example: Visit each URL in separate tests​

The single-test scan above is quick to set up, but putting each URL in a separate test is often the better choice:

  • Tracking: each page becomes a distinct test in Cypress Cloud, so a page that fails to load shows up as its own failing test with its own Test Replay, instead of collapsing the whole scan into one pass/fail.
  • Performance: a single test that visits every page keeps accumulating DOM snapshots and command history as it runs, which slows it down and makes it harder to debug. Separate tests each start clean, so they stay fast.
  • Isolation: test isolation resets the browser state between pages, so one page's cookies or storage can't leak into the next.

Because Cypress defines tests when the spec loads (before any command runs), the list of URLs has to exist before the run starts rather than come from a sitemap fetched at runtime. You can hard-code it in the spec, import it from a committed file, or generate it in your Cypress config and pass it to the spec. This documentation's own test suite takes the last approach: it builds the list of pages in cypress.config and loops over them to create one test per page.

const urls = ['/', '/about-us', '/pricing', '/contact', '/request-trial']

describe('Accessibility Scan', () => {
  urls.forEach((url) => {
    it(`Visits ${url}`, () => {
      // Cypress Accessibility captures the accessibility state of this page
      cy.visit(url)
    })
  })
})

The result is a first-load accessibility report for every URL in your site. Any Cypress tests you write for specific workflows automatically expand the accessibility area to include the states and variations those workflows reach.

Contents