Angular + Cypress

Version: Cypress 13.x (2025) Tags: Cypress, E2E, Testing, Component Tests

References: Cypress • Cypress Angular

Best Practices

• Install Cypress

npm install -D cypress @cypress/angular cypress-visual-regression
npx cypress open

• Write E2E test

describe('My First Test', () => {
  it('visits the kitchen sink', () => {
    cy.visit('/');
    cy.contains('type').click();
    cy.get('.action-email').type('[email protected]');
    cy.get('.action-email').should('have.value', '[email protected]');
  });
});

• Write component test

import { mount } from 'cypress/angular';
import { ButtonComponent } from './button.component';

describe('ButtonComponent', () => {
  it('renders button with text', () => {
    mount(ButtonComponent, { 
      componentProperties: { 
        label: 'Click me' 
      } 
    });
    cy.get('button').should('contain.text', 'Click me');
  });
});