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. -Dashboard Syndication +Dashboard Integration 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 |