See our founder and CTO, Brian Mann, speak at All Things Open on October 14th in Raleigh, NC

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

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

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 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

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 Accessability testing with cypress-axe

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

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

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