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
Also see Authentication plugins and watch video "Organizing Tests, Logging In, Controlling State"
Demo recipes from the blog posts at www.cypress.io/blog
- 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 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.
## 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
.trigger()
to test drag-n-drop that uses mouse events.
- Use
.trigger()
to test drag-n-drop that uses drag events.
- 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 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
and cy.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()
and cy.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.
- Delete
window.fetch
during specific visit or every window load.
- Use
cy.spy()
to test window.open
behavior.
- Use
blacklistHosts
to block Google Analytics from receiving requests.
- Use
cy.stub()
to verify that window.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
- Extend
chai
with the chai-date-string
assertion plugin.
- Extend
chai
with the chai-colors
assertion plugin.
- Globally extend
chai
for all specs.
- Set up Intelligent Code completion for custom assertions.
- 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 the pluginsFile
.
- 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 in cypress.json
.
- Pass any variable that starts with
CYPRESS_
.
- Extract any other variable from
process.env
using cypress/plugins/index.js
callback.
- Run the same test against different viewport resolutions
- Run the same test against multiple subdomains
- Generate tests based on the fetched data
- loading a single fixture file or multiple fixtures in multiple ways
See Development.md