Cypress Component & E2E Testing

Write component and end-to-end tests with Cypress. Generates test suites with custom commands, fixture data, intercept stubs, component mounting, and visual regression testing for React, Vue, and Angular.

This skill helps you build test suites with Cypress for both component-level and end-to-end testing. It generates custom commands for repeated actions, creates fixture factories, implements network stubbing with cy.intercept, mounts components in isolation, and sets up visual regression snapshots.

When to use

Use when testing React/Vue/Angular components in isolation, writing E2E flows for critical paths, stubbing API responses for deterministic tests, or migrating from other testing frameworks to Cypress.

Examples

Component test suite

Test React components in isolation with Cypress

Write Cypress component tests for a DataTable component — test sorting, filtering, pagination, empty states, and loading states

API stubbing patterns

Create deterministic tests with network stubs

Set up Cypress intercept patterns to stub all API calls with fixture data, including error states and slow responses