Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make updates for AQ + cloud page for heading buttons #5998

Merged
merged 12 commits into from
Nov 12, 2024
Merged

Make updates for AQ + cloud page for heading buttons #5998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b3676b3
Make updates for AQ + cloud page for heading buttons
jennifer-shehane Nov 8, 2024
0016ca6
double quotes
jennifer-shehane Nov 8, 2024
cf27ad2
capitalization
jennifer-shehane Nov 8, 2024
688840f
lint fixes
jennifer-shehane Nov 8, 2024
748651a
add more correct icon for Cloud intro
jennifer-shehane Nov 8, 2024
b0e5ccc
Add add-on badge to titles
jennifer-shehane Nov 8, 2024
c490b9b
Update docs/accessibility/get-started/introduction.mdx
jennifer-shehane Nov 9, 2024
775d267
Update docs/accessibility/get-started/introduction.mdx
jennifer-shehane Nov 9, 2024
c9c6695
Update docs/ui-coverage/get-started/introduction.mdx
jennifer-shehane Nov 9, 2024
3342c70
fix addon + badge styling
jennifer-shehane Nov 12, 2024
87ab193
Fix hover of buttons
jennifer-shehane Nov 12, 2024
c8d0976
Add image for UI Cov
jennifer-shehane Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 33 additions & 8 deletions docs/accessibility/get-started/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,47 @@ sidebar_position: 10
sidebar_custom_props: { 'new_label': true }
---

# Cypress Accessibility
# Cypress Accessibility <Badge type="success">+ Add-on</Badge>

<AccessibilityAddon />
Instantly visualize, triage, and fix accessibility violations without any additional code or configuration.
Dive deep into each violation with live, fully-rendered DOM snapshots of your application as it appeared during your tests.
Track your team's progress over time with historical scores to monitor improvements and identify regressions.
Looking for a general guide for Accessibility testing in Cypress App? [Go here](/app/guides/accessibility-testing).

## What is Cypress Accessibility?

Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see [our guide on this topic](/app/guides/accessibility-testing).

Cypress Accessibility generates a sortable, filterable report, to see scores and violation counts by page/component, or a combined rule-based report for the entire run. It also includes a drill-in view with live DOM snapshots highlighting each issue detected.
<Btn
label="Request trial ➜"
variant="purple-dark"
href="https://www.cypress.io/accessibility?utm_medium=intro-cta&utm_source=docs.cypress.io&utm_content=Request%20trial"
/>
<Btn
label="See a demo"
icon="action-play-small"
href="https://www.loom.com/share/eedb1d18c22942d39a5ed2471ae72788?sid=e39f791e-c0b3-4efc-9770-cbfac403c3b9"
/>
<Btn
label=" Explore an example project"
icon="cypress-accessibility-outline"
href="https://on.cypress.io/rwa-accessibility-views?utm_source=docs.cypress.io&utm_medium=intro-cta&utm_content=Explore%20an%20example%20project"
/>

<DocsImage
src="/img/accessibility/get-started/cypress-accessibility-overview.png"
alt="A graphic showing the Cypress Accessibility dashboard including list of rules, views, and the user interface showing how devtools can be used"
noBorder={true}
/>

## How are reports created?
## Get Started

You don't need to make any changes to your code or your test setup. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using Cypress Accessibility.
You'll start your [free trial](https://www.cypress.io/accessibility?utm_medium=intro-cta&utm_source=docs.cypress.io&utm_content=Request%20trial) with personalized support
from our sales team and your existing test data to instantly see full accessibility reports for all your Cypress projects.
From there, you can integrate with CI to set your own standards for handling the results.

## How it Works

Cypress Accessibility provides organized, visual, and actionable accessibility reports, based completely on the tests you record to Cypress Cloud, and powered by Axe Core® by Deque Systems. This is the documentation page for that product. To learn about the general topic of accessibility testing using the Cypress App, see [our guide on this topic](/app/guides/accessibility-testing).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the documentation page for that product.

Confusing statement. What is the product? "Cypress Accessibility" or "Axe Core".

Perhaps this sentence could be removed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yah we’re going to change all of this content actually, it’s the old content I left on the bottom


Cypress Accessibility generates a sortable, filterable report, to see scores and violation counts by page/component, or a combined rule-based report for the entire run. It also includes a drill-in view with live DOM snapshots highlighting each issue detected.

:::caution

Expand Down
38 changes: 23 additions & 15 deletions docs/cloud/get-started/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,32 @@ sidebar_position: 10
sidebar_label: Introduction
---

:::info
# Cypress Cloud

##### <Icon name="question-circle" color="#4BBFD2" /> What you'll learn
Cypress Cloud unlocks the full potential of Cypress test automation tools in your CI pipeline. Scale every facet of Cypress testing, and push your code with confidence every time.

- The benefits of using Cypress Cloud
- How to get started with Cypress Cloud
<Btn
label="Sign up ➜"
variant="purple-dark"
href="https://cloud.cypress.io/signup"
/>
<Btn
label="See a demo"
icon="action-play-small"
href="https://www.youtube.com/watch?v=vFLShoCM8pA"
/>
<Btn
label=" Explore an example project"
icon="technology-terminal-log"
href="https://cloud.cypress.io/projects/7s5okt"
/>

:::
<DocsVideo
src="https://vimeo.com/806005654"
title="View and debug past test results"
/>

## Benefits

[Cypress Cloud](https://on.cypress.io/cloud) is our enterprise-ready companion
to the open-source Cypress app, allowing you to:
Expand All @@ -26,11 +44,6 @@ to the open-source Cypress app, allowing you to:
Cypress app.
- [Configure Cypress Cloud how you want](#Flexible-enterprise-configuration-and-single-sign-on) and enable enterprise single sign on.

[Start a free trial of Cypress Cloud](/cloud/get-started/setup) now, or
read on for more benefits of Cypress Cloud.

## Benefits

### View and debug past test results

Each test run is stored in Cypress Cloud, where you can see past results and the
Expand All @@ -42,11 +55,6 @@ Or view each test's
[command logs, screenshots, video replays, stack traces, and CI logs](/cloud/features/recorded-runs#Test-detail-sidebar).
Quickly identifying a test failure in CI is just a click away.

<DocsVideo
src="https://vimeo.com/806005654"
title="View and debug past test results"
/>

### Analyze and diagnose test health

View each [run's overview](/cloud/features/recorded-runs#Overview-tab) to see and compare
Expand Down
41 changes: 28 additions & 13 deletions docs/ui-coverage/get-started/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,37 @@ sidebar_position: 10
sidebar_custom_props: { 'new_label': true }
---

# UI Coverage
# UI Coverage <Badge type="success">+ Add-on</Badge>

<UICovAddon />
Easily track, monitor, and visualize the test coverage of your UI to prevent regressions by ensuring critical flows of your app are tested. Save CI resources by removing redundant tests and improve your team's productivity with a visual overview of UI coverage across every page and component.

## What is UI Coverage
<Btn
label="Request trial ➜"
variant="purple-dark"
href="https://www.cypress.io/ui-coverage?utm_medium=intro-cta&utm_source=docs.cypress.io&utm_content=Request%20trial"
/>
<Btn
label="See a demo"
icon="action-play-small"
href="https://go.cypress.io/hubfs/App%20Quality%20Products/UI%20Coverage/ui_coverage__overview_and_demo%20(1080p).mp4"
/>
<Btn
label=" Explore an example project"
icon="object-tested-element"
href="https://on.cypress.io/rwa-ui-coverage-views?utm_source=docs.cypress.io&utm_medium=intro-cta&utm_content=Explore%20an%20example%20project"
/>

<DocsImage
src="/img/ui-coverage/get-started/Cypress_UI_Coverage_demo.gif"
alt="UI Coverage demo showing a mouse hovering and interacting with the UI of the Cloud product"
noBorder="true"
/>

UI Coverage is a visual test coverage report based on the interactive elements that make up your application. It highlights areas of missed test coverage directly within every page of your application, that you can use to make data-driven testing decisions. UI Coverage gives you the tools you need to understand coverage gaps, inform your testing strategy, and ship high-quality code with confidence.
## Get Started

UI Coverage works instantly, with no setup or code instrumentation required. If you record test runs to the Cypress Cloud with Test Replay, you're ready to start using UI Coverage.
You'll start your free trial with personalized support from our sales team and your existing test data to instantly see where testing gaps exist for all of your Cypress projects.
From there, you can easily customize reports to fit your needs with flexible configuration options.

## How it Works

Expand All @@ -29,12 +53,3 @@ UI Coverage captures "snapshots" of every page visited by your Cypress tests (an
As a result, a UI Coverage score is generated. This score quantifies coverage across your application by measuring the ratio of the unique elements that have been tested to the total unique elements that are found across your application.

Because Cypress Accessibility uses data captured through Cypress Test Replay, it is subject to any [limitations of Test Replay](https://docs.cypress.io/faq/questions/cloud-faq#Is-everything-captured-and-replayed-in-Test-Replay) data captured and browser support.

## Getting Started

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 'Latest runs' tab.

<DocsImage
src="/img/ui-coverage/get-started/uicov-docs-1.gif"
alt="UI Coverage demo showing UI of Cloud product"
/>
109 changes: 58 additions & 51 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,10 @@
"typecheck": "tsc"
},
"dependencies": {
"@cypress-design/css": "^0.18.0",
"@cypress-design/react-docmenu": "^0.7.1",
"@cypress-design/react-tag": "^0.3.3",
"@cypress-design/css": "^1.0.0",
"@cypress-design/react-button": "^1.0.1",
"@cypress-design/react-docmenu": "^1.0.2",
"@cypress-design/react-tag": "^1.0.3",
"@docusaurus/core": "^3.1.1",
"@docusaurus/preset-classic": "^3.1.1",
"@fortawesome/fontawesome-svg-core": "^6.5.1",
Expand Down
Loading