Weave Cypress Cloud, UI Coverage, and Cypress Accessibility more closely into the narrative of the docs

docs/guides/overview/key-differences.mdx

@@ -25,11 +25,6 @@ access to both parts (front and back) gives us the ability to respond to your
 application's events in real time, while at the same time work outside of the
 browser for tasks that require a higher privilege.
 
-Cypress also operates at the network layer by reading and altering web traffic
-on the fly. This enables Cypress to not only modify everything coming in and out
-of the browser, but also to change code that may interfere with its ability to
-automate the browser.
-
 Cypress ultimately controls the entire automation process from top to bottom,
 which puts it in the unique position of being able to understand everything
 happening in and outside of the browser. This means Cypress is capable of
@@ -48,24 +43,13 @@ general [file system operations](/api/commands/exec) and
 Because Cypress operates within your application, that means it has native
 access to every single object. Whether it is the `window`, the `document`, a DOM
 element, your application instance, a function, a timer, a service worker, or
-anything else - you have access to it in your Cypress tests. There is no object
-serialization, there is no over-the-wire protocol - you have access to
-everything. Your test code can access all the same objects that your application
-code can.
-
-## New kind of testing
+anything else - you have access to it in your Cypress tests.
 
-Having ultimate control over your application, the network traffic, and native
-access to every host object unlocks a new way of testing that has never been
-possible before. Instead of being 'locked out' of your application and not being
-able to easily control it - Cypress instead lets you alter any aspect of how
-your application works. Instead of slow and expensive tests, such as creating
-the state required for a given situation, you can create these states
-artificially like you would in an unit test. For instance you can:
+For instance you can:
 
 - [Stub](/api/commands/stub) the browser or your application's functions and
   force them to behave as needed in your test case.
-- Expose data stores (like in Redux) so you can programmatically alter the state
+- Expose data stores so you can programmatically alter the state
   of your application directly from your test code.
 - Test edge cases like 'empty views' by forcing your server to send empty
   responses.
@@ -89,10 +73,6 @@ artificially like you would in an unit test. For instance you can:
 
 ## Shortcuts
 
-Trying to test hard to reach areas of your application? Don't like the side
-effects an action creates? Tired of repeating the same repetitive and slow
-actions over and over again? You can skip them for most test cases.
-
 Cypress allows for browser context to be cached with
 [`cy.session()`](/api/commands/session). This means as a user, you only need to
 perform authentication once for the entirety of your test suite, and restore the
@@ -102,55 +82,34 @@ redirect for every test you run. You can accomplish this once with
 [`cy.session()`](/api/commands/session) and if needed,
 [`cy.origin()`](/api/commands/origin).
 
-Cypress also gives you the ability to take shortcuts and programmatically log
-in. With commands like [`cy.request()`](/api/commands/request), you can send
-HTTP requests directly, yet have those requests synchronized with the browser.
-Cookies are automatically sent and applied back. Worried about CORS? Don't be,
-it is completely bypassed. The power to choose when to test like a user and when
-to skip slow and repetitive parts is yours.
-
 ## Flake resistant
 
 Cypress knows and understands everything that happens in your application
 synchronously. It is notified the moment the page loads and the moment the page
-unloads. It is impossible for Cypress to miss elements when it fires events.
-Cypress even knows how fast an element is animating and will
+unloads. Cypress even knows how fast an element is animating and will
 [wait for it to stop animating](/guides/core-concepts/interacting-with-elements#Animations).
 Additionally, it
 [automatically waits for elements to become visible](/guides/core-concepts/interacting-with-elements#Visibility),
 to [become enabled](/guides/core-concepts/interacting-with-elements#Disability),
 and to
 [stop being covered](/guides/core-concepts/interacting-with-elements#Covering).
 When pages begin to transition, Cypress will pause command execution until the
-following page is fully loaded. You can even tell Cypress to
+following page is fully loaded. You can also tell Cypress to
 [wait](/api/commands/wait) on specific network requests to finish.
 
-Cypress executes the vast majority of its commands inside the browser, so there
-is no network lag. Commands execute and drive your application as fast as it is
-capable of rendering. To deal with modern JavaScript frameworks with complex
-UIs, you use assertions to tell Cypress what the desired state of your
-application should be. Cypress will automatically wait for your application to
-reach this state before moving on. You are completely insulated from fussing
-with manual waits or retries. Cypress automatically waits for elements to exist
-and will never yield you stale elements that have been detached from the DOM.
-
 ## Debuggability
 
-Above all else Cypress has been built for usability.
+Above all else Cypress was built for usability.
 
-There are hundreds of custom error messages describing the exact reason Cypress
+- There are hundreds of custom error messages describing the exact reason Cypress
 failed your test.
-
-There is a rich UI which visually shows you the command execution, assertions,
+- There is a rich UI which visually shows you the command execution, assertions,
 network requests, spies, stubs, page loads, or URL changes.
-
-Cypress takes snapshots of your application and enables you to time travel back
+- The Cypress App takes snapshots of your application and enables you to time travel back
 to the state it was in when commands ran.
-
-You can use the Developer Tools while your tests run, you can see every console
-message, every network request. You can inspect elements, and you can even use
-debugger statements in your spec code or your application code. There is no
-fidelity loss - you can use all the tools you're already comfortable with. This
+- You can use the Developer Tools while your tests run to see every console
+message or network request. You can inspect elements and use
+debugger statements in your spec or application code - you can use all the tools you're already comfortable with. This
 enables you to test and develop all at the same time.
 
 ## Trade offs

docs/guides/overview/why-cypress.mdx

@@ -21,53 +21,61 @@ sidebar_position: 10
 ## In a nutshell
 
 Cypress is a next generation front end testing tool built for the modern web.
-We address the key pain points developers and QA engineers
-face when testing modern applications.
+We address the key pain points teams
+face when testing modern applications and maintaining test suites.
 
 We make it possible to:
 
-- [Set up tests](#Setting-up-tests)
-- [Write tests](#Writing-tests)
-- [Run tests](#Running-tests)
-- [Debug Tests](#Debugging-tests)
+- [Set up tests](#Set-up-tests)
+- [Write tests](#Write-tests)
+- [Run tests](#Run-tests)
+- [Debug Tests](#Debug-tests)
+- [Integrate with CI](#Integrate-with-CI)
+- [Optimize your Test Suite](#Optimize-your-Test-Suite)
+- [Replay Tests](#Replay-Tests)
+- [Integrate into your workflow](#Integrate-into-your-workflow)
+- [Analyze Testing Trends](#Analyze-Testing-Trends)
 
 Cypress is most often compared to Selenium; however Cypress is both
-fundamentally and architecturally different. Cypress is not constrained by the
-same restrictions as Selenium.
-
-This enables you to **write faster**, **easier** and **more reliable** tests.
+fundamentally and architecturally different. [See our comparison of Cypress vs Selenium](https://www.cypress.io/comparison/selenium).
 
 ## Who uses Cypress?
 
-Our users are typically developers or QA engineers building web applications
-using modern JavaScript frameworks.
+Our users are typically developers, QA engineers, and teams looking to build web applications 
+and increase the quality of their existing applications.
 
-Cypress enables you to write all types of tests:
+Cypress provides solutions for:
 
-- [End-to-end tests](/guides/end-to-end-testing/writing-your-first-end-to-end-test)
-- [Component tests](/guides/component-testing/overview)
-- Integration tests
-- Unit tests
+- [End-to-end testing](/guides/end-to-end-testing/writing-your-first-end-to-end-test)
+- [Component testing](/guides/component-testing/overview)
+- Accessibility testing
+- UI Coverage
 
-Cypress can test anything that runs in a browser.
+Cypress can test anything that runs in a browser and surface insights into how to improve the health 
+of your test suite and the quality of your application.
 
 ## Cypress ecosystem
 
 Cypress consists of a free,
 [open source](https://github.com/cypress-io/cypress),
-[locally installed](/guides/getting-started/installing-cypress) application
-**and** Cypress Cloud for [recording your tests](/guides/cloud/introduction).
+[locally installed](/guides/getting-started/installing-cypress) app
+**and** [Cypress Cloud](/guides/cloud/introduction) for recording tests, surfacing test results, and providing test analytics. 
+Additionally, the Cypress Cloud provides add-ons for Cypress Accessibility and UI Coverage.
 
 - **First:** Cypress helps you set up and start writing tests every day while
   you build your application locally. _TDD at its best!_
-- **Later:** After building up a suite of tests and
+- **Next:** After building up a suite of tests and
   [integrating Cypress](/guides/continuous-integration/introduction) with your
   CI Provider, [Cypress Cloud](/guides/cloud/introduction) can record your test
-  runs. You'll never have to wonder: _Why did this fail?_
+  runs surfacing exactly what happened during the test in [Test Replay](/guides/cloud/test-replay). 
+  You'll never have to wonder: _Why did this fail?_
+- **Finally:** Add on Cypress Accessibility to ensure your application is
+  accessible to all users, and Cypress UI Coverage to ensure you have tested
+  every part of your application.
 
 ## Our mission
 
-Our mission is to build a thriving, open source ecosystem that enhances
+Our mission is to build a thriving testing solution that enhances
 productivity, makes testing an enjoyable experience, and generates developer
 happiness. We hold ourselves accountable to champion a testing process **that
 actually works**.
@@ -95,7 +103,9 @@ that makes everyone happy.
 ## Features
 
 Cypress comes fully baked, batteries included. Here is a list of things it can
-do that no other testing framework can:
+do:
+
+#### Cypress App
 
 - **Time Travel:** Cypress takes snapshots as your tests run. Hover over
   commands in the [Command Log](/guides/core-concepts/cypress-app#Command-Log)
@@ -115,12 +125,13 @@ do that no other testing framework can:
   involving your server. You can stub network traffic however you like.
 - **Consistent Results:** Our architecture doesn't use Selenium or WebDriver.
   Say hello to fast, consistent and reliable tests that are flake-free.
-- **Screenshots, Videos, and Test Replay:** View screenshots taken automatically on failure,
-  or videos, if enabled, of your entire test suite when run from the CLI. Record
-  to [Cypress Cloud](/guides/cloud/introduction) and replay the test as it executed during the run for zero-configuration debugging using [Test Replay](/guides/cloud/test-replay).
 - **Cross Browser Testing:** Run tests within Firefox and Chrome-family browsers
   (including Edge and Electron) locally and
-  [optimally in a Continuous Integration pipeline](/guides/guides/cross-browser-testing).
+  [in a Continuous Integration pipeline](/guides/guides/cross-browser-testing).
+
+#### Cypress Cloud
+
+- **Test Replay:** Record to [Cypress Cloud](/guides/cloud/introduction) and replay the test exactly as it executed during the run for zero-configuration debugging using [Test Replay](/guides/cloud/test-replay).
 - **Smart Orchestration:** Once you're set up to record to Cypress Cloud, easily
   [parallelize](/guides/cloud/smart-orchestration/parallelization) your test
   suite, rerun failed specs first with
@@ -130,39 +141,22 @@ do that no other testing framework can:
   tight feedback loops.
 - **Flake Detection:** Discover and diagnose unreliable tests with Cypress
   Cloud's [Flaky test management](/guides/cloud/flaky-test-management).
+- **Branch Review:** Quickly identify the impact a pull request might have on your test suite in a single view using [Branch Review](/guides/cloud/branch-review). Compare which tests are failing, flaky, pending, added, or modified between the source and base branches and prevent the merging of low-quality code.
+- **Integrations:** Integrate with [GitHub](/guides/cloud/integrations/source-control/github), [GitLab](/guides/cloud/integrations/source-control/gitlab), or [Bitbucket](/guides/cloud/integrations/source-control/bitbucket) to see test results directly on every push or pull request. Cypress Cloud also integrates with
+  [Slack](/guides/cloud/integrations/slack), [Jira](/guides/cloud/integrations/jira), and [Microsoft Teams](/guides/cloud/integrations/teams) to keep your team in the loop.
+- **Test Analytics:** Track test results over time with [Test Analytics](/guides/cloud/analytics/overview) to identify trends, regressions, and improvements in your test suite. Use our [Data Extract API](/guides/cloud/integrations/data-extract-api) to extract the data that is important to your team.
 
-### <Icon name="cog" /> Setting up tests
-
-There are no servers, drivers, or any other dependencies to install or
-configure. You can quickly see your first passing test using template example test specs for
-[End-to-end tests](/guides/end-to-end-testing/writing-your-first-end-to-end-test) or
-[Component tests](/guides/component-testing/getting-started).
+#### Add ons
 
-### <Icon name="code" /> Writing tests
+- **Cypress Accessibility:** Ensure your application is accessible to all users
+  with Cypress Accessibility.
+- **Cypress UI Coverage:** Ensure you have tested every part of your application
+  with Cypress UI Coverage.
 
-Tests written in Cypress are meant to be easy to read and understand. Our API
-comes fully baked, on top of tools you are familiar with already.
+## Solutions
 
-<DocsVideo src="/img/snippets/writing-tests.mp4" title="Writing Tests" />
-
-### <Icon name="play-circle" /> Running tests
-
-Cypress runs as fast as your browser can render content. You can watch tests run
-in real time as you develop your applications. TDD FTW!
-
-<DocsVideo src="/img/snippets/running-tests.mp4" title="Running Tests" />
-
-### <Icon name="bug" /> Debugging tests
-
-Readable error messages help you to debug quickly. You also have access to all
-the developer tools you know and love.
-
-<DocsVideo src="/img/snippets/debugging.mp4" title="Debugging Tests" />
-
-## Test types
-
-Cypress can be used to write several different types of tests. This can provide
-even more confidence that your application under test is working as intended.
+Cypress can be used to ensure several different testing doverage. This can provide
+even more confidence that your application under test is working as intended and accessible to all users.
 
 ### End-to-end
 
@@ -201,6 +195,19 @@ it('contains the correct number of todos', () => {
 })
 ```
 
+### Accessibility
+
+You can write Cypress tests to checks the accessibility of your application. 
+When combined with Cypress Accessibility, insights can be surfaced when 
+accessibility standards are not met through your testing - with no configuration required.
+
+```js
+it('adds todos', () => {
+  cy.visit('https://example.cypress.io/')
+  //..  
+})
+```
+
 ### API
 
 Cypress can perform arbitrary HTTP calls, thus you can use it for API testing.
@@ -225,11 +232,87 @@ it('adds a todo', () => {
 ### Other
 
 Finally, through a large number of [official and 3rd party plugins](/plugins)
-you can write Cypress [a11y](https://github.com/component-driven/cypress-axe),
+you can write other types of tests.
+
+## Get Started
+
+### <Icon name="cog" /> Set up tests
+
+There are no servers, drivers, or any other dependencies to install or
+configure. You can quickly see your first passing test within minutes for
+[End-to-end tests](/guides/end-to-end-testing/writing-your-first-end-to-end-test) or
+[Component tests](/guides/component-testing/getting-started).
 
-<a href="/plugins#visual-testing">visual</a>,
-[email](/faq/questions/using-cypress-faq#How-do-I-check-that-an-email-was-sent-out)
-and other types of tests.
+### <Icon name="code" /> Write tests
+
+Tests written in Cypress are meant to be easy to read and understand. Our [API](/api/table-of-contents)
+comes fully baked, on top of tools you are familiar with already.
+
+<DocsVideo src="/img/snippets/writing-tests.mp4" title="Writing Tests" />
+
+### <Icon name="play-circle" /> Run tests
+
+Cypress runs as fast as your browser can render content. You can watch tests run
+in real time as you develop your applications and time travel to previous steps. TDD FTW!
+
+<DocsVideo src="/img/snippets/running-tests.mp4" title="Running Tests" />
+
+### <Icon name="bug" /> Debug tests
+
+Readable error messages help you to debug quickly. You also have access to all
+the developer tools you know and love.
+
+<DocsVideo src="/img/snippets/debugging.mp4" title="Debugging Tests" />
+
+### <Icon name="bug" /> Integrate with CI
+
+Cypress can be easily integrated into your CI provider. We have guides for all
+the popular CI providers. You can also use [Cypress GitHub Action](/guides/cloud/integrations/source-control/github) to run your tests.
+
+<DocsVideo src="https://youtube.com/embed/USX6AntcPyg" />
+
+### <Icon name="bug" /> Optimize your Test Suite
+
+Cypress can run tests in parallel, and you can group test runs by browser or
+device. You can also run tests in a headless mode to speed up your test suite.
+
+<DocsImage
+  src="/img/guides/parallelization/parallelization-diagram.png"
+  alt="Parallelization Diagram"
+/>
+
+### <Icon name="bug" /> Replay Tests
+
+With [Cypress Cloud](/guides/cloud/introduction), you can record your tests and replay them exactly as they
+executed during the run and debug using [Test Replay](/guides/cloud/test-replay).
+
+<DocsVideo
+  title="Test Replay Product Demo"
+  src="https://youtube.com/embed/vFLShoCM8pA"
+/>
+
+### <Icon name="bug" /> Integrate into your workflow
+
+Cypress Cloud integrates with GitHub, GitLab, and Bitbucket to see test results
+directly on every push or pull request. You can also integrate with Slack, Jira,
+and Microsoft Teams to keep your team in the loop.
+
+<DocsImage
+  src="/img/guides/cloud/integrations/jira/dashboard-jira-integration-install.png"
+  alt="Cypress Cloud Integrations"
+/>
+
+### <Icon name="bug" /> Analyze Testing Trends
+
+Track test results over time with [Test Analytics](/guides/cloud/analytics/overview) to
+identify trends, regressions, and improvements in your test suite. Use our [Data
+Extract API](/guides/cloud/integrations/data-extract-api) to extract the data
+that is important to your team.
+
+<DocsImage
+  src="/img/guides/cloud/analytics/dashboard-analytics-overview.png"
+  alt="Cloud Analytics Screenshot"
+/>
 
 ## Cypress in the Real World