Skip to main content
Cypress Accessibility+ Add-on

Inspecting violation details

After navigating to a specific Rule of View from a Run-level report, you'll land on the Violation Detail view.

The detail view of an accessibility issue, containing a Rules area and s Snapshot area for a Buttons must have discernible text violation in the Cypress Realworld App project. Each section is described in detail later in the page.

This page is divided into two main sections: Rules and Snapshots.

Rules​

The left-hand side of the detail view lists all Rules that match the current filters for the selected View. If no specific View is selected, the list applies to all Views in the run.

Rule details​

Each Rule can be expanded to reveal related elements and additional information:

  • Description: Text explaining the rule, its origin, the affected user experiences, and how to fix the issue.
  • Learn More: A link to Deque University for in-depth guidance.

Element details​

Clicking on an element in the expanded Rule section provides:

  • Pinned Element: Highlights the element in the UI for easier identification.
  • Copy Selector: A button to copy the CSS selector uniquely identifying the element.
  • Print to Console: Logs the element reference to the browser's console for debugging. In Chrome-based browsers, you can right-click the logged element and select "Reveal in elements panel" to navigate directly to the live DOM.
  • Share issue: A button to copy markdown or plain text snippet to share the issue with your team or collaborators.
  • Solutions: A list of potential solutions to address the issue.
Details displayed after clicking on an element in the Rules section of the Cypress Accessibility issue detail view. Options to copy the selector, print to console, share the issue, and solutions are available.

Snapshots​

Snapshots are fully hydrated HTML and CSS representations of your application's state during the test. Unlike screenshots or video, these snapshots allow you to:

  • Inspect the DOM and accessibility tree without running the application locally.
  • Understand the context of each violation and debug directly from the snapshot.

This area also has the Test Replay button to provide access to any tests where this snapshot appeared, as well as the specific URL of the snapshot displayed at the bottom of the screen.

It's also possible to cycle through the available snapshots to see all the states of the application that were captured, but this is usually not necessary. Think of snapshots more as examples and evidence relate to elements that are listed on the left hand side of the screen. The most useful way to go through the report is this way.

Contents