Various recipes for testing common scenarios with Cypress
Switch branches/tags
1.1.5 1.2.0 add-codepen-recipe-40 add-collect-node-env-variables cy-3.1.0-for-190 cy-task-recipe cypress-4 file-upload-recipe-43 greenkeeper/chalk-2.3.1 greenkeeper/chalk-2.3.2 greenkeeper/chalk-2.4.0 greenkeeper/chalk-pin-2.3.0 greenkeeper/enzyme-3.3.0 greenkeeper/enzyme-pin-3.2.0 greenkeeper/eslint-4.19.1 greenkeeper/jquery-3.3.1 greenkeeper/jquery-pin-3.3.0 greenkeeper/lodash-4.17.5 greenkeeper/lodash-pin-4.17.4 greenkeeper/nodemon-1.17.3 greenkeeper/nodemon-1.17.5 greenkeeper/pretty-ms-3.2.0 greenkeeper/pretty-ms-pin-3.1.0 greenkeeper/react-dom-16.1.0 greenkeeper/react-dom-16.1.1 greenkeeper/react-dom-16.2.0 greenkeeper/react-dom-pin-16.0.0 greenkeeper/@types/mocha-5.2.1 greenkeeper/webpack-4.6.0 greenkeeper/webpack-4.8.2 greenkeeper/webpack-4.8.3 greenkeeper/webpack-4.9.0 greenkeeper/webpack-4.9.1 greenkeeper/webpack-4.9.2 greenkeeper/webpack-4.10.0 greenkeeper/webpack-4.10.1 greenkeeper/webpack-4.10.2 image-with-ff issue-20 issue-30 issue-35 issue-150 issue-165 kill-background-travis-jobs-156 lint-ts master new-window-stub-recipe parallel-circle-jobs-56 parcel-preprocessor polyfill-fetch-in-test-only preprocessor property-assertion-example renovate/chai-4.x renovate/cypress-browserify-preprocessor-1.x renovate/eslint-plugin-mocha-5.x renovate/execa-0.x renovate/fs-extra-7.x renovate/json-server-0.x renovate/nodemon-1.x renovate/npm-run-all-4.x renovate/stop-only-1.x renovate/stop-only-2.x renovate/ts-loader-4.x renovate/tslint-5.x renovate/typescript-3.x renovate/webpack-4.x snapshot-testing-recipe-66 split-long-spec split-travis-ci-jobs-71 spy-retry stop-server-better-156 testing-redux-store ts-loader-4 update-ts-webpack-example vue-example-39
Nothing to show
Clone or download
bahmutov Testing redux store (#211)
* copy app

* working app

* a lot of tests

* snapshot testing

* update readme

* test delayed actions

* use cypress-pipe

* use root level cypress-plugin-snapshots

* test redux example on circle and travis

* update readme

* add circle job to workflow

* use cypress base 10 image

* use node 10 LTS on Travis

* prev patch of react-scripts with har-validator
Latest commit bd40fd3 Nov 13, 2018

README.md

Recipes CircleCI Travis CI renovate-app badge

This repo contains various recipes for testing common scenarios using Cypress.

Recipe Category Description
Node Modules Fundamentals Import your own node modules
Single Sign On Logging In Log in across multiple servers or providers
HTML Web Forms Logging In Log in with a basic HTML form
XHR Web Forms Logging In Log in using an XHR
CSRF Tokens Logging In Log in with a required CSRF token
Tab Handling and Links Testing the DOM Links that open in a new tab
Hover and Hidden Elements Testing the DOM Test hidden elements requiring hover
Form Interactions Testing the DOM Test form elements like input type range
Drag and Drop Testing the DOM Use .trigger() to test drag and drop
Typescript with Browserify Preprocessors Add typescript support with browserify
Typescript with Webpack Preprocessors Add typescript support with webpack
Direct Control of AngularJS Blogs Bypass the DOM and control AngularJS
E2E API Testing Blogs Run your API Tests with a GUI
E2E Snapshots Blogs End-to-End Snapshot Testing
Codepen.io Testing Blogs Test a HyperApp Codepen demo
Testing Redux Store Blogs Test an application that uses Redux data store
Vue + Vuex + REST Testing Blogs Test an application that uses central data store
Stubbing Functions Stubbing, Spying Use cy.stub() to test function calls
Stubbing window.fetch Stubbing, Spying Use cy.stub() to control fetch requests
Stubbing methods called on window Stubbing, Spying Use cy.stub() for methods called on window
Stubbing Google Analytics Stubbing, Spying Use cy.stub() to test Google Analytics calls
Application Code Unit Testing Import and test your own application code
React with Enzyme Unit Testing Test your React components in isolation
File Upload in React Unit Testing Test file upload in React app
Adding Chai Assertions Extending Cypress Add new or custom chai assertions
Bootstrapping your App Server Communication Seed your application with test data
Seeding your Database in Node Server Communication Seed your database with test data
Environment variables Fundamentals Passing environment variables to tests

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

## this will call 'npm start' on
## each example project's package.json
## which boots all of the webservers
npm start

## if you want to make modifications
## to the node server code and have
## the servers automatically restart
npm run dev

Opening Cypress GUI

## this opens the cypress test runner
## in the GUI mode. because this project
## is a monorepo - we've opened the test
## runner in 'global' mode.
##
## so to run a specific project you'll
## need to manually add the folder to Cypress.
npm run cypress:open

## alternatively, to open a specific
## example without running in global mode
cd ./examples/drag-n-drop
npm run cypress:open

Running from the CLI

## runs all example projects and
## exits with the total number of
## failures across all projects
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

### run single example by name
npm run cypress:run -- --example blogs__codepen-demo

## switch the browser to chrome instead
## of the default headless Electron browser
npm run cypress:run:chrome

## alternatively, to run a specific
## example without running all projects
cd ./examples/drag-n-drop
npm run cypress:run

Recipes

Node Modules

  • Import ES2015 modules.
  • Require CommonJS modules.
  • Organize reusable utility functions.
  • Import 3rd party node_modules.

Single Sign On

  • Login when authentication is done on a 3rd party server.
  • Parse tokens using cy.request().
  • Manually set tokens on local storage.
  • Map external hosts and point to local servers.

HTML Web Forms

  • Test a standard username/password HTML form.
  • Test errors submitting invalid data.
  • Test unauthenticated redirects.
  • Authenticate users with cookies.
  • Create a custom cy.login() test command.
  • Bypass needing to use your actual UI.
  • Increase speed of testing with cy.request().

XHR Web Forms

  • Test an AJAX backed username/password form.
  • Test errors submitting invalid data.
  • Stub JSON based XHR requests.
  • Stub application functions.
  • Create a custom cy.login() test command.
  • Bypass needing to use your actual UI.
  • Increase speed of testing with cy.request().

CSRF Tokens

  • Use cy.request() to get around CSRF protections.
  • Parse CSRF tokens out of HTML.
  • Parse CSRF tokens out of response headers.
  • Expose CSRF via a route.
  • Disable CSRF when not in production.

Tab Handling and Links

  • Test anchor links opening in new tabs: <a target="_blank">.
  • Test anchor links that link to external domains: <a href="...">.
  • Prevent content from opening in a new tab.
  • Request external content that would open in a new tab using cy.request().
  • Speed up tests by reducing loading times.

Hover and Hidden Elements

  • Interact with elements that are hidden by CSS.
  • Use .invoke() and .trigger() to simulate hovering.
  • Trigger mouseover, mouseout, mouseenter, mouseleave events. Get around the lack of a .hover() command.

Form Interactions

Drag and Drop

  • Use .trigger() to test drag-n-drop that uses mouse events.
  • Use .trigger() to test drag-n-drop that uses drag events.

Typescript with Browserify

Typescript with Webpack

Direct Control of AngularJS

  • Blog article written here
  • Programmatically control AngularJS
  • Bypass the DOM, update scopes directly
  • Create custom command for controlling services

E2E API Testing

E2E Snapshots

  • Blog post End-to-End Snapshot Testing
  • Adding .snapshot() command by requiring 3rd party module
  • Capturing and saving snapshots of primitive values
  • Testing central data Vuex store using snapshots
  • Making assertions against a DOM element with cy.get('...').snapshot()

Codepen Testing

  • Blog post
  • Load Codepen and get around iframe security restrictions.
  • Use cy.request() to load a document into test iframe.
  • Test HyperApp.js application through the DOM and through actions.

Testing Redux Store

  • control application via DOM and check that Redux store has been properly updated
  • drive application by dispatching Redux actions
  • use Redux actions directly from tests
  • load initial Redux state from a fixture file

Vue + Vuex + REST Testing

  • Blog post
  • Test a Vue.js web application that uses central data store
  • Mock REST calls to the server
  • Dispatch actions to the Vuex store
  • Test text file upload

Stubbing Functions

  • Use cy.stub() to stub dependencies in a unit test.
  • Handle promises returned by stubbed functions.
  • Handle callbacks in stubbed functions.

Stubbing window.fetch

  • Use cy.spy() to verify the behavior of a function.
  • Use cy.stub() to verify and control the behavior of a function.
  • Use cy.clock() and cy.tick() to control time.
  • Stub window.fetch to control server responses.
  • Replace window.fetch with a polyfill that uses XHR and is loaded only for tests

Stubbing methods called on window

  • Use cy.spy() to test window.open behavior.

Stubbing Google Analytics

  • Use blacklistHosts to block Google Analytics from receiving requests.
  • Use cy.stub() to verify that window.ga(...) was called with the correct arguments

Application Code

  • Unit test your own application code libraries.
  • Import modules using ES2015.
  • Test simple math functions.
  • Test the canonical fizzbuzz test.
  • Automatically retry assertion until a given property inside an object:
    • is added or deleted
    • has expected value

React with Enzyme

  • Unit test a React JSX Component using Enzyme.
  • Import enzyme from node_modules.
  • Extend chai assertions with chai-enzyme.

File Upload in React

Adding Chai Assertions

Bootstrapping your App

  • Use cy.visit() onBeforeLoad callback.
  • Start your application with test data.
  • Stub an XHR to seed with test data.
  • Wait on an XHR to finish.

Seeding your Database in Node

  • Use cy.task() to communicate with node via the pluginsFile.
  • Seed your database with test data.
  • Wrap your pluginsFile so you can require files that use ES modules (import/export).

Environment Variables

  • Pass values via env object in cypress.json.
  • Pass any variable that starts with CYPRESS_.
  • Extract any other variable from process.env using cypress/plugins/index.js callback.