mcpField
A
angular-cypress

angular-cypress

github.com/oguzhan18Testing & quality7172 installsUpdated 30w ago
Repository

About angular-cypress

A reference skill for testing Angular applications and components with Cypress. It gives developers setup guidance and examples for end-to-end and component tests.

Key features

  1. 01Cypress setup commands
  2. 02End-to-end test examples
  3. 03Angular component test examples
  4. 04Component mounting with properties

Use cases

  1. 01Test navigation and page interactions
  2. 02Verify form input behavior
  3. 03Check a component's rendered output

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-cypress

After installing, type/angular-cypressin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

Details

From the project README

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

Comments

Markdown supported