Recipes

Recipes show you how to test common scenarios in Cypress.

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

Fundamentals

RecipeDescription
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 JSON data
Dynamic tests from CSVCreate tests dynamically from CSV file
Dynamic tests from APICreate tests dynamically by calling an external API
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
Cypress eventsUsing Cypress.on and cy.on to listen to Cypress events like before:window:load
Video resolutionIncrease the browser window size to record high quality videos and capture detailed screenshots

Testing the DOM

RecipeDescription
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
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
Lit ElementsTesting Lit Elements with Shadow DOM
File downloadDownload and validate CSV, Excel, text, Zip, and image files
Page reloadsAvoiding while loop when dealing with randomness
PaginationClicking the "Next" link until we reach the last page
ClipboardCopy and paste text into the clipboard from the test

Logging In

RecipeDescription
Basic AuthLog in using Basic Authentication
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

Preprocessors

RecipeDescription
Grep testsFilter tests by name using Mocha-like grep syntax
Typescript with BrowserifyAdd typescript support with browserify
Typescript with WebpackAdd typescript support with webpack
Flow with BrowserifyAdd flow support with Browserify

Blogs

Demo recipes from the blog posts at Cypress blog.

RecipeDescription
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
Codepen.io 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
Class decoratorsUsing JavaScript class decorator to expose objects created by the application so they are reachable from tests
Form SubmitRemoving flake from the test where a page is reloaded after form submission
Using Day.js instead of Moment.jsUsing day.js library instead of the deprecated Cypress.moment

Stubbing and spying

RecipeDescription
Stubbing FunctionsUse cy.stub() to test function calls
Stubbing window.fetchUse cy.stub() to control fetch requests
Stubbing usingcy.interceptControl network using cy.intercept API
Stubbing window.open and console.logUse cy.stub() and cy.spy() to test application behavior
Stubbing window.printUse cy.stub() to test window.print call made from the application
Stubbing Google AnalyticsUse cy.stub() and cy.intercept() 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
Stub navigator.cookieEnabled propertyUse cy.stub() to mock the navigator.cookieEnabled property

Unit Testing

RecipeDescription
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

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

Other Cypress Recipes

RecipeDescription
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 Cypress.io 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
Triple Tested Static SiteHow to test static sites three times before and after deployment to GitHub pages

Community Recipes

RecipeDescription
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