🎉 Introducing the Cypress Real World App—a new example app to learn, experiment, tinker, and practice application testing with Cypress.

Learn More

Recipes

Improve this doc

Recipes show you how to test common scenarios in Cypress.

https://github.com/cypress-io/cypress-example-recipes

Fundamentals

Recipe Description
Node Modules Import your own Node modules
Environment variables Passing environment variables to tests
Dynamic tests Create tests dynamically from data
Fixtures Loading single or multiple fixtures
Adding Chai Assertions Add new or custom chai assertions
Cypress module API Run Cypress via its module API
Custom browsers Control which browsers the project can use, or even add a custom browser into the list
Use Chrome Remote Interface Use Chrome debugger protocol to trigger hover state and print media style

Testing the DOM

Recipe Description
Tab Handling and Links Links that open in a new tab
Hover and Hidden Elements Test hidden elements requiring hover
Form Interactions Test form elements like input type range
Drag and Drop Use .trigger() to test drag and drop
Shadow DOM You need to use any of available custom commands
Website monitoring Utilize cypress to monitor your website
Waiting for static resource Shows how to wait for CSS, image, or any other static resource to load
CSV load and table test Loads CSV file and compares objects against cells in a table
Evaluate performance metrics Utilize Cypress to monitor a website
Root style Trigger input color change that modifies CSS variable
Select widgets Working with <select> elements and Select2 widgets

Logging In

Recipe Description
Single Sign On Log in across multiple servers or providers
HTML Web Forms Log in with a basic HTML form
XHR Web Forms Log in using an XHR
CSRF Tokens Log in with a required CSRF token
Json Web Tokens Log in using JWT
Using application code Log in by calling the application code

Also see Authentication plugins

Preprocessors

Recipe Description
Grep tests Filter tests by name using Mocha-like grep syntax
Flow with Browserify Add flow support with Browserify

Blogs

Demo recipes from the blog posts at Cypress blog.

Recipe Description
Application Actions Application actions are a replacement for Page Objects
Direct Control of AngularJS Bypass the DOM and control AngularJS
E2E API Testing Run your API Tests with a GUI
E2E Snapshots End-to-End Snapshot Testing
Element Coverage Track elements covered by tests
Codepen.io Testing Test a HyperApp Codepen demo
Testing Redux Store Test an application that uses central Redux data store
Vue + Vuex + REST Testing Test an application that uses central Vuex data store
A11y Testing Accessibility testing with cypress-axe
Automate Angular Testing Automate Angular Testing
React DevTools Loads React DevTools Chrome extension automatically
Expect N assertions How to expect a certain number of assertions in a test
Browser notifications How to test application that uses Notification
Testing iframes Accessing elements in 3rd party iframe, spy and stub network calls from iframe

Stubbing and spying

Recipe Description
Stubbing Functions Use cy.stub() to test function calls
Stubbing window.fetch Use cy.stub() to control fetch requests
Stub methods called on window Use cy.stub() for methods called on window
Stubbing Google Analytics Use cy.stub() to test Google Analytics calls
Stub methods called on console Use cy.stub() to test and control methods called on console
Stub resource loading Use MutationObserver to stub resource loading like img tags

Unit Testing

Recipe Description
Application Code Import and test your own application code
React Test your react components in isolation
File Upload in React Test file upload in React application

Server Communication

Recipe Description
Bootstrapping your App Seed your application with test data
Seeding your Database in Node Seed your database with test data
XHR assertions Spy and assert on application’s network calls

Other Cypress Recipes

Recipe Description
Visual Testing Official Cypress guide to visual testing
Code Coverage Official Cypress guide to code coverage
Detect Page Reload How to detect from Cypress test when a page reloads using object property assertions
Run in Docker Run Cypress with a single Docker command
SSR E2E End-to-end Testing for Server-Side Rendered Pages
Using TS aliases Using TypeScript aliases in Cypress tests
Stub Navigator API Stub navigator API in end-to-end tests
Readable Cypress.io tests How to write readable tests using custom commands and custom Chai assertions
Conditional Parallelization Run Cypress in parallel mode on CircleCI depending on environment variables
.should() Callback Examples of .should(cb) assertions
React component testing Create a React component using JSX and inject it into live application from a Cypress test
Unit testing Vuex data store Complete walkthrough for anyone trying to unit test a data store

Community Recipes

Recipe Description
Visual Regression Testing Adding visual regression testing to Cypress
Code coverage Cypress with Coverage reports
Cucumber Example usage of Cypress with Cucumber
Jest Example for the jest-runner-cypress