angular-cypress

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

oguzhan18/angular-ecosystem-skills171 installsMITSynced Aug 22

Works with

Claude CodeCursorCodex CLIGitHub CopilotGemini CLI
---
name: angular-cypress
description: ALWAYS use when testing Angular applications with Cypress, E2E testing, or component testing in Angular.
license: MIT
---

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

More Testing skills

← All Testing skills

Check your AI visibility

One URL in, a 0–100 score and the exact fixes out.

RUN THE CHECK

Browse all the tools

15 tools across six categories
13 of them never send your data anywhere

Free · No signup · No trial clock

SEE THE DIRECTORY