What’s New in Cypress 10 vs Cypress 9?

What is Cypress 10?

Cypress 10 is the latest major version of the Cypress testing framework, introducing significant changes to improve the developer experience and testing workflows. It focuses on modernizing both end-to-end and component testing by providing a redesigned user interface, a cleaner file structure, and more flexible test configuration options.

This version also adds built-in support for component testing, enhanced browser selection in the test runner, and new command-line flags that give teams greater control over how tests are executed. With the removal of default sample tests, Cypress 10 encourages a more streamlined and professional project setup, making it easier to organize and maintain test suites across projects.

New Features Added in Cypress 10

Cypress 10 brings major improvements that make testing more efficient, organized, and flexible. Both end-to-end and component testing workflows have been enhanced, and several usability updates simplify writing, running, and maintaining tests.

Here’s a detailed look at the key features.

1. Updated User Interface in Cypress 10

The Test Runner has been completely redesigned, prioritizing usability, visibility, and efficiency. The new interface reduces cognitive load for testers and developers working on large-scale applications.

Detailed improvements:

• Organized test display: Tests and suites are now displayed in a structured tree view, making it easy to locate specific test cases even in projects with hundreds of tests.
• Clear error reporting: Stack traces and failed assertions are shown inline with actionable details, such as the exact DOM element that caused a failure. This helps developers identify root causes without jumping between console logs or browser dev tools.
• Real-time updates: Test results update immediately as changes are made, which accelerates debugging and encourages faster iteration.
• Filtering and search: Users can filter tests by status (passed, failed, skipped) or search for specific test names, which is especially helpful for teams maintaining large test suites.
• Enhanced workflow for parallel testing: Testers can collapse or expand suites, improving focus when running tests in parallel or reviewing results from CI pipelines.

Practical impact: Teams spend less time navigating tests and more time fixing issues, improving overall productivity and test reliability.

2. Component Testing in Cypress 10

Component testing allows testing UI components in isolation, without bootstrapping the entire application. This feature is critical for modern front-end development practices like modular component design.

Key details and benefits:

• Framework support: Out-of-the-box support for React, Vue, Angular, Svelte, and more. This ensures teams can integrate component testing without additional plugins or workarounds.
• Realistic simulation: Components can be tested with props, events, state changes, and CSS styling, simulating real-world usage in a controlled environment.
• Faster iteration: Component tests are lightweight and execute quickly compared to full end-to-end tests, allowing developers to catch UI regressions early.
• Integration with Test Runner: The Test Runner shows component renderings in real time, including snapshots of visual states, helping with debugging complex interactions.
• Reduced dependency on end-to-end tests: By validating individual components separately, teams can reduce the number of fragile end-to-end tests, saving runtime and improving test stability.

Use case: A React button component can be tested independently for click events, style changes, and conditional rendering before it is used in forms or pages, catching UI bugs before integration.

3. End-to-End Testing in Cypress 10

Cypress 10 improves end-to-end testing by making it more stable, predictable, and easier to maintain. The updates focus on network control, test orchestration, and error transparency.

Enhancements include:

• Network stubbing and interception: Request and response manipulation is more flexible, allowing teams to simulate API errors, latency, or custom responses without touching backend services.
• Detailed failure context: Failures now provide actionable logs with screenshots, DOM snapshots, and exact command traces to identify issues faster.
• Optimized test execution: Tests run faster with improved queuing and retry logic, especially when running in CI pipelines or with multiple test files.
• Customizable retries: Cypress 10 allows granular configuration of retries per test or suite, reducing false negatives in flaky environments.
• Cross-team collaboration: Detailed logs and structured results help QA, developers, and project managers understand test outcomes without manually inspecting code.

Impact: Teams can confidently validate full user workflows, knowing that both network behavior and UI interactions are accurately simulated and captured.

While Cypress 10 simplifies running tests locally, validating them across multiple browsers and real devices can be challenging. Tools like BrowserStack allow teams to execute Cypress tests on hundreds of browser and OS combinations, ensuring consistent behavior in real-world environments without maintaining complex infrastructure.

4. New File Structure

Cypress 10 introduces a modernized project layout to improve maintainability and clarity, especially for large-scale projects.

Key changes include:

• Separate directories: Component tests and end-to-end tests are organized in distinct folders (component and e2e), preventing mix-ups and clarifying test intent.
• Centralized configuration: Project-wide settings are now managed in a single configuration file, reducing duplication and making changes easier to track.
• Support for custom folder layouts: Teams can define their own folder hierarchy while still benefiting from Cypress conventions.
• Ease of onboarding: New team members can immediately understand where tests reside and how to extend them without guidance.
• CI/CD readiness: The structure aligns better with pipelines, enabling selective test execution and efficient parallelization.

Impact: The new file structure promotes organized, maintainable test projects. Teams can scale testing efforts without confusion, improve collaboration, and reduce errors caused by mislocated or mismanaged test files.

5. New Command Line Flags

Cypress 10 introduces several new command-line flags that provide finer control over test execution, making it easier to run targeted tests, configure reporting, and integrate with CI/CD pipelines.

Key Changes:

• --browser <name>: Allows running tests in a specific installed browser, such as Chrome, Firefox, Edge, or Electron.
• --spec <path>: Run only selected test files or directories, which is useful for focused debugging or selective CI runs.
• --headed / --headless: Control whether tests run in GUI mode or in the background, optimizing for development or automation workflows.
• --reporter <type>: Specify custom reporters to format logs and outputs for CI pipelines.
• --record: Enable video recording or screenshot capture for test runs without additional setup.

Impact: These flags give teams flexibility to run tests in specific environments, reduce unnecessary execution time, and integrate Cypress seamlessly into automated pipelines. They also improve debugging speed by allowing targeted runs and detailed logs without modifying test code.

6. No Default Sample Tests in Cypress 10

Cypress 10 removes the default sample tests that were previously included in new projects, providing a cleaner and more professional starting point.

Key Changes:

• New projects start empty, with only the essential configuration and folder structure.
• Developers are encouraged to define their own test suites and conventions from the beginning.
• Reduces clutter that could confuse new team members or obscure real test cases.

Impact: This change helps maintain organized, maintainable projects and eliminates the need to delete or modify example tests. Teams can focus entirely on writing meaningful tests for their application, improving both efficiency and project clarity.

7. New Browser Selection Option in Test Runner

Cypress 10 enhances cross-browser testing by allowing testers to choose which browser to run tests in directly from the Test Runner interface.

Key Changes:

• Provides a dropdown to select any installed browser, including Chrome, Firefox, Edge, and Electron.
• Simplifies switching between browsers without editing configuration files or restarting the Test Runner.
• Offers better reporting and error handling for browser-specific issues.

Impact: Teams can easily validate their application across multiple browsers, ensuring consistent functionality and reducing cross-browser compatibility issues. This feature also saves time by eliminating manual configuration steps, making cross-browser testing more efficient and reliable.

Cypress 10’s browser selection makes switching environments easier, but for broader coverage across different OS versions and device types, BrowserStack provides cloud-based access to real browsers and devices, helping teams identify compatibility issues quickly and efficiently.

Upgrade from Cypress 9 to Cypress 10

Cypress 10 introduces major structural and configuration changes, so upgrading requires attention to file organization, configuration, and test execution. Planning the upgrade ensures that existing tests continue to run smoothly while taking advantage of the new features.

How to Upgrade:

• Install Cypress 10: Run npm install cypress@10 or update the package version in package.json.
• Update configuration: Migrate settings from cypress.json to cypress.config.js or .ts, including base URL, environment variables, and timeouts.
• Restructure test files: Move end-to-end tests to cypress/e2e and component tests to cypress/component folders.
• Update CLI scripts: Adjust commands in CI/CD or npm scripts to align with new flags, such as --browser and --spec.
• Verify plugins: Ensure third-party plugins and custom commands are compatible with Cypress 10 and update versions if needed.
• Run tests incrementally: Start with a subset of critical tests to confirm setup before running the full suite.

Troubleshoot Cypress 10 Migration Issues

During migration, minor issues can occur due to configuration changes or file restructuring. Most can be resolved quickly by following a few key checks.

Common Issues and Fixes:

• Tests not appearing: Check specPattern in cypress.config.js to ensure test paths match the new folder structure.
• Configuration errors: Verify environment variables, base URL, and timeout settings are correctly formatted in cypress.config.js.
• Plugin problems: Update or replace plugins that are incompatible with Cypress 10.
• Command-line failures: Ensure scripts use updated CLI flags (--browser, --spec, etc.).
• Flaky test failures: Review retries, wait strategies, and network stubs for proper behavior in the new version.

Conclusion

Cypress 10 brings major improvements to testing workflows, including a redesigned Test Runner, built-in component testing, and a streamlined file structure. These updates make writing, running, and maintaining both end-to-end and component tests faster, more organized, and more reliable for teams of any size.

For broader coverage and real-world testing, tools like BrowserStack allow Cypress tests to run across multiple browsers, operating systems, and devices. This ensures consistent application behavior, helps identify compatibility issues early, and reduces the need for maintaining complex local test environments.

Try BrowserStack for Free