Various recipes for testing common scenarios with Cypress
JavaScript

README.md

Recipes Circle CI Travis CI

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

Contents

Overview

  • this is still a WIP, and we'll be adding recipes daily
  • all of the tests are found in cypress/integration
  • we boot a separate node server per recipe
  • each example has all of its own backend and frontend assets

Installation

## install all dependencies
npm install

## boot the various node servers
## to use in the tests
npm start

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

Recipes

ES2015 / CommonJS Modules

This recipe shows you how to:

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

Unit Test - Application Code

This recipe shows you how to:

  • Unit test your own application code libs
  • Import modules using ES2015
  • Write simple math functions
  • Implement the canonical fizzbuzz test

Unit Test - React w/Enzyme

This recipe shows you how to:

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

Unit Test - Stubbing Dependencies

This recipe shows you how to:

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

Logging In - HTML Web Form

This recipe shows you how to:

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

Logging In - XHR Web Form

This recipe shows you how to:

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

Logging In - CSRF Tokens

This recipe shows you how to:

  • 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

Logging In - Single Sign On

This recipe shows you how to:

  • 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

Extending Chai with Assertion Plugins

This recipe shows you how to:

  • Extend chai with the chai-date-string assertion plugin
  • Extend chai with the chai-colors assertion plugin
  • Globally extend chai for all specs

Tab Handling and Anchor Links

This recipe shows you how to:

  • Test <a target="_blank"> elements
  • Test <a href="..."> elements which link to external domains
  • Prevent content from opening in a new tab
  • Request external content that would open in a new tab
  • Improve testing performance by reducing loading times

Dealing with Hover and Hidden Elements

This recipe shows you how to:

  • Interact with elements which are hidden by CSS
  • Trigger mouseover, mouseout, mouseenter, mouseleave events
  • Get around the lack of a cy.hover command

Bootstrapping your App with Test Data

This recipe shows you how to:

  • 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

Controlling Behavior with Spies, Stubs, and Clocks

This recipe shows you how to:

  • 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 to control time
  • Stub window.fetch to control server responses