diff --git a/content/_data/sidebar.json b/content/_data/sidebar.json
index a53d75e13e..29c2537aca 100644
--- a/content/_data/sidebar.json
+++ b/content/_data/sidebar.json
@@ -173,6 +173,10 @@
"title": "Testing Types",
"slug": "testing-types"
},
+ {
+ "title": "Cypress App",
+ "slug": "cypress-app"
+ },
{
"title": "Writing and Organizing Tests",
"slug": "writing-and-organizing-tests"
@@ -192,10 +196,6 @@
{
"title": "Conditional Testing",
"slug": "conditional-testing"
- },
- {
- "title": "Cypress App",
- "slug": "cypress-app"
}
]
},
diff --git a/content/guides/core-concepts/cypress-app.md b/content/guides/core-concepts/cypress-app.md
index 4fd0c83084..1458cd63ba 100644
--- a/content/guides/core-concepts/cypress-app.md
+++ b/content/guides/core-concepts/cypress-app.md
@@ -6,22 +6,22 @@ title: Cypress App
## What you'll learn
-- The names and purposes of the visual parts of the Cypress App
+- The names and purposes of the visual parts of the Cypress app
- How to use the Selector Playground for targeting your page elements
-- How to debug tests using the built-in features of the Cypress App
+- How to debug tests using the built-in features of the Cypress app
## Overview
-The Cypress App is a desktop application with powerful features for creating,
+The Cypress app is a desktop application with powerful features for creating,
configuring, browsing and most importantly running your tests. We'll touch on a
few of the different functions before moving on to the Test Runner, the heart of
the Cypress testing experience.
-
+
A number of the features described below will only be shown if you are logged
into the [Cypress Dashboard](/guides/dashboard/introduction). If you're not sure
@@ -42,7 +42,7 @@ The Launchpad is your portal to Cypress, helping with onboarding, choosing a
testing type and launching a browser.
Once you get comfortable with Cypress you might find you don't need the
-Launchpad any more. In this case you can launch the App with
+Launchpad any more. In this case you can launch the app with
[`cypress open --e2e` or ` --component`](/guides/guides/command-line#cypress-open)
to go straight to the Spec Explorer.
@@ -75,21 +75,21 @@ should be the same everywhere.
This column shows the average time taken to run the entire spec file. Again,
this metadata is syndicated from the Dashboard.
-### Recorded Runs (Recent Runs? Latest Runs?)
+### Project Runs
TODO Ideally runs would show different commits
This screen shows detailed information about the most recently recorded test
runs, latest first. This metadata is syndicated from the Dashboard (see
-[note above](#Overview)) so should be the same everywhere.
+[note above](#Overview)) so should be the same everywhere. -- across branches --
The title of each run is taken from the
[git commit message](https://www.educative.io/edpresso/git-commit-message-simply-explained)
for that change, and clicking on it will take you to the corresponding run page
in the Dashboard.
-TODO More detail needed?
+TODO More detail needed? TODO link to dash runs
## The Test Runner
@@ -97,18 +97,18 @@ At the core of the app is the Test Runner itself. Cypress runs tests
interactively, allowing you to see commands as they execute while also viewing
the Application or Component Under Test, and exploring its DOM.
-TODO Update this image
-
+TODO Update this image (contact Ryan for help)
+
## Command Log
-The lefthand side of the Cypress App is a visual representation of your test
+The lefthand side of the Cypress app is a visual representation of your test
suite. Each test block is properly nested and each test, when clicked, displays
every Cypress command and assertion executed within the test's block as well as
any command or assertion executed in relevant `before`, `beforeEach`,
`afterEach`, and `after` hooks.
-
+
### Open files in your IDE
@@ -135,9 +135,9 @@ you may want to lower the `numTestsKeptInMemory` in your
In the following example, hovering over the `CONTAINS` command in the Command
-Log changes the state of the Cypress App:
+Log changes the state of the Cypress app:
-
+
Cypress automatically travels back in time to a snapshot of when a hovered-over
command resolved. Additionally, since [`cy.contains()`](/api/commands/contains)
@@ -159,7 +159,7 @@ command executed.
In the following example, clicking on the `CLICK` command highlights it in
purple, and does three other things worth noting:
-
+
#### 1. Pinned snapshots
@@ -238,14 +238,14 @@ it('intercept command log', () => {
## Preview Pane
-The righthand side of the Cypress App is where the Application or Component
+The righthand side of the Cypress app is where the Application or Component
Under Test is rendered.
### Application Under Test
In
[E2E Testing](/guides/core-concepts/testing-types#What-is-End-to-end-Testing),
-the righthand side of the Cypress App is used to display the Application Under
+the righthand side of the Cypress app is used to display the Application Under
Test (AUT): the application that was navigated to using a
[`cy.visit()`](/api/commands/visit) or any subsequent routing calls made from
the visited application.
@@ -294,7 +294,7 @@ unexpected behaviors
In
[Component testing](/guides/core-concepts/testing-types#What-is-Component-Testing),
-the righthand side of the Cypress App is used to display the Component Under
+the righthand side of the Cypress app is used to display the Component Under
Test (CUT): the component that was mounted using the
[`cy.mount()`](/api/commands/mount) command.
@@ -401,7 +401,7 @@ changes.
### Finding Selectors
To open the Selector Playground, click the
-button next to the URL at the top of the Cypress App. Hover over elements in
+button next to the URL at the top of the Cypress app. Hover over elements in
your app to preview a unique selector for that element in the tooltip.
@@ -446,7 +446,7 @@ off will allow you to interact with your app more easily.
## Keyboard Shortcuts
There are keyboard shortcuts to quickly perform common actions from within the
-Cypress App.
+Cypress app.
| Key | Action |
| --- | ----------------------------- |
@@ -478,7 +478,7 @@ information to your console.
Open up your Dev Tools and click on the `GET` for the `.action-email` class
selector.
-
+
**We can see Cypress output additional information in the console:**
@@ -524,7 +524,7 @@ describe('My First Test', () => {
Now, when the test runs, Cypress provides us a UI (similar to debugger) to step
forward through each command in the test.
-
+
In action:
@@ -534,5 +534,5 @@ In action:
| Version | Changes |
| ------------------------------------------- | --------------------------------------- |
-| [3.5.0](/guides/references/changelog#3-5-0) | Added keyboard shortcuts to Cypress App |
+| [3.5.0](/guides/references/changelog#3-5-0) | Added keyboard shortcuts to Cypress app |
| [1.3.0](/guides/references/changelog#1-3-0) | Added Selector Playground |