--- id: ui-coverage/get-started/setup title: Get started with Cypress UI Coverage description: >- Record a run with Test Replay, read your UI Coverage report, and tune it with App Quality configuration — no code changes or instrumentation required. section: ui-coverage source_path: docs/ui-coverage/get-started/setup.mdx version: 29f95bf8bb06f320986f3749f5bf09a35a409eab updated_at: '2026-09-04T10:49:54.630Z' --- # Get started with UI Coverage UI Coverage turns every run you already record to Cypress Cloud into a visual map of which interactive elements your tests exercise and which they miss, plus a coverage score you can track over time. There's nothing to install and no code to instrument: reports are generated in Cypress Cloud from the [Test Replay](/llm/markdown/cloud/features/test-replay.md) data your runs already capture. If you record to Cypress Cloud with Test Replay, you can be reading your first report in minutes. **UI Coverage** turns your runs into a visual map of the interactive elements your tests exercise and the ones they miss, with no code changes or instrumentation. [Schedule a demo](https://www.cypress.io/ui-coverage?utm_medium=premium-solution-tip&utm_source=docs.cypress.io&utm_content=Schedule%20a%20demo). ## What you'll need Before you start, make sure you have: * **A Cypress project recording to [Cypress Cloud](/llm/markdown/cloud/get-started/introduction.md)** with a run or two already recorded. * **[Test Replay](/llm/markdown/cloud/features/test-replay.md) enabled** on the project. UI Coverage reports are built entirely from Test Replay data, so a run recorded with Test Replay off produces no report. * **Cypress v13 or later**, the minimum version that captures Test Replay data. * **UI Coverage enabled for your organization.** UI Coverage isn't included in standard Cloud plans. [Start a trial](#Step-1-Start-your-UI-Coverage-trial) to enable it for your projects. You don't need to change your tests, add a plugin, or write any configuration to get a report. Configuration is opt-in and comes later, once you want to [sharpen the results](#Step-4-Tune-your-reports-with-App-Quality-configuration). ## Step 1: Start your UI Coverage trial UI Coverage is enabled through a free trial. You'll get a personalized walkthrough that uses your **existing** recorded runs, so you can see exactly where your testing gaps are across your real projects before writing a single new test. [Request trial ➜](https://www.cypress.io/ui-coverage?utm_medium=get-started-page&utm_source=docs.cypress.io&utm_content=Request%20trial) ## Step 2: Record a run with Test Replay UI Coverage needs a run recorded to Cypress Cloud with Test Replay enabled. If you're already recording runs with Test Replay on, you can skip ahead to [Step 3](#Step-3-Explore-your-UI-Coverage-report) and open an existing run. To record a new run, pass `--record` and your project's record key to `cypress run`: * npm * Yarn * pnpm * Bun ``` npx cypress run --record --key ``` ``` yarn cypress run --record --key ``` ``` pnpm cypress run --record --key ``` ``` bunx cypress run --record --key ``` New to recording? Follow [Record a run to Cypress Cloud](/llm/markdown/cloud/get-started/setup.md) for the full setup, and confirm [Test Replay](/llm/markdown/cloud/features/test-replay.md) is enabled in your project settings. ## Step 3: Explore your UI Coverage report After a run finishes recording, open it in Cypress Cloud and select the **UI Coverage** tab. A report is generated automatically for every recorded run, covering every unique state your tests reached, in both end-to-end and component testing. Your report answers four questions: * **What's my overall coverage?** The [coverage score](/llm/markdown/ui-coverage/faq.md#How-is-the-UI-Coverage-score-calculated) is the share of interactive elements your tests exercised. * **Which pages need the most attention?** Each [view](/llm/markdown/ui-coverage/core-concepts/views.md) (a page or state of your app) gets its own score, so you can rank pages and weigh each one against how critical it is to your users. * **What did my tests miss on a page?** Drilling into a view lists its untested [interactive elements](/llm/markdown/ui-coverage/core-concepts/interactivity.md#Interactive-Elements), each with a full-page, inspectable DOM snapshot showing exactly where it is. * **Which pages do my tests never reach?** [Untested links](/llm/markdown/ui-coverage/core-concepts/interactivity.md#Untested-Links) surface pages your tests link to but never visit, so you can see the flows your suite is missing entirely. The UI Coverage tab: an overall coverage score, a per-view breakdown, and navigation to untested links, tested elements, and untested elements. Start with your lowest-scoring critical views. The [Identify coverage gaps](/llm/markdown/ui-coverage/guides/identify-coverage-gaps.md) guide walks through this workflow step by step, and [Address coverage gaps](/llm/markdown/ui-coverage/guides/address-coverage-gaps.md) shows how to close each gap, including generating a test for an untested element with [Test Generation](/llm/markdown/ui-coverage/faq.md#What-is-Test-Generation-in-Cypress-UI-Coverage). ## Step 4: Tune your reports with App Quality configuration Your first report is often noisier than the real gaps in your suite. Third-party widgets (chat launchers, cookie banners) count as untested elements, and links to pages you'll never test (identity providers, marketing sites) count against your score. A few lines of configuration remove that noise so every gap the report shows is a real one. Configuration lives in Cypress Cloud, not in your repository. Open your project's **Project Settings**, select the **App Quality** tab, and edit the configuration as JSON. This example excludes a support chat widget and a third-party login page: App Quality Config ``` { "elementFilters": [ { "selector": "#intercom-container, #intercom-container *", "include": false, "comment": "Support chat widget rendered on every page" } ], "viewFilters": [ { "pattern": "https://auth.mycompany.com/*", "include": false, "comment": "Third-party identity provider — not our app to test" } ] } ``` After saving, you don't need to re-run your tests: reprocess any historical run from its **Properties** tab to see the effect of your change immediately. UI Coverage offers a full set of configuration options you can add incrementally: | Your goal | Use | | --- | --- | | Remove third-party widgets and other elements from the report | [`elementFilters`](/llm/markdown/ui-coverage/configuration/elementfilters.md) | | Remove entire pages, and links to them, from the report | [`viewFilters`](/llm/markdown/ui-coverage/configuration/viewfilters.md) | | Group related URLs into a single view | [`views`](/llm/markdown/ui-coverage/configuration/views.md) | | Combine repeated or related elements so they count as one | [`elementGroups`](/llm/markdown/ui-coverage/configuration/elementgroups.md) | | Rename or stabilize the identity of a single element | [`elements`](/llm/markdown/ui-coverage/configuration/elements.md) | | Prioritize your own attributes for identifying elements | [`significantAttributes`](/llm/markdown/ui-coverage/configuration/significantattributes.md) | | Stop dynamic or generated attributes from splitting an element | [`attributeFilters`](/llm/markdown/ui-coverage/configuration/attributefilters.md) | | Count a custom or plugin command as an interaction | [`additionalInteractionCommands`](/llm/markdown/ui-coverage/configuration/additionalinteractioncommands.md) | | Limit which commands count as coverage for specific elements | [`allowedInteractionCommands`](/llm/markdown/ui-coverage/configuration/allowedinteractioncommands.md) | | Apply different configuration to runs based on run tags | [`profiles`](/llm/markdown/ui-coverage/configuration/profiles.md) | See the [Configuration overview](/llm/markdown/ui-coverage/configuration/overview.md) for how every option fits together, including which properties are [shared](/llm/markdown/ui-coverage/configuration/overview.md#Configuration-scope) with Cypress Accessibility. ## Step 5: Enforce coverage in CI (optional) Once you trust your reports, you can hold the line on coverage automatically. The [Results API](/llm/markdown/ui-coverage/results-api.md) fetches a run's UI Coverage results in your CI job so your script can fail the build or [block a pull request](/llm/markdown/ui-coverage/guides/block-pull-requests.md) when coverage drops below a threshold you set. Enforcement is entirely opt-in and lives in your CI workflow. ## Next steps * [ ### Identify coverage gaps Go from a recorded run to a prioritized list of the untested buttons, forms, links, and pages in your application. ](/llm/markdown/ui-coverage/guides/identify-coverage-gaps.md) * [ ### Address coverage gaps Close the gaps that matter by writing targeted tests or generating them directly from untested elements in the report. ](/llm/markdown/ui-coverage/guides/address-coverage-gaps.md) * [ ### Reduce noise Group views and elements and tune attribute handling so your report reflects your app, not the framework. ](/llm/markdown/ui-coverage/guides/reduce-noise.md) * [ ### Compare reports See exactly what a change did to your coverage by comparing any two runs in Branch Review. ](/llm/markdown/ui-coverage/guides/compare-reports.md) * [ ### Monitor changes Track coverage over time and catch regressions as part of your CI/CD workflow with the Results API. ](/llm/markdown/ui-coverage/guides/monitor-changes.md) * [ ### Work with AI agents Use Cypress Cloud MCP to pull scores, views, and untested elements from recorded runs and generate tests from your AI coding assistant. ](/llm/markdown/ui-coverage/work-with-ai-agents.md) ## See also * [What is UI Coverage?](/llm/markdown/ui-coverage/get-started/introduction.md) explains the product and how it works at a glance. * [Interactivity](/llm/markdown/ui-coverage/core-concepts/interactivity.md) covers which elements are counted and which commands mark them tested. * [Views](/llm/markdown/ui-coverage/core-concepts/views.md) explains how the URLs your tests visit become views. * [Configuration overview](/llm/markdown/ui-coverage/configuration/overview.md) lists every App Quality configuration option and what each one does. * [Results API](/llm/markdown/ui-coverage/results-api.md) fetches a run's results in CI so you can enforce coverage standards. * [UI Coverage FAQ](/llm/markdown/ui-coverage/faq.md) answers common questions about scores, gaps, configuration, and troubleshooting. * [Troubleshooting](/llm/markdown/ui-coverage/troubleshooting.md) maps common report problems to their causes and fixes.