hhy5277 / cypress-example-recipes

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

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

Logging in recipes

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

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

Stubbing and spying

Recipe	Description
Stubbing Functions	Use cy.spy() and cy.stub() to test function calls
Stubbing window.fetch	Use cy.stub() to control fetch requests
Stubbing 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 app

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

Overview

• This repo is structured similar to how other "Monorepos" work.
• Each example project has it's own Cypress configuration, tests, backend and frontend assets.
• Each of these example projects share a single "root" Cypress that is installed in the root node_modules folder.
• 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
npm install

Opening Cypress GUI

cd ./examples/testing-dom__drag-drop
# start local server
npm start &
# and open Cypress GUI
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

Development

See Development.md