- The names and purposes of the visual parts of the Cypress Test Runner
- How the tool behaves under different situations and inputs
- How the tool integrates the browser console experience
Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test.
The lefthand side of the test runner 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
Hovering on Commands
Each command and assertion, when hovered over, restores the Application Under Test (righthand side) to the state it was in when that command executed. This allows you to ‘time-travel’ back to previous states of your application when testing.
By default, Cypress keeps 50 tests worth of snapshots and command data for time traveling. If you are seeing extremely high memory consumption in your browser, you may want to lower the
numTestsKeptInMemoryin your configuration.
Clicking on Commands
Each command, assertion, or error, when clicked on, displays extra information in the dev tools console. Clicking also ‘pins’ the Application Under Test (righthand side) to its previous state when the command executed.
The righthand side of the test runner is used to display the Application Under Test (AUT: the application that was navigated to using a
cy.visit() or any subsequent routing calls made from the visited application.
In the example below, we wrote the following code in our test file:
cy.visit('https://example.cypress.io') cy.title().should('include', 'Kitchen Sink')
In the corresponding Application Preview below, you can see
https://example.cypress.io is being displayed in the righthand side. Not only is the application visible, but it is fully interactable. You can open your developer tools to inspect elements as you would your normal application. The DOM is completely available for debugging.
The AUT also displays in the size and orientation specified in your tests. You can change the size or orientation with the
cy.viewport() command or in your Cypress configuration. If the AUT does not fit within the current browser window, it is scaled appropriately to fit within the window.
The current size and scale of the AUT is displayed in the top right corner of the window.
The image below shows that our application is displaying at
660px height and scaled to
Note: The righthand side may also be used to display syntax errors in your test file that prevent the tests from running.
In version 1.3.0, the Selector Playground was introduced. In this mode, you can hover over parts of your app and the element underneath the cursor will be highlighted (like “Select an element” mode from the DevTools).
Cypress will calculate the best selector to using for getting that element. It displays the selector in a new UI panel overlaying the reporter and allowing refinements such as selecting by text via
cy.contains or selecting via attribute. It also has a copy-to-clipboard button for easy copying.