Skill Detail

Cypress Component Testing Framework

Scaffolds Cypress component tests for React, Vue, and Angular apps using the Cypress CT mount API. Configures webpack/vite dev servers and generates snapshot-based visual assertions.

Browser AutomationMCP
Browser Automation MCP Security Reviewed
Tool match: cypress โญ 49.6k GitHub stars โฌ‡ 6.9M/wk npm
INSTALL WITH ANY AGENT
npx skills add agentskillexchange/skills --skill cypress-component-testing-framework-2 Copy
Works best when you want a reusable capability, not another fragile one-off prompt.
At a glance
Tools required
Cypress, @cypress/react, @cypress/vue, @cypress/angular, @cypress/webpack-dev-server, @cypress/vite-dev-server
Install & setup
npm install cypress –save-dev
Author
Cypress.io
Last updated
Mar 24, 2026
Quick brief

The Cypress Component Testing Framework generates isolated component test suites using the Cypress Component Testing runner with framework-specific mount commands for React (cy.mount via @cypress/react), Vue (@cypress/vue), and Angular (@cypress/angular). It configures the component dev server using either webpack via @cypress/webpack-dev-server or Vite via @cypress/vite-dev-server, automatically detecting the project bundler from package.json. Test generation creates mount calls with proper prop injection, slot content for Vue components, and Angular module imports with dependency injection mocking. The skill sets up intercept patterns using cy.intercept() for API mocking, custom cy.commands for shared authentication flows, and fixture data management. Visual regression is handled through cypress-image-snapshot plugin with configurable diff thresholds and baseline management. Each test includes proper cleanup, state isolation via beforeEach hooks, and accessibility assertions using cypress-axe for WCAG 2.1 AA compliance checking. The generated cypress.config.ts includes optimal viewport settings, retry configuration, and parallel recording setup for Cypress Cloud dashboard integration.