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
| 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 Chai Assertions | Add new or custom chai assertions |
| Cypress module API | Run Cypress via its module API |
| 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 |
| 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 |
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 | Accessability testing with cypress-axe |
| Recipe | Description |
|---|---|
| Stubbing Functions | Use cy.spy() and cy.stub() to test function calls |
Stubbing window.fetch |
Use cy.stub() to control fetch requests |
Stubbing methods called on window |
Use cy.stub() for methods called on window |
| Stubbing Google Analytics | Use cy.stub() to test Google Analytics calls |
| 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 |
| 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 projecthas it's own Cypress configuration, tests, backend and frontend assets. - Each of these
example projectsshare a single "root" Cypress that is installed in the rootnode_modulesfolder. - 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
npm installcd ./examples/testing-dom__drag-drop
# start local server
npm start &
# and open Cypress GUI
npm run cypress:openSame 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 -- --recordSee Development.md