Cypress Test Runner

The Cypress Test Runner is the visual application that opens when you launch Cypress. It shows your test files, runs them, and displays results in real time. Beginners spend most of their early learning time inside this window.

Opening the Test Runner

Run the following command inside your project folder to open the Test Runner:

npx cypress open

A window appears listing every test file found in your project. Clicking a file starts that specific test immediately.

A Simple Way to Picture It

Think of the Test Runner as a TV screen showing a live recording of a robot using your website. You watch every click, every typed letter, and every page change as it happens. This live view helps you catch mistakes instantly.

Main Parts of the Test Runner

Test Runner Window
 |
 |-- Command Log (left side: list of actions and checks)
 |
 |-- Browser Preview (right side: the actual website)
 |
 |-- Test Status (pass, fail, or pending)

The Command Log

The command log lists every action Cypress performs during a test. Each line shows a command, such as a click or a text check. Clicking any line shows the exact page state at that moment. This feature makes it easy to trace what happened before a failure.

Reading a Failed Step

A failed step appears in red inside the command log. Cypress shows the expected result next to the actual result it found. This comparison often reveals the exact cause of the failure without extra digging.

The Browser Preview

The right side of the window shows the actual web page during the test. You watch buttons get clicked and forms get filled automatically. This view behaves like a normal browser window, so you can inspect elements using browser developer tools.

Running All Tests Together

The Test Runner lets you run every test file in sequence instead of one at a time. This option suits situations where you want a full check of your application. A summary screen appears at the end, showing how many tests passed and failed.

Headless Mode

Cypress can also run without opening a visible window. This mode is called headless mode and suits automated pipelines where no human watches the test.

npx cypress run

Headless mode produces the same results faster since it skips rendering the visual interface.

Comparing the Two Modes

Interactive Mode (cypress open)
  - Visual browser window
  - Good for writing and debugging tests

Headless Mode (cypress run)
  - No visible window
  - Good for automated pipelines

Selecting a Browser

The Test Runner lets you choose which browser runs your test, such as Chrome, Edge, or Electron. Switching browsers helps confirm your application behaves consistently across different environments.

Time Travel Feature

Cypress captures a snapshot of the page after every command. Hovering over a command log entry shows the page exactly as it looked at that step. Testers call this the time travel feature, since it lets you move backward through the test history.

Key Points

• The Test Runner shows tests running live inside a browser preview.
• The command log lists every action and highlights failures in red.
• Interactive mode suits writing and debugging tests visually.
• Headless mode suits fast automated runs without a visible window.
• The time travel feature lets you inspect the page state at any test step.