Cypress UI Overview

This is what Cypres looks like when you launch it for the first time.

At the top is a navigation bar that includes tabs for Tests, Runs, Settings, and Browser Selection.

The Tests tab is where all of your Cypress tests live and allows you to select which tests you would like Cypress to run.

The Runs tab is where you can connect Cypress to the Cypress Dashboard to see your recorded test results.

The Settings tab contains all the configuration settings for Cypress.

Finally, the browser selection drop-down lets you tell Cypress which browser you would like to launch and run your tests.

Tests Tab

When you first install Cypress, it will automatically create some sample integration tests for you. These tests are an excellent way to learn some of the basics and some more advanced concepts. We highly recommend you look through them.

You can easily collapse or expand your directories and tests by clicking on the "Collapse All" or "Expand All" buttons.

You can also tell Cypress to execute all of your tests by clicking the "Run 20 integration tests."

Test Runner UI

Clicking on one of your test files will launch the Cypress Test Runner UI.

On the left-hand side, you will see the Cypress Command Log. This is where information about each test will be displayed. In the example above, all of our tests are passing, denoted by a green checkmark.

You can click on any of your tests to see detailed information about that specific test.

This becomes incredibly useful when you have failing tests as the assertion error will be displayed along with the exact line of code that failed.

On the right-hand side is your application.

Remember, since Cypress runs in the browser, you also have access to your browser's dev tools.

Test Runner Toolbar

At the top of the Test Runner UI is a toolbar with several handy features.

The first item is a button that will show the main Cypress window with all of your test files. This is a handy way to launch subsequent files and tests.

Next, the toolbar displays how many of your tests have passed, failed, and are pending.

The toolbar also displays the total duration it took for all of your tests to run.

Cypress will automatically scroll down as your tests are being executed to keep the most current action in view. You can disable this auto-scrolling feature by clicking this button.

You can relaunch all of your tests with this button.

The Cypress Test Runner also includes something called the Selector Playground. When clicked, it will open up a new toolbar under your application window.

This behaves similarly to the element selector in your browser's dev tools. By highlighting an element in your application, Cypress will populate the cy.get() method and populate it with the correct selector to .get() that element.

Once you have selected the element you want, click the copy to clipboard button to paste it into your test file.

You can also see the current URL of your application in the address bar.

Finally, you can see the current browser window dimensions.

Unlock the next lesson

The selector playground allows you to copy the cypress command to cy.get() an element in your app