Syncfusion AI Assistant

How can I help you?

Angular Cypress Testing

2 Feb 20263 minutes to read

This guide describes how to perform end-to-end (E2E) and component testing with Syncfusion® Angular components in Angular web applications using Cypress.

What is Cypress?

Cypress is a JavaScript-based E2E testing framework designed for modern web applications. It enables efficient, reliable front-end testing of user interfaces and behavior.

For more information, see the official Cypress documentation.

Integrating Cypress with Angular

To integrate Cypress with Angular (Angular 21 and later), follow the steps below.

  1. Create a new Angular application and add the Syncfusion® DataGrid component by following the getting started documentation.

  2. Once the application is created, run the following command to install Cypress.

ng add @cypress/schematic

Cypress installation

Cypress Testing Types

Cypress supports two types of testing.

For a comparison of Cypress testing types, see the documentation.

Cypress E2E Testing of Syncfusion® Angular Components

The steps below demonstrate E2E testing of the Angular DataGrid component.

  1. In ./cypress/e2e/spec.cy.ts, add the following test code:
describe('My First Test', () => {

  it('Visits the initial project page', () => {
    cy.visit('/')
  })

  it('should contain Grid rows', () => {
    cy.visit('/')
    cy.get('.e-grid').should('be.visible')
    cy.get('.e-grid').find('.e-row').should('have.length', 3)
  })
})
  1. Start Cypress E2E testing with this command:
ng e2e
  1. The Cypress dashboard will open. Start E2E testing and select the spec.cy.ts file to run the tests.

Cypress dashboard

  1. On completion, Cypress displays the result:

Cypress test result

For more information about Cypress E2E testing, refer to the official documentation.

Cypress Component Testing of Syncfusion® Angular Components

The following steps explain how to test the Angular DataGrid component in Cypress component testing.

  1. Create a new app.component.cy.ts file in the ./src/app folder.
  2. Add the following code:
import { AppComponent } from './app.component';

describe('AppComponent', () => {
    it('should contain syncfusion Grid sample', () => {
        cy.mount(AppComponent)
        cy.get('.e-grid').should('be.visible')
    })

    it('should contain Grid rows', () => {
        cy.mount(AppComponent)
        cy.get('.e-grid').find('.e-row').should('have.length', 3)
    })
})

3.To start the test cases, run the following command.

ng e2e

4.This will opens the dashboard. Switch to component testing type and select the app.component.cy.ts file to run the test cases.

Cypress dashboard

  1. When tests complete, results will be shown:

Cypress test result

  1. If a licensing banner appears in automation browsers, register the Syncfusion® license key in ./cypress/support/component.ts:
import { registerLicense } from '@syncfusion/ej2-base';

// Registering Syncfusion license key
registerLicense('License Key');

View the Syncfusion® Angular Cypress testing sample on GitHub