cypress-io/cypress-example-recipes

Summary

cypress-io/cypress-example-recipes is a monorepo of small, self-contained Cypress example projects that demonstrate how to test common web application scenarios. Each example lives in its own folder with its own Cypress configuration, tests, and supporting assets, while sharing a single Cypress installation at the root.

What it is useful for

This repository is a reference catalog for engineers who already use Cypress and want copyable patterns for situations that are awkward to figure out from scratch. The recipes cover several recurring problem areas:

• Authentication flows, including Basic Auth, HTML and XHR web forms, CSRF tokens, JWT, and Single Sign-On.
• DOM interactions that often cause flaky tests, such as drag and drop, hidden elements requiring hover, <select> and Select2 widgets, Lit Elements with Shadow DOM, file downloads, clipboard, pagination, and responsive <picture> elements.
• Network and JS-level stubbing, including cy.intercept, cy.spy(), cy.stub(), stubbing window.fetch, window.open, window.print, Google Analytics, and console.log, plus a recipe that uses MutationObserver to stub image resource loading.
• Server communication patterns, such as seeding databases from Node, visiting a second domain, passing values between specs via cy.task, testing offline behavior, and waiting for APIs with cy.request.
• Tooling integrations like TypeScript with browserify or webpack, Flow with browserify, Mocha-like grep filtering, the cypress-axe accessibility recipe, Redux store testing, and Vue + Vuex + REST testing.

A few limitations are worth noting. The repository is not a single testable application; it is a collection of independent examples, so the folder layout looks different from a normal project. The README also points out that React and Vue component testing recipes live in a separate blog post rather than in this repo.

How engineers can use it

The README documents a straightforward workflow. From the repository root, install everything once with:

npm install

To run an individual example, change into its folder, start the local server, and launch Cypress. For the drag-and-drop recipe the documented commands are:

cd ./examples/testing-dom__drag-drop
npm start &
npm run cypress:open

The same pattern works for any other example folder, and npm run cypress:run runs the same recipe headlessly from the CLI, with optional flags such as --browser chrome or --record to send results to the Cypress Dashboard. Engineers typically browse the README's category tables, copy a relevant folder into their own project, and adapt the configuration to their stack.