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
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 Custom Commands | Write your own custom commands with correct types |
Adding Chai Assertions | Add new or custom chai assertions with correct types |
Cypress module API | Run Cypress via its module API |
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 |
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 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 |
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"
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 |
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 |
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 Google Analytics | Use cy.stub() 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 |
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 |
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 |
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 |
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 |
- 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 rootnode_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.
## install all dependencies from the root directory
npm install
cd ./examples/testing-dom__drag-drop
# start local server
npm start &
# and open Cypress GUI
npm run cypress:open
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
See Development.md