lury / cypress-example-recipes

Various recipes for testing common scenarios with Cypress

Recipes

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

Contents

• Overview
• Installation
• Recipes
  • ES2015 / CommonJS Modules
  • Unit Test - Application Code
  • Unit Test - React w/Enzyme
  • Unit Test - Stubbing Dependencies
  • Logging In - HTML Web Form
  • Logging In - XHR Web Form
  • Logging In - CSRF Tokens
  • Logging In - Single Sign On
  • Extending Chai with Assertion Plugins
  • Tab Handling and Anchor Links
  • Dealing with Hover and Hidden Elements
  • Bootstrapping your App with Test Data
  • Controlling Behavior with Spies, Stubs, and Clocks
  • Form Interactions
  • Drag 'n Drop

Overview

• This is still a WIP, and we'll be adding recipes often.
• All of the tests are found in the cypress/integration folder.
• 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

## opens the cypress desktop app
## to run tests in the interactive GUI
npm run cypress:open

Running from the CLI

## runs all cypress tests from the CLI
npm run cypress:run

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

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 libraries
• Import modules using ES2015
• Test simple math functions
• Test the canonical fizzbuzz test

---

Unit Test - React w/Enzyme

This recipe shows you how to:

• Unit test a React JSX Component using Enzyme
• 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 test command
• Bypass needing to use your actual UI
• Increase speed of testing 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 test command
• Bypass needing to use your actual UI
• Increase speed of testing 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 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
• Speed up tests by reducing loading times

---

Dealing with Hover and Hidden Elements

This recipe shows you how to:

• Interact with elements which are hidden by CSS
• Use .invoke and .trigger to simulate hovering
• 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 and cy.tick to control time
• Stub window.fetch to control server responses

---

Form Interactions

This recipe shows you how to:

• Use .invoke and .trigger to test a range input (slider)

---

Drag 'n Drop

This recipe shows you how to:

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

---