New Features

Cypress keeps improving with new updates, making testing easier and more powerful. In this tutorial, we will explore some of the latest features introduced in recent Cypress versions. These features enhance performance, introduce new tools, and improve the overall developer experience.

Support for WebKit (Safari) Browsers

• Cypress now supports testing in WebKit-based browsers, such as Safari, on macOS and Windows.
• Why It's Useful: Ensures compatibility across all major browsers (Chromium, Firefox, and WebKit).
• How to Use: Run tests in WebKit:

Component Testing (Stable)

• Component testing allows you to test individual UI components in isolation.
• Why It's Useful: Find bugs in specific components without running the entire application.
• How to Use:

1. Configure component testing in cypress.config.js:

const { defineConfig } = require('cypress');
module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
    },
  },
});

2. Run the Component Test Runner:

Experimental Studio

• What It Is: A visual tool that lets you record and generate Cypress commands by interacting with your app.
• Why It's Useful: Quickly create test scripts without writing code manually.
• How to Enable: Add the following in cypress.config.js:

experimentalStudio: true

• How to Use:
• While running tests, click on the Add Command to Test button.
• Interact with the app (e.g., click buttons or type text).
• Cypress generates the commands for your interactions automatically.

Improved Network Interception with cy.intercept()

• New Features: Enhanced network request interception, including support for WebSocket requests.
• Why It's Useful: Provides more control over network behaviors in tests.
• How to Use:
• Intercept WebSocket messages:

cy.intercept('ws://example.com/socket').as('websocket');

Test Retries for Flaky Tests

• What It Is: Automatically re-runs failed tests to handle intermittent issues.
• Why It's Useful: Helps reduce false negatives in test results.
• How to Enable: Add retries to your cypress.config.js:

retries: {
  runMode: 2, // Retries during `cypress run`
  openMode: 1, // Retries during `cypress open`
},

Native Support for File Downloads

• What It Is: Cypress now supports assertions for file downloads without requiring plugins.
• Why It's Useful: Simplifies testing file download functionality.
• How to Use: Intercept file downloads and assert responses:

cy.intercept('GET', '/files/report.pdf').as('download');
cy.get('button#download').click();
cy.wait('@download').its('response.statusCode').should('eq', 200);

Enhanced Debugging with cy.origin()

• What It Is: A new command for testing applications that involve multiple domains (cross-origin testing).
• Why It's Useful: Test apps that redirect to or interact with third-party services.
• How to Use:

cy.origin('https://another-domain.com', () => {
  cy.get('button#submit').click();
});

Native Event Listeners

• What It Is: Cypress now provides better event handling for native browser events like mouseover and focus.
• Why It's Useful: Accurately simulates user behavior on your app.
• How to Use:

cy.get('button').trigger('mouseover');
cy.get('input').focus();

Improved Screenshots and Videos

• Cypress has enhanced the quality and consistency of screenshots and videos captured during test runs.
• Why It's Useful: Easier debugging with clearer visuals.
• How to Enable: Configure video compression in cypress.config.js:

videoCompression: 32, // Adjust compression level (0 for no compression)

Parallelization with Improved CLI Commands

• Improved parallelization for running tests on multiple machines to save time.
• Why It's Useful: Faster test execution for large test suites.
• How to Use: Run tests with parallelization:

Real-Time Dashboard Updates

• What It Is: Cypress Dashboard now provides real-time updates for test runs.
• Why It's Useful: Monitor test results live during CI/CD execution.
• How to Use: Add the --record flag:

TypeScript Enhancements

• What It Is: Cypress now has improved TypeScript support for writing tests.
• Why It's Useful: Helps catch errors during development. How to Use: Add TypeScript setup:

Use TypeScript in your tests:

describe('My Test Suite', () => {
  it('should visit the homepage', () => {
    cy.visit('https://example.com');
  });
});

Support for Fetch Requests

• What It Is: Cypress now natively supports monitoring and stubbing fetch() API calls.
• Why It's Useful: Easily test modern apps using the fetch API.
• How to Use:

cy.intercept('GET', '/api/data').as('fetchData');
cy.visit('/dashboard');
cy.wait('@fetchData').its('response.statusCode').should('eq', 200);

Multi-Language Support for Error Messages

• What It Is: Cypress can now display error messages in multiple languages.
• Why It's Useful: Helps international teams debug issues more effectively.
How to Enable: Set the language in cypress.config.js:

locale: 'fr', // For French