diff --git a/docs/faq/questions/cloud-faq.mdx b/docs/faq/questions/cloud-faq.mdx index d84fd05f69..73a234d77c 100644 --- a/docs/faq/questions/cloud-faq.mdx +++ b/docs/faq/questions/cloud-faq.mdx @@ -406,3 +406,7 @@ All of the data within Test Replay's Developer Tools in Cypress Cloud (including ### Can I `console.log()` data in the console view of the Developer Tools panel? Yes. This displays console logs from within the application under test or your spec files. You may need to use `JSON.stringify(Object)` to display deeply nested data. + +## UI Coverage + +TODO diff --git a/docs/guides/cloud/analytics.mdx b/docs/guides/cloud/analytics.mdx index 207c4984fd..09d2fb17b2 100644 --- a/docs/guides/cloud/analytics.mdx +++ b/docs/guides/cloud/analytics.mdx @@ -1,6 +1,6 @@ --- title: Analytics & Insights -sidebar_position: 70 +sidebar_position: 80 --- Cypress Cloud provides Analytics to offer insight into metrics like runs over diff --git a/docs/guides/cloud/branch-review.mdx b/docs/guides/cloud/branch-review.mdx index ed7ae5a1e0..2e9338b681 100644 --- a/docs/guides/cloud/branch-review.mdx +++ b/docs/guides/cloud/branch-review.mdx @@ -1,6 +1,6 @@ --- title: Branch Review -sidebar_position: 50 +sidebar_position: 60 sidebar_class_name: new_label --- diff --git a/docs/guides/cloud/flaky-test-management.mdx b/docs/guides/cloud/flaky-test-management.mdx index ab3dfa634c..b8f8296328 100644 --- a/docs/guides/cloud/flaky-test-management.mdx +++ b/docs/guides/cloud/flaky-test-management.mdx @@ -1,6 +1,6 @@ --- title: Flaky Test Management -sidebar_position: 60 +sidebar_position: 70 sidebar_label: Flake Management --- diff --git a/docs/guides/cloud/ui-coverage.mdx b/docs/guides/cloud/ui-coverage.mdx new file mode 100644 index 0000000000..c8c212b5bd --- /dev/null +++ b/docs/guides/cloud/ui-coverage.mdx @@ -0,0 +1,93 @@ +--- +title: UI Coverage +sidebar_position: 50 +sidebar_class_name: new_label +--- + +:::info + +## What you'll learn + +- What UI Coverage is and why you should use it +- How to get started with UI Coverage in Cypress Cloud + +::: + +## Overview + +:::tip + + + Premium Cypress Cloud Feature + + +**UI Coverage** is available as an add-on for Cypress Cloud organizations. [Contact us](https://cypress.io/contact) to learn more. + +::: + +With UI Coverage in Cypress Cloud, you can easily visualize the test coverage of your application, helping you maintain transparency, track progress, and prioritize testing efforts for comprehensive coverage. + +UI Coverage is a visual test coverage report for your application. Unlike conventional code coverage reports, it introduces a dynamic visual overlay, simplifying the understanding of your application’s test coverage for interactive components. This invaluable tool is accessible to all involved in the software development lifecycle, from developers and QA engineers, to product managers and engineering leaders. + +UI Coverage ensures you won't risk frustrating users or losing revenue due to untested elements, by enhancing your testing processes and bringing testing into the early stages of development. It's your path to a seamless and reliable user experience. Attain a crystal-clear understanding of your testing extent, easily identify untested elements, make testing more data-driven, and confidently deliver high quality applications with Cypress. + +## How it works + +UI Coverage creates a dynamic visual map of test coverage across every page of your application. This map vividly highlights which interactive elements have been tested and which ones remain untested, providing a clear and actionable overview of your testing progress. + +Every page visited by your Cypress tests (and every component mounted in Component Testing), undergoes a comprehensive analysis. UI Coverage captures "Snapshots", representing unique DOM states of the page. For instance, if you have a sign-in page (Snapshot 1) and have a state with a login error (Snapshot 2), each of these variations is accounted for. It's not just about failures; it encompasses the full spectrum of possible interactions and DOM permutations on the page. Examples of interactive elements include sign-in buttons, payment buttons, dropdown menus, form fields, range selectors, and more. + +As a result, you receive a "UI Coverage Score" for each of your pages that quantifies your testing efforts, scoring the application based on what percentage of elements were interacted with in your tests. For Snapshots that are missing test coverage, you can easily identify the untested elements and prioritize testing efforts to achieve comprehensive coverage. + +## Getting Started + +### Enable UI Coverage + +UI Coverage is available as an add-on for Cypress Cloud organizations. [Contact us](TODO) to learn more. + +### Accessing UI Coverage + +To access UI Coverage, navigate to the **UI Coverage** tab in a run's details page. You can access a run's details page by clicking on a run in the **Runs** tab. + +TODO: image here + +### Interactive Elements + +UI Coverage uses the [W3C definition of interactive elements](https://html.spec.whatwg.org/dev/dom.html#interactive-content) as well as some additional rules defined by Cypress to determine which elements are interactive. These rules are subject to change as we continue to improve this solution. The rules for determining interactive elements are as follows: + +- TODO: list rules + +### Views + +UI Coverage is organized into "Views", which are the unique URLs across all Snapshots from end-to-end tests and the unique mounted components from component tests. Each View includes a summary of its UI Coverage details, including: + +- Count of unique Snapshots +- Count of untested interactive elements +- Count of total interactive elements +- Percent of interactive elements covered by tests + +Clicking on a View takes you to UI Coverage Report for that View. + +### Scoring + +Snapshots, Views, and Runs are scored based on the percentage of interactive elements that were interacted with in tests. + +The UI Coverage Score for a Snapshot is calculated by dividing the number of unique interactive elements in the Snapshot that were tested by the total number of unique interactive elements in the Snapshot. + +The UI Coverage Score for a View is calculated by dividing the number of unique interactive elements in the View that were tested by the total number of unique interactive elements in the View. + +The UI Coverage Score for a Run is calculated by dividing the number of unique interactive elements across all Views that were tested by the total number of unique interactive elements across all Views. + +### UI Coverage Report + +The UI Coverage Report for a View includes a list of all unique interactive elements across all Snapshots for that View, grouped by whether or not they were tested. + +Each Snapshot of the View is shown and has its own UI Coverage Score. The Snapshot has highlights on each visible interactive element. All untested elements are highlighted in red, and all tested elements are highlighted in green. When an element is hovered or clicked in either the Snapshot or the list of elements, it is highlighted in both places. + +## Troubleshooting + +TODO: troubleshooting section + +## See also + +- [UI Coverage FAQ](/faq/questions/cloud-faq#UI-Coverage)