cypress-example-recipes
cypress-example-recipes copied to clipboard
Published
20 hours ago •
cypress-io
cypress-io
Various recipes for testing common scenarios with Cypress
Recipes
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 |
| 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 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 |
| 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 |
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 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 setupNodeEvents function in the Cypress configuration using cy.task |
| Stream test results | Streams each test result from the browser to the setupNodeEvents function 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 |
| Parallel or not | Run Cypress in parallel mode on CircleCI depending on environment variables |
| Use TypeScript With Cypress | Step by step tutorial on how to set up TypeScript support in Cypress using WebPack bundler |
| Cypress should callback | Examples of .should(cb) assertions |
| Cypress jump | Create a React component using JSX and inject it into live application from a Cypress test |
| Unit testing Vuex data store using Cypress.io Test Runner | 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 |
| Mailosaur | Utilizes cy.request() or cy.task() with mailosaur to test emails sent with sendmail |
| Chat App | Test a Socket.io Chat App using Cypress |
| Email Testing | Full Testing of HTML Emails using SendGrid and Ethereal Accounts |
Overview
- This repo is structured similar to how other "Monorepos" work.
- Each
example projecthas its own Cypress configuration, tests, backend and frontend assets. - Each of these
example projectsshare a single "root" Cypress that is installed in the rootnode_modulesfolder. - This structure looks different from normal projects, but its the easiest way to manage multiple projects without installing Cypress independently for each one.
Installation
## install all dependencies from the root directory
npm install
Opening Cypress App
cd ./examples/testing-dom__drag-drop
# start local server
npm start &
# open Cypress App
npm run cypress:open
Running from the CLI
Same as running Cypress GUI but with cypress run command (and any CLI arguments)
cd ./examples/testing-dom__drag-drop
# start local server
npm start &
# run Cypress tests headlessly
npm run cypress:run
### runs all example projects in specific browser
### similar to cypress run --browser <name>
npm run cypress:run -- --browser chrome
### sends test results, videos, screenshots
### to Cypress dashboard
npm run cypress:run -- --record
You can find the recording at the Cypress Dashboard linked below
Development
See Development.md
Metadata
3.4k
Stars
1.3k
Forks
Watchers
Owner
cypress-io
Metadata
Various recipes for testing common scenarios with Cypress