The Cypress Test Runner
The Cypress Test Runner is the Electron-based desktop application launched by npx cypress open, and it is split into two panels: the command log on the left, which lists every Cypress command and assertion executed in the current spec, and a live preview of the application under test on the right. As a spec runs, each entry in the command log appears in real time, colored green for passing assertions and red for failures, letting you watch your application respond to simulated user interactions as they happen rather than only reading a pass/fail summary at the end.
Cricket analogy: The command log is like a ball-by-ball commentary feed running alongside the live TV broadcast, so you can match every delivery's outcome to what you're watching on screen in real time.
Time-Travel Debugging and DOM Snapshots
Hovering over any command in the command log triggers Cypress's time-travel feature: it restores a DOM snapshot captured at that exact moment during the test run and renders it in the preview pane, so you can see precisely what the page looked like before and after a click, type, or assertion executed. Clicking a command pins that snapshot and opens the browser's DevTools console with additional details about the command, including the actual and expected values for assertions, making it possible to diagnose a failure without re-running the entire test or adding console.log statements manually.
Cricket analogy: Time-travel snapshots are like DRS's ball-tracking replay that reconstructs the exact trajectory at the moment of impact, letting umpires review that precise instant without asking the bowler to re-bowl.
The Selector Playground
The Selector Playground, accessed via the crosshair icon in the Test Runner toolbar, lets you hover over or click any element in the app preview to see the CSS selector Cypress would generate for it, along with a live count of how many matching elements exist on the page. It also includes a text box where you can type your own selector and immediately see it highlighted in the preview, which is far faster for iterating on a data-cy attribute strategy than switching between the browser DevTools and your spec file.
Cricket analogy: The Selector Playground is like a fielding coach using a laser rangefinder to instantly confirm the exact distance to the boundary from any spot on the field, rather than pacing it out manually.
// Using the selector suggested by the Selector Playground
describe('Selector Playground example', () => {
it('finds the add-to-cart button reliably', () => {
cy.visit('/products/42');
// Selector Playground suggested this data-cy based selector
cy.get('[data-cy="add-to-cart-button"]').click();
cy.get('[data-cy="cart-count"]').should('contain.text', '1');
});
});The Selector Playground always prefers data-cy, data-test, or data-testid attributes over classes or IDs when suggesting a selector, because those attributes are conventionally reserved for testing and won't break when a designer changes a CSS class name.
Switching Browsers and Viewing Reports
A browser dropdown in the top-right of the Test Runner lets you switch between any locally installed Chrome-family browser, Firefox, or Edge that Cypress has detected, and re-run the currently open spec in that browser without restarting the whole session. After a spec finishes, the command log remains fully interactive for review, and if you're running via npx cypress run instead, Cypress can additionally generate a video recording of the entire run plus screenshots automatically captured on any failing test, which are invaluable when a test fails only in CI and you cannot reproduce it locally.
Cricket analogy: Switching browsers mid-session is like a broadcaster instantly switching between the Spidercam feed and a boundary camera without stopping play, giving a different angle on the same live action.
Screenshots and videos are only captured automatically in headless npx cypress run mode, not in the interactive npx cypress open Test Runner, since the interactive session is already visible and pausable for live debugging.
- The Test Runner splits into a command log (left) and a live app preview (right), updating in real time as a spec executes.
- Hovering over a command shows a time-travel DOM snapshot of the app at that exact step.
- Clicking a command pins its snapshot and surfaces detailed assertion data in the DevTools console.
- The Selector Playground helps you find and test reliable selectors, preferring data-cy attributes.
- You can switch between locally installed browsers directly from the Test Runner toolbar.
- Headless npx cypress run automatically captures videos and failure screenshots, useful for diagnosing CI-only failures.
- The interactive open mode does not auto-capture videos/screenshots since it's already live and debuggable.
Practice what you learned
1. What are the two main panels of the interactive Cypress Test Runner?
2. What happens when you hover over a command in the command log?
3. What kind of selectors does the Selector Playground prefer to suggest?
4. When does Cypress automatically capture screenshots of failing tests and videos of the run?
5. What can you do from the browser dropdown in the Test Runner toolbar?
Was this page helpful?
You May Also Like
What Is Cypress?
An introduction to Cypress, the JavaScript end-to-end testing framework that runs inside the browser alongside your application code.
Your First Cypress Test
Write, run, and understand a complete Cypress spec file from scratch, covering describe/it blocks, commands, and assertions.
Installing Cypress and Project Setup
How to add Cypress to a JavaScript project, understand the folder structure it scaffolds, and configure it for your app.