# Angular Cypress

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

- Skill: `oguzhan18/angular-cypress` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add oguzhan18/angular-cypress`
- Raw SKILL.md: https://api.skillmd.com/api/skills/oguzhan18/angular-cypress/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: oguzhan18 (https://skillmd.com/u/oguzhan18)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/oguzhan18/angular-cypress

---


# Angular + Cypress

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

**References:** [Cypress](https://www.cypress.io/) • [Cypress Angular](https://docs.cypress.io/guides/component-testing/angular/overview)

## Best Practices

- Install Cypress

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

- Write E2E test

```ts
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

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