Cypress - Test Runner

Cypress - The Cypress App (Test Runner)

The Cypress App (historically known as the Test Runner) is a key component of the Cypress experience. It provides an interactive interface for running, viewing, and debugging your tests. This visual tool significantly enhances productivity and makes understanding test execution straightforward.

Opening the Cypress App

Once Cypress is installed in your project, you can open the Cypress App using one of the following commands in your project’s root directory terminal:

# Using npx (recommended, uses the project's local Cypress version)
npx cypress open

# Or, using the direct path (less common now)
./node_modules/.bin/cypress open

When you run this command for the first time in a new project, Cypress may perform some initial setup, such as creating a cypress.config.js (or cypress.json in older versions) file and a cypress folder structure with example tests.

Navigating the Cypress App Interface

Upon launching, the Cypress App presents a user-friendly interface. The exact layout might evolve with Cypress versions, but typically includes:

• Testing Type Selection: In modern Cypress (v10+), you’ll first be prompted to choose between E2E Testing and Component Testing if both are configured.
• Browser Selection: A dropdown menu (usually at the top right) allows you to choose which browser Cypress should use to run your tests (e.g., Chrome, Firefox, Edge, Electron).
• Spec (Test File) List: The main area displays a list of your test files (specs), typically found in your cypress/e2e (for E2E tests) or component test directories. You can search or filter this list.
• Navigation Sidebar: A sidebar (often on the left) might provide access to:
• • Specs: To view and run your test files.
• • Runs: If you’re using Cypress Cloud, this section shows results from your recorded test runs.
• • Settings: Project settings, configuration, and device emulation options.
• • Debug: Tools and information for debugging failed tests, especially when connected to Cypress Cloud.

To run a specific test file, simply click on its name in the spec list. This will launch the selected browser and begin executing the tests within that file.

The Interactive Test Execution View

When a spec file is running, Cypress opens the selected browser with two main panes:

• Application Under Test (AUT) Pane (Right side): This larger pane displays your web application, just as a user would see it. Cypress interacts with this pane to perform actions and assertions.
• Command Log (Left side): This crucial pane shows a real-time, detailed log of every Cypress command executed during the test. For each command, you can see:
• • The command itself (e.g., cy.visit, cy.get, cy.click).
• • The selector used (if applicable).
• • The element(s) it yielded.
• • Assertions made and their results (pass/fail).

Key Features of the Interactive View:

• Time-Traveling Debugger: Clicking on a command in the Command Log reverts the AUT pane to the state it was in after that command executed. This allows you to step through your test execution and inspect the DOM at any point.
• DOM Snapshots: Cypress takes DOM snapshots before and after most action commands. You can pin a command in the log and inspect these snapshots, making it easy to see what changed.
• Selector Playground: A tool to help you find unique selectors for elements. You can click elements in the AUT pane, and Cypress suggests selectors.
• Error Messages: When a test fails, Cypress provides clear error messages, often with suggestions on how to fix the issue.
• Viewport Sizing: You can easily change the viewport dimensions to test responsive designs.
• Developer Tools Access: You can open the browser’s native developer tools for deeper inspection.

The Cypress App also automatically re-runs tests when you save changes to your spec files, providing a fast feedback loop during development.

Stopping Test Execution

You can stop the test execution at any time using the ‘Stop’ button, typically located in the Command Log header or near the browser selection area in the main App window.

The Cypress App is a powerful and indispensable tool for writing, running, and debugging Cypress tests, making the entire testing process more efficient and enjoyable.