Recipes

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
Handling errors	Handling thrown errors and unhandled promise rejections
Dynamic tests	Create tests dynamically from JSON data
Dynamic tests from CSV	Create tests dynamically from CSV file
Dynamic tests from API	Create tests dynamically by calling an external API
Fixtures	Loading single or multiple fixtures
Adding Custom Commands	Write your own custom commands using JavaScript with correct types for IntelliSense to work
Adding Custom Commands (TS)	Write your own custom commands using TypeScript
Adding Chai Assertions	Add new or custom chai assertions
Cypress module API	Run Cypress via its module API
Wrapping Cypress module API	Writing a wrapper around "cypress run" command line parsing
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
Out-of-the-box TypeScript	Write tests in TypeScript without setting up preprocessors
Per-test timeout	Fail a test if it runs longer than the specified time limit
Cypress events	Using Cypress.on and cy.on to listen to Cypress events like before:window:load
Video resolution	Increase the browser window size to record high quality videos and capture detailed screenshots

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	Test elements within shadow DOM
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
Lit Elements	Testing Lit Elements with Shadow DOM
File download	Download and validate CSV, Excel, text, Zip, and image files
Page reloads	Avoiding while loop when dealing with randomness
Pagination	Clicking the "Next" link until we reach the last page
Clipboard	Copy and paste text into the clipboard from the test

Logging In

Recipe	Description
Basic Auth	Log in using Basic Authentication
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 and watch Organizing Tests, Logging In, Controlling State

Preprocessors

Recipe	Description
Grep tests	Filter tests by name using Mocha-like grep syntax
Typescript with Browserify	Add typescript support with browserify
Typescript with Webpack	Add typescript support with webpack
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
Class decorators	Using JavaScript class decorator to expose objects created by the application so they are reachable from tests
Form Submit	Removing flake from the test where a page is reloaded after form submission
Using Day.js instead of Moment.js	Using day.js library instead of the deprecated Cypress.moment

Stubbing and spying

Recipe	Description
Stubbing Functions	Use cy.stub() to test function calls
Stubbing window.fetch	Use cy.stub() to control fetch requests
Stubbing usingcy.intercept	Control network using cy.intercept API
Stubbing window.open and console.log	Use cy.stub() and cy.spy() to test application behavior
Stubbing window.print	Use cy.stub() to test window.print call made from the application
Stubbing Google Analytics	Use cy.stub() and cy.intercept() 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
Stub navigator.cookieEnabled property	Use cy.stub() to mock the navigator.cookieEnabled property

Unit Testing

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

Note: looking for the React/Vue component testing recipes? Read the Introducing the Cypress Component Test Runner– new in 7.0.0 blog post.

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
Visiting 2nd domain	Visiting two different domains from two different tests and passing value from one test to another
Pass value between specs	Pass a value from spec to spec via the plugin file using cy.task
Stream test results	Streams each test result from the browser to the plugins to an external process via IPC
Offline	Test web application when the network is offline
Server timing	Report server timing results from Cypress test
Wait for API	Call the backend using cy.request until it responds
Making HTTP requests	How to use cy.request, window.fetch, and cy.task commands to make HTTP requests to the server with and without cookies

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
Triple Tested Static Site	How to test static sites three times before and after deployment to GitHub pages

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