Recipes show you how to test common scenarios in Cypress.


Node ModulesImport your own Node modules
Environment variablesPassing environment variables to tests
Handling errorsHandling thrown errors and unhandled promise rejections
Dynamic testsCreate tests dynamically from data
FixturesLoading single or multiple fixtures
Adding Custom CommandsWrite 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 AssertionsAdd new or custom chai assertions
Cypress module APIRun Cypress via its module API
Wrapping Cypress module APIWriting a wrapper around "cypress run" command line parsing
Custom browsersControl which browsers the project can use, or even add a custom browser into the list
Use Chrome Remote InterfaceUse Chrome debugger protocol to trigger hover state and print media style
Out-of-the-box TypeScriptWrite tests in TypeScript without setting up preprocessors
Per-test timeoutFail a test if it runs longer than the specified time limit

Testing the DOM

Tab Handling and LinksLinks that open in a new tab
Hover and Hidden ElementsTest hidden elements requiring hover
Form InteractionsTest form elements like input type range
Drag and DropUse .trigger() to test drag and drop
Shadow DOMTest elements within shadow DOM
Website monitoringUtilize cypress to monitor your website
Waiting for static resourceShows how to wait for CSS, image, or any other static resource to load
CSV load and table testLoads CSV file and compares objects against cells in a table
Evaluate performance metricsUtilize Cypress to monitor a website
Root styleTrigger input color change that modifies CSS variable
Select widgetsWorking with <select> elements and Select2 widgets
File downloadDownload and validate files

Logging In

Single Sign OnLog in across multiple servers or providers
HTML Web FormsLog in with a basic HTML form
XHR Web FormsLog in using an XHR
CSRF TokensLog in with a required CSRF token
Json Web TokensLog in using JWT
Using application codeLog in by calling the application code

Also see Authentication plugins and watch Organizing Tests, Logging In, Controlling State


Grep testsFilter tests by name using Mocha-like grep syntax
Flow with BrowserifyAdd flow support with Browserify


Demo recipes from the blog posts at Cypress blog.

Application ActionsApplication actions are a replacement for Page Objects
Direct Control of AngularJSBypass the DOM and control AngularJS
E2E API TestingRun your API Tests with a GUI
E2E SnapshotsEnd-to-End Snapshot Testing
Element CoverageTrack elements covered by tests TestingTest a HyperApp Codepen demo
Testing Redux StoreTest an application that uses central Redux data store
Vue + Vuex + REST TestingTest an application that uses central Vuex data store
A11y TestingAccessibility testing with cypress-axe
Automate Angular TestingAutomate Angular Testing
React DevToolsLoads React DevTools Chrome extension automatically
Expect N assertionsHow to expect a certain number of assertions in a test
Browser notificationsHow to test application that uses Notification
Testing iframesAccessing elements in 3rd party iframe, spy and stub network calls from iframe

Stubbing and spying

Stubbing FunctionsUse cy.stub() to test function calls
Stubbing window.fetchUse cy.stub() to control fetch requests
Stub methods called on windowUse cy.stub() for methods called on window
Stubbing Google AnalyticsUse cy.stub() to test Google Analytics calls
Stub methods called on consoleUse cy.stub() to test and control methods called on console
Stub resource loadingUse MutationObserver to stub resource loading like img tags

Unit Testing

Application CodeImport and test your own application code
File Upload in ReactTest 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

Bootstrapping your AppSeed your application with test data
Seeding your Database in NodeSeed your database with test data
XHR assertionsSpy and assert on application's network calls

Other Cypress Recipes

Visual TestingOfficial Cypress guide to visual testing
Code CoverageOfficial Cypress guide to code coverage
Detect Page ReloadHow to detect from Cypress test when a page reloads using object property assertions
Run in DockerRun Cypress with a single Docker command
SSR E2EEnd-to-end Testing for Server-Side Rendered Pages
Using TS aliasesUsing TypeScript aliases in Cypress tests
Stub Navigator APIStub navigator API in end-to-end tests
Readable testsHow to write readable tests using custom commands and custom Chai assertions
Conditional ParallelizationRun Cypress in parallel mode on CircleCI depending on environment variables
.should() CallbackExamples of .should(cb) assertions
React component testingCreate a React component using JSX and inject it into live application from a Cypress test
Unit testing Vuex data storeComplete walkthrough for anyone trying to unit test a data store

Community Recipes

Visual Regression TestingAdding visual regression testing to Cypress
Code coverageCypress with Coverage reports
CucumberExample usage of Cypress with Cucumber
JestExample for the jest-runner-cypress