Recipes

<!-- [](https://ci.appveyor.com/project/cypress-io/cypress-example-recipes/branch/master) -->

[![renovate-app badge][renovate-badge]][renovate-app] [![Cypress Dashboard][dashboard badge]][dashboard url]

This repo contains various recipes for testing common scenarios using Cypress: Fundamentals, Testing the DOM, Logging in, Preprocessors, Blogs, Stubbing and spying, Unit Testing, Server Communication, Other Cypress Recipes, Community 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 with correct types 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 | You need to use any of available custom commands 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 quickly 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 Page source | Get the source of the page under test Responsive image | Uses cy.intercept to confirm the image loaded by the <picture> element

Logging in recipes

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 (JWT) | Log in using JWT Using application code | Log in by calling the application code

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

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 Flow with Browserify | Add flow support with browserify

Blogs

Demo recipes from the blog posts at www.cypress.io/blog

Recipe | Description --- | --- Application Actions | Application actions are a replacement for Page Objects 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 Redux data store Vue + Vuex + REST Testing | Test an application that uses central data store A11y Testing | Accessibility testing with cypress-axe Automate Angular Testing | Run Angular tests in a build environment 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

Network stubbing and spying

Recipe | Description --- | --- Stubbing using cy.intercept | Control network using cy.intercept API

JS-level stubbing and spying

Recipe | Description --- | --- Stubbing Functions | Use cy.spy() and cy.stub() to test function calls Stubbing window.fetch | Work around the window.fetch limitation 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() or cy.intercept() to test Google Analytics calls Spying and stubbing methods on console object | Use cy.spy() and cy.stub() on console.log 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

Note: looking for the React/Vue component testing