Test Suites
Cypress
Cypress Panel

Cypress Panel with Replay DevTools

Every recorded test can be viewed in Replay DevTools which will help you find root causes of any hidden instabilities. With Cypress panel, you’ll get additional information about the test itself. The experience is very similar to Cypress GUI mode, but there are small differences that allow you to dive deeper into your test recording.

Cypress Panel

Command details

Clicking on any command in Cypress panel will reveal its details. You can inspect element queries, actions and assertions. When a command is focused, Source code panel will jump to the corresponding line in your spec file.

Queries

Details of query commands (opens in a new tab) such as cy.get() or cy.contains() contain information on selected elements and number of elements found. Clicking on target icon will highlight the selected element in Viewer panel.

Additionally, you can right-click on the target icon to reveal the option to copy the HTML element.

Copy HTML element

Actions

With action commands (opens in a new tab) such as cy.type() or cy.click() you’ll get information on coordinates of where given command was triggered as well any parameters passed to that command. This includes text that was typed in, or i.e. {force:true} options.

Action command detail

Assertions

Cypress assertions can be viewed in great detail. Every assertion contains the assertion message, subject of the assertion as well as the expected value.

Expected value

In case of a failed assertion, you can view complete details of the expected and actual value. This provides you with additional details that can normally get concatenated in a terminal message or in a failure screenshot.

Failed assertion

Network activity

Network requests are captured the same way as in Cypress GUI mode. In the network panel inside DevTools, you can take a better detail into different parts of an XHR call. For example, you can review the stack trace or timings of certain API calls.

Read the full guide on network panel in reference guide.

Jump to code

Hovering over icon will reveal the Jump to code button. This button is a bridge between your test and the application under test. Clicking on this button will take you to the part of code that was executed when a Cypress command was called. This helps further examining what happened during your test.

Read the full guide on jumping into code in reference guide.

Print statements

With print statements, you can deep-dive into your test flow. Click on the + button and type into the text field. You can think of this the same way as of console.log(). Anything you put in here will be printed out to the console. You can observe the values changing over the time of your test run.

Read the full guide on print statements in reference guide.

💡

PRO tip: When dealing with a flaky test, open failed and passed test side by side and compare values between them. For example if you are dealing with todo item in your test, add a print statement that will show its text. Differences in data might point to a root cause of test flakiness.

Console

You can use console the same way as in any other browser console. Replay will however provide you with couple more capabilities. For example, you can jump to a print statement to rewind or move forward in your recording. Clicking the Fast forward or Rewind button will take you to the moment of that print statement.

Read the full guide on console in reference guide.

💡

PRO tip: You can use cy.now() to call a Cypress command inside the console. For example, call cy.now('get', '[data-id=send-button]') to select [data-id=send-button] element on a given moment of your recording. This is great for checking if a given element was present at a precise moment.

See also