angular-cypress

Original：🇺🇸 English

Translated

ALWAYS use when testing Angular applications with Cypress, E2E testing, or component testing in Angular.

11installs

Sourceoguzhan18/angular-ecosystem-skills

Added on2026-04-03

NPX Install

npx skill4agent add oguzhan18/angular-ecosystem-skills angular-cypress

SKILL.md Content

View Translation Comparison →

Angular + Cypress

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

References: Cypress • Cypress Angular

Best Practices

Install Cypress

bash

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('fake@email.com');
    cy.get('.action-email').should('have.value', 'fake@email.com');
  });
});

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');
  });
});