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
- 01Cypress setup commands
- 02End-to-end test examples
- 03Angular component test examples
- 04Component mounting with properties
Use cases
- 01Test navigation and page interactions
- 02Verify form input behavior
- 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-cypressAfter installing, type/angular-cypressin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/discussions/_INDEX.mdreferences/docs/_INDEX.mdreferences/issues/_INDEX.mdreferences/releases/_INDEX.mdDetails
From the project READMEAngular + 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