Build Robust Cypress End-to-End Tests

This skill creates comprehensive, maintainable end-to-end tests in Cypress. Test structure principles call for the Arrange-Act-Assert pattern, descriptive test names explaining expected behavior, describe blocks grouped with clear hierarchy, independent tests that can run in any order, and Page Object Models for complex applications. Selector best practices favor data-cy attributes over CSS classes or IDs, semantic selectors as a fallback, and reusable selector constants organized by feature area to avoid fragile, styling-dependent selectors.

It provides a full Page Object Model implementation (a chainable LoginPage class with methods for visiting, filling fields, submitting, and asserting errors), custom Cypress commands (a session-based loginAs command that avoids repeated login flows, an API-wait helper, and a chainable visibility assertion), and API testing patterns using cy.intercept() to mock and wait on network requests before asserting on UI state. Configuration guidance covers a production-ready cypress.config.js (base URL, viewport, command and request timeouts, screenshot-on-failure, retry counts for CI versus local runs).

Advanced patterns cover data-driven testing (iterating over a set of user roles to generate one permission-check test per role) and file-upload testing (constructing a binary fixture blob and asserting on upload progress and success states). Error handling and debugging guidance covers using .debug() to pause and inspect elements, cy.log() for execution tracing, custom error messages, and Cypress Dashboard integration for CI/CD. Performance and reliability tips include using cy.session() for authentication instead of repeated login flows, explicit waits instead of arbitrary cy.wait(milliseconds), fixtures for consistent test data, afterEach cleanup where needed, and cy.intercept() to mock slow or unreliable APIs during development.

Cypress.Commands.add('shouldBeVisible', { prevSubject: true }, (subject) => {
  cy.wrap(subject)
    .should('exist')
    .and('be.visible');
});

Use this skill when building or maintaining a Cypress end-to-end test suite - structuring tests with the AAA pattern and Page Object Model, choosing selectors, mocking network requests, writing data-driven or file-upload tests, or configuring Cypress for reliable CI runs.

It is not a fit for other end-to-end testing frameworks (Playwright, Selenium) - the patterns (custom commands, cy.session(), cy.intercept()) and configuration are Cypress-specific.

Inputs are the application flows you need covered and any existing selector conventions. The configuration output goes beyond just timeouts and viewport: it splits retry counts by run mode (retrying twice in CI's runMode, zero retries in interactive openMode so failures are visible immediately during development), sets an apiUrl environment variable for tests to reference, and registers a setupNodeEvents task handler so tests can trigger Node-side logging via cy.task('log', message).

QA and frontend engineers building Cypress test suites who need concrete, production-ready patterns - Page Object Models, custom commands, network interception, and CI-tuned configuration - rather than assembling test architecture from Cypress documentation piecemeal, plus reliability practices (session-based auth, explicit waits, retry logic) that keep suites fast and non-flaky.