Skip to main content
Cypress AccessibilityPremium Solution

Work with AI agents

AI coding assistants can speed up accessibility work when they have the right context. This guide outlines patterns that teams are adopting today.

Cypress Cloud MCP​

Cypress Cloud MCP lets compatible agents pull run metadata, test results, and accessibility summaries from Cypress Cloud using structured tools instead of copy-pasting from the UI.

You can ask your LLM about what issues are present, what patterns exist, and how to break the reports into work units or manage other handoffs like reporting issues to your third-party vendors or content authors.

For example, an open-ended question like "Check the newest Cypress Accessibility results for this project and help me make an action plan to resolve them" should help your agent produce a useful summary of the current state and help quickly bucket things according to expected remediation paths and ownership.

Example prompts​

Basic​

Here are some example prompts to try out:

"Pull the Cypress Cloud Accessibility report for the latest run on this branch. List any critical or serious violations grouped by rule, and tell me which views are most impacted."

"Using Cypress Cloud, get the "color-contrast" failures from run #142 scoped to the "/checkout" view. For each failing element, look at the local CSS and suggest a fix."

Advanced​

Deep dive on solving a specific issue:

You are a front-end expert focused on delivering an accessible product.

The <element_id> selector was flagged as inaccessible by the Cypress Accessibility report. It <element_status> the <rule_severity> rule <rule_name> described as <rule_label>. The proposed solution is <proposed_solution>.

First, verify the issue is actually a problem given how the code is constructed.

If it is a valid issue, explain by briefly summarizing the fix in markdown so I can include it in my code review, then generate a plan to fix this issue (I must approve this plan before you make changes).

If it is not an issue, note it and stop. If there are not enough details to reasonably solve this, explain what other information you need before making changes. If the information is within the Cypress Cloud, submit feedback to the Cypress team.

Determine owners for issues based on specific roles at your company, and who needs to be involved or aware:

Using Cypress Cloud MCP, find the most recent run in this project with failed accessibility results and create an action plan that groups similar problems together and recommends suitable owners.

Our team includes these roles developers, QA engineers, designers, product managers, marketers, and accessibility specialists. For each role, determine if they need to be Responsible, Accountable, Consulted, Informed, or not involved.

Optimizing Cypress Accessibility for MCP use cases​

In general, it's a good idea to look carefully at the pages and elements included in your accessibility reports, to make sure the contents are things you are currently interested in having your agent triage.

You can learn how exclude pages or elements, mute known issues for certain elements, and reduce duplication in the Cypress Accessibility configuration overview.

There is also configuration for how elements are identified when failures are presented, which can flow directly into the MCP tools in a predictable way to speed up element identification in your codebase.

Component identification techniques​

Clear component boundaries make both human triage and agent-assisted fixes easier: violations are grouped predictably, and prompts can refer to the same names you see in Cypress Accessibility.

For LLM use-cases, a few lightweight signals from the page where an element locator can turn into a huge efficiency boost, avoiding the context and tokens needed to parse a full page of HTML or crawl large amounts of code. Instead, you can quickly and accurately identify where in your pages component tree a given element is, and what code rendered it.

If you don't have attributes like this already, you can ask your agent to add some to your builds with a prompt like this:

Add meaningful data-cy-component attributes to the container elements of significant areas of the dom. These will be used for later identification of an element's position in a component tree when reporting accessibility issues, so it should be possible to identify just enough structure to easily find the element in the future, but not be overly verbose.

Your browser's LLM tooling​

If you use Google Chrome, you might have noticed the Gemini AI debugging assistant. Since Cypress Cloud provides fully rendered DOM snapshots for accessibility issues, you are only a few clicks from a debugging session with Chrome Developer Tools.

Here are the steps to follow for this process:

1. Click the Print-to-Console shortcut​

This logs the exact element reference to your developer console, avoiding any need to inspect or move around the DOM manually, or use search tools to locate your element.

Cypress Cloud accessibility issue view for the rule that all page content should be contained by landmarks, showing the failing CSS selector, action icons beside it, the Print to Console control with its tooltip visible, a Solutions summary stating that some content is not inside landmarks, and a narrow app preview with the affected region outlined.

2. Move to the Elements panel​

Right-click the element in the console and choose "Open in Elements panel". This will take you to the full DOM view with the element highlighted. You need to be here for the AI chat to correctly start with the element reference.

Browser developer tools console showing a logged element. A context menu is open over the console output with 'Open in Elements panel' highlighted.

3. Start a chat about this element​

Right-click the highlighted element and choose "Debug with AI" and then "Start a chat". This will open the chat with this specific element.

Chrome DevTools Elements panel with a Material UI grid item div selected in the tree. A context menu on the element shows Debug with AI expanded to a submenu listing Start a chat, Assess visibility, and Center element. The Accessibility tab and an AI assistance tab appear in the surrounding tool UI.

4. Ask about the issue​

Use the "Share button" or copy the rule that is failing into the chat, and Gemini can explore the DOM, explain the rule in more detail, and offer solution options.

Cypress Test Runner in a three-pane layout: on the left, New Cypress Accessibility Failures lists a moderate landmarks rule and a CSS selector for the failing element; the center shows the Real World App with a highlight on the navigation drawer; on the right, the AI assistance tab lists completed diagnostic steps such as reading styles and listing landmarks, then explains that drawer content sits outside landmark regions and suggests wrapping it in a nav element or role navigation.

Contents