• Stars
    star
    3,113
  • Rank 14,444 (Top 0.3 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Various recipes for testing common scenarios with Cypress

Recipes

CircleCI

renovate-app badge Cypress Dashboard

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
OAuth Popup Authorization Stubbing OAuth Popup Authorization with Cypress

Overview

  • This repo is structured similar to how other "Monorepos" work.
  • Each example project has its 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 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

Cypress Dashboard

Development

See Development.md

More Repositories

1

cypress

Fast, easy and reliable testing for anything that runs in a browser.
JavaScript
46,739
star
2

cypress-realworld-app

A payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.
TypeScript
5,426
star
3

github-action

GitHub Action for running Cypress end-to-end & component tests
JavaScript
1,346
star
4

cypress-example-kitchensink

This is an example app used to showcase Cypress.io testing.
HTML
1,130
star
5

cypress-docker-images

Docker images with Cypress dependencies and browsers
Dockerfile
906
star
6

cypress-documentation

Cypress Documentation including Guides, API, Plugins, Examples, & FAQ.
TypeScript
827
star
7

eslint-plugin-cypress

An ESLint plugin for projects that use Cypress
JavaScript
701
star
8

cypress-react-unit-test

Unit test React components using Cypress
678
star
9

testing-workshop-cypress

End-to-end testing workshop with Cypress
JavaScript
479
star
10

code-coverage

Saves the code coverage collected during Cypress tests
JavaScript
431
star
11

cypress-vue-unit-test

A little helper to unit test Vue components in the Cypress.io E2E test runner
294
star
12

cypress-example-todomvc

The official TodoMVC tests written in Cypress.
JavaScript
237
star
13

cypress-chrome-recorder

Export Cypress Tests from Google Chrome DevTools' Recorder
TypeScript
231
star
14

cypress-and-jest-typescript-example

Example using Jest and Cypress with TypeScript in a single repo
TypeScript
231
star
15

cypress-skip-test

Simple commands to skip a test based on platform, browser or a url
JavaScript
180
star
16

circleci-orb

Install, cache and run Cypress.io tests on CircleCI with minimal configuration.
159
star
17

cypress-recorder-extension

JavaScript
157
star
18

cypress-xpath

Adds XPath command to Cypress test runner
JavaScript
147
star
19

cypress-example-docker-compose

Example running Cypress tests against Apache server via docker-compose
JavaScript
142
star
20

cypress-grep

Filter tests using substring
JavaScript
138
star
21

cypress-fiddle

Quickly generates Cypress tests from HTML and JS code
JavaScript
136
star
22

cypress-example-docker-circle

Cypress + Docker + CircleCI = ❤️
JavaScript
124
star
23

cypress-example-api-testing

[ARCHIVED] Cypress E2E runner can also test Rest and other APIs
JavaScript
120
star
24

snapshot

Adds value / object / DOM element snapshot testing support to Cypress test runner
JavaScript
116
star
25

cypress-example-conduit-app

[ARCHIVED] Conduit example blogging app.
JavaScript
108
star
26

cypress-webpack-preprocessor

Cypress preprocessor for bundling JavaScript via webpack
93
star
27

netlify-plugin-cypress

Runs Cypress end-to-end tests after Netlify builds the site but before it is deployed
JavaScript
89
star
28

add-cypress-custom-command-in-typescript

Testing how new Cypress commands are added in TypeScript
TypeScript
88
star
29

chromium-downloads

A website that helps users to find and download archived Chromium versions.
JavaScript
87
star
30

cypress-realworld-testing

Next.js project for learn.cypress.io
MDX
77
star
31

cypress-realworld-testing-course-app

TypeScript
71
star
32

schema-tools

Validate, sanitize and document JSON schemas
TypeScript
71
star
33

instrument-cra

Little module for CRA applications to instrument code without ejecting react-scripts
JavaScript
64
star
34

cypress-component-testing-apps

TypeScript
63
star
35

cypress-test-tiny

Tiny Cypress E2E test case
JavaScript
52
star
36

cypress-example-todomvc-redux

Example TodoMVC application with full code coverage
JavaScript
50
star
37

cypress-test-nested-projects

[ARCHIVED] Tests Cypress running tests in subfolders
JavaScript
48
star
38

xvfb

Easily start and stop an X Virtual Frame Buffer from your node apps
JavaScript
40
star
39

cypress-tutorial-build-todo

Step by step code for the Cypress tutorial in which we build and test a todo app
JavaScript
38
star
40

cypress-tutorial-build-todo-starter

Starter project for the Cypress tutorial in which we build and test a todo app
CSS
38
star
41

cypress-cli

CLI for Cypress.io Desktop App
CoffeeScript
38
star
42

cypress-component-testing-examples

Cypress component examples
JavaScript
33
star
43

birdboard

Example Twitter client web app shown in Cypress in a Nutshell webcast.
JavaScript
33
star
44

cypress-example-docker-circle-workflows

Cypress + Docker + CircleCI Workflows = ❤️
JavaScript
29
star
45

cypress-example-circleci-orb

Demo of using the Cypress CircleCI Orb
JavaScript
28
star
46

cypress-test-example-repos

[ARCHIVED] Tests new version of Cypress against multiple projects
JavaScript
27
star
47

cypress-workshop-ci

A workshop that teaches you how to run Cypress on major CI providers
CSS
27
star
48

cypress-realworld-testing-blog

A Next.js Blog for the Real World Testing with Cypress Curriculum
JavaScript
26
star
49

angular-pizza-creator

Example Angular Pizza ordering app
TypeScript
26
star
50

cypress-browserify-preprocessor

Cypress preprocessor for bundling JavaScript via browserify
JavaScript
23
star
51

cypress-example-docker-compose-included

Cypress example with docker-compose and cypress/included image
JavaScript
20
star
52

cypress-electron-plugin

Cypress plugin for testing Electron applications
JavaScript
19
star
53

cypress-heroes

Cypress Heroes Demo App
TypeScript
18
star
54

cypress-component-examples

Cypress configured with various frameworks and dev servers
JavaScript
17
star
55

commit-info

Collects Git commit info using git
JavaScript
17
star
56

react-tooltip

A tooltip component for React apps
JavaScript
17
star
57

cypress-example-reporters

[ARCHIVED] Example showing multiple test reports merged into a single Mochawesome report
JavaScript
17
star
58

cra-template-cypress

The base Cypress template for Create React App
JavaScript
17
star
59

cypress-mock-ssr

Node.js Mock SSR Middleware and Cypress Commands
JavaScript
16
star
60

cra-template-cypress-typescript

The base Cypress + TypeScript template for Create React App
TypeScript
15
star
61

cypress-realworld-testing-todomvc

A TodoMVC Application for the Testing Your First Application Course in the Real World Testing with Cypress Curriculum
JavaScript
12
star
62

cypress-design

Find here all the components to build UI with the Cypress Brand
TypeScript
12
star
63

cypress-example-docker-codeship

Cypress + Docker + Codeship Pro = ❤️
Dockerfile
12
star
64

cypress-example-electron

Electron.js application tested with Cypress - WIP
JavaScript
12
star
65

gh-action-and-gh-integration

Example project that uses both Cypress GH Action and Cypress GH Integration
JavaScript
12
star
66

todomvc

Vanilla JS TodoMVC with Cypress Tests
JavaScript
11
star
67

cypress-gh-action-vue-example

Testing an app scaffolded with Vue CLI using Cypress GH Action
Vue
10
star
68

netlify-plugin-cypress-example

An example site built and tested on Netlify using netlify-plugin-cypress
CSS
9
star
69

cypress-watch-preprocessor

Simple preprocessor that only watches files
JavaScript
8
star
70

cypress-workshop-ci-example

A simple example app to be used during cypress-workshop-ci session
HTML
7
star
71

cypress-example-netlify-store

🛍 A Tested E-Commerce Site with Stripe payment
Vue
7
star
72

feature-maybe

Functional feature toggles on top of any object
JavaScript
6
star
73

cypress-icons

Cypress logos, icons, favicons, tray, iconset
JavaScript
6
star
74

cypress-parcel-preprocessor

Cypress preprocessor for bundling JavaScript via Parcel
JavaScript
6
star
75

cypress-test-module-api

[ARCHIVED] Example running specs using Cypress via its module API
JavaScript
6
star
76

full-network-proxy

Demo repo for Cypress with full network stubbing support
JavaScript
5
star
77

circleci-orb-parallel-example

Using Cypress CircleCI Orb to quickly run tests in parallel
JavaScript
5
star
78

v8-snapshot

Tool to create a snapshot for Electron applications.
TypeScript
5
star
79

cypress-heroes-app

Demo app for Cypress
TypeScript
5
star
80

cypress-repeat-retry

Stress-testing Cypress test retries
JavaScript
5
star
81

get-windows-proxy

Node.js module that finds a user's system proxy settings depending on their platform.
JavaScript
5
star
82

component-testing-quickstart-apps

Apps from the Cypress Component Testing quickstart guides
HTML
5
star
83

bumpercar

[ARCHIVED] Easily update settings and trigger builds across projects and CI providers
CoffeeScript
4
star
84

generator-node-cypress

Yeoman generator for PUBLIC Node packages from Cypress.io team
JavaScript
4
star
85

error-message

User-friendly error text with additional information
JavaScript
4
star
86

cypress-load-test

JavaScript
3
star
87

mksnapshot

A rewrite of electron/mksnapshot to support multiple electron versions.
TypeScript
3
star
88

cypress-migrator

Apps and libraries related to the Cypress Migrator tool
TypeScript
3
star
89

cypress-adapter-ruby

Cypress Ruby Driver
Ruby
3
star
90

debugging-proxy

A simple, pass-through HTTP proxy that works with HTTP/HTTPS. For debugging applications to make sure they still work behind a proxy.
JavaScript
3
star
91

testing-workshop-cph

End-to-end testing workshop with Cypress at CopenhagenJS
JavaScript
3
star
92

jsnation-example

TodoMVC example tests for JSNation conference
JavaScript
3
star
93

eslint-plugin-dev

Common ESLint rules and configuration shared by Cypress packages
JavaScript
3
star
94

cypress-chrome-recorder-extension

JavaScript
2
star
95

cypress-test-ci-environments

[ARCHIVED] Confirms that missing Xvfb or dependencies can be detected by Cypress
JavaScript
2
star
96

3rd-party-error

Example showing 3rd party JavaScript error
JavaScript
2
star
97

env-or-json-file

Loads JSON object from environment string or local file
JavaScript
2
star
98

cypress-ct-definition-template

Template for authoring Component Framework Definitions
TypeScript
2
star
99

cypress-onboarding-demo

JavaScript
1
star
100

knex-timings

Prints each Knex operation and its timings
JavaScript
1
star