Cypress E2E Test Generator

Cypress is a JavaScript E2E testing framework that runs directly inside the browser, giving it unique access to browser APIs, DOM, and network layer. It features real-time reloading, time-travel debugging, and automatic waiting. Playwright runs outside the browser and supports multiple browsers (Chrome, Firefox, Safari) cross-platform. Cypress is generally easier to start with; Playwright is more powerful for multi-browser testing.

cy.intercept() lets you intercept and stub HTTP requests made by your app. You can match by method and URL, return mock responses, and assert on request/response data. This is essential for testing API-dependent flows without hitting real backends. Example: cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')

Cypress automatically waits for commands to complete and has built-in retry logic for assertions. You don't need explicit waits for DOM elements — cy.get() retries until the element appears or times out. Use cy.wait('@alias') to wait for a specific network request to complete. Avoid arbitrary cy.wait(1000) delays.

The recommended approach is to add 'data-cy' (or 'data-testid') attributes to elements in your HTML specifically for testing. Example: <button data-cy='submit-btn'>. Then use cy.get('[data-cy=submit-btn]'). This decouples tests from styling and structure changes. Avoid selecting by CSS classes or text content as they change frequently.

By default, Cypress looks for E2E tests in 'cypress/e2e/' with the pattern '**/*.cy.{js,jsx,ts,tsx}'. For component tests it uses 'cypress/component/'. You can customize these paths in cypress.config.js. The generated .cy.js file from this tool should be placed in your 'cypress/e2e/' directory.

Use 'npx cypress run' for headless execution in CI. Add '--browser chrome' to specify the browser, '--spec cypress/e2e/mytest.cy.js' to run a specific file, and '--record' with the CYPRESS_RECORD_KEY environment variable to record results to Cypress Cloud. The Cypress GitHub Action (cypress-io/github-action) handles caching and parallelization automatically.