The Test Runner

Improve this doc

What You’ll Learn

  • 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

Overview

Cypress runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test.

Test Runner Components:

Command Log

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 before, beforeEach, afterEach, and after hooks.

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 numTestsKeptInMemory in 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.

Instrument Panel

For certain commands like cy.route(), cy.stub(), and cy.spy(), an extra instrument panel is displayed above the test to give more information about the state of your tests.

Routes:

Stubs:

Spies:

Application Under Test

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 1000px width, 660px height and scaled to 100%.

Note: The righthand side may also be used to display syntax errors in your test file that prevent the tests from running.

Selector Playground

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.