This repo contains various recipes for testing common scenarios using Cypress.
Recipe | Category | Description |
---|---|---|
Node Modules | Fundamentals | Import your own node modules |
Single Sign On | Logging In | Log in across multiple servers or providers |
HTML Web Forms | Logging In | Log in with a basic HTML form |
XHR Web Forms | Logging In | Log in using an XHR |
CSRF Tokens | Logging In | Log in with a required CSRF token |
Tab Handling and Links | Testing the DOM | Links that open in a new tab |
Hover and Hidden Elements | Testing the DOM | Test hidden elements requiring hover |
Form Interactions | Testing the DOM | Test form elements like input type range |
Drag and Drop | Testing the DOM | Use .trigger() to test drag and drop |
Typescript with Browserify | Preprocessors | Add typescript support with browserify |
Typescript with Webpack | Preprocessors | Add typescript support with webpack |
Application Actions | Blogs | Application actions are a replacement for Page Objects |
Direct Control of AngularJS | Blogs | Bypass the DOM and control AngularJS |
E2E API Testing | Blogs | Run your API Tests with a GUI |
E2E Snapshots | Blogs | End-to-End Snapshot Testing |
Element Coverage | Blogs | Track elements covered by tests |
Codepen.io Testing | Blogs | Test a HyperApp Codepen demo |
Testing Redux Store | Blogs | Test an application that uses Redux data store |
Vue + Vuex + REST Testing | Blogs | Test an application that uses central data store |
Stubbing Functions | Stubbing, Spying | Use cy.stub() to test function calls |
Stubbing window.fetch |
Stubbing, Spying | Use cy.stub() to control fetch requests |
Stubbing methods called on window |
Stubbing, Spying | Use cy.stub() for methods called on window |
Stubbing Google Analytics | Stubbing, Spying | Use cy.stub() to test Google Analytics calls |
Application Code | Unit Testing | Import and test your own application code |
React with Enzyme | Unit Testing | Test your React components in isolation |
File Upload in React | Unit Testing | Test file upload in React app |
Adding Chai Assertions | Extending Cypress | Add new or custom chai assertions |
Bootstrapping your App | Server Communication | Seed your application with test data |
Seeding your Database in Node | Server Communication | Seed your database with test data |
Environment variables | Fundamentals | Passing environment variables to tests |
- This repo is structured similar to how other "Monorepos" work.
- Each
example project
has it's 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
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
- Import ES2015 modules.
- Require CommonJS modules.
- Organize reusable utility functions.
- Import 3rd party
node_modules
.
- 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.
- Test a standard
username/password
HTML form. - Test errors submitting invalid data.
- Test unauthenticated redirects.
- Authenticate users with cookies.
- Create a custom
cy.login()
test command. - Bypass needing to use your actual UI.
- Increase speed of testing with
cy.request()
.
- Test an AJAX backed
username/password
form. - Test errors submitting invalid data.
- Stub JSON based XHR requests.
- Stub application functions.
- Create a custom
cy.login()
test command. - Bypass needing to use your actual UI.
- Increase speed of testing with
cy.request()
.
- 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.
- 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 using
cy.request()
. - Speed up tests by reducing loading times.
- Interact with elements that are hidden by CSS.
- Use
.invoke()
and.trigger()
to simulate hovering. - Trigger
mouseover
,mouseout
,mouseenter
,mouseleave
events. Get around the lack of a.hover()
command.
- Use
.invoke()
and.trigger()
to test a range input (slider).
- Use
.trigger()
to test drag-n-drop that uses mouse events. - Use
.trigger()
to test drag-n-drop that uses drag events.
- Use
@cypress/browserify-preprocessor
to write Cypress tests in Typescript
- Use
@cypress/webpack-preprocessor
to write Cypress tests in Typescript - Lint TypeScript spec code against Cypress type definitions
- Invoke methods on the application's model object
- Avoid code duplication and need to create page object hierarchy
- Run e2e very quickly by skipping UI unless testing that specific UI feature
- Blog article written here
- Programmatically control AngularJS
- Bypass the DOM, update scopes directly
- Create custom command for controlling services
- Blog article written here
- Use
cy.request()
to perform API Testing - Use the Cypress GUI to help debug requests
- Blog post End-to-End Snapshot Testing
- Adding
.snapshot()
command by requiring 3rd party module - Capturing and saving snapshots of primitive values
- Testing central data Vuex store using snapshots
- Making assertions against a DOM element with
cy.get('...').snapshot()
- Blog post
- Load Codepen and get around iframe security restrictions.
- Use
cy.request()
to load a document into test iframe. - Test HyperApp.js application through the DOM and through actions.
- Blog post Element coverage
- Overwrite several built-in Cypress commands like
cy.type
andcy.click
- Draw elements after the tests finish
- control application via DOM and check that Redux store has been properly updated
- drive application by dispatching Redux actions
- use Redux actions directly from tests
- load initial Redux state from a fixture file
- Blog post
- Test a Vue.js web application that uses central data store
- Mock REST calls to the server
- Dispatch actions to the Vuex store
- Test text file upload
- Use
cy.stub()
to stub dependencies in a unit test. - Handle promises returned by stubbed functions.
- Handle callbacks in stubbed functions.
- 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()
andcy.tick()
to control time. - Stub
window.fetch
to control server responses. - Replace
window.fetch
with a polyfill that uses XHR and is loaded only for tests
- Use
cy.spy()
to testwindow.open
behavior.
- Use
blacklistHosts
to block Google Analytics from receiving requests. - Use
cy.stub()
to verify thatwindow.ga(...)
was called with the correct arguments
- Unit test your own application code libraries.
- Import modules using ES2015.
- Test simple math functions.
- Test the canonical fizzbuzz test.
- Automatically retry assertion until a given property inside an object:
- is added or deleted
- has expected value
- Unit test a React JSX Component using Enzyme.
- Import
enzyme
fromnode_modules
. - Extend chai assertions with
chai-enzyme
.
- Passing synthetic test file to upload via an
.trigger('change')
event - Stub remote server using
cy.route()
- Alternatively stub
axios.post
method usingcy.stub()
- Extend
chai
with thechai-date-string
assertion plugin. - Extend
chai
with thechai-colors
assertion plugin. - Globally extend
chai
for all specs.
- 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.
- Use
cy.task()
to communicate with node via thepluginsFile
. - Seed your database with test data.
- Wrap your
pluginsFile
so you can require files that use ES modules (import
/export
).
- Pass values via
env
object incypress.json
. - Pass any variable that starts with
CYPRESS_
. - Extract any other variable from
process.env
usingcypress/plugins/index.js
callback.