Skip to main content

Cypress

Cypress is a free, open-source and locally installed, all-in-one testing framework and assertion library, which includes mocking and stubbing. Cypress gives the same power and control as well-established browser testing tools like Selenium, with a lower setup and operational overhead, and is worth considering as an alternative. While Cypress has many compelling features, it is worth being aware that currently only Firefox and Chrome-family browsers are supported, so it is not possible to perform a huge range of cross-browser testing.

As compared with other tools, Cypress enables more of the development cycle to be managed with the testing suite (as opposed to the testing being the last stage of the process), and allows standard browser debugging tools to be used while tests run, which helps to diagnose issues faster.

Cypress also allows you to retrieve snapshots of the browser DOM at each step of a test run, further facilitating debugging. Cypress has excellent support for JavaScript frameworks, including React, Angular, Vue, and Elm. During a failure condition of your tests, diagnosing the problem is generally simpler in Cypress than in other tools. Tests run on the command line can return a video recording of each test run, and when tests are re-run using a GUI tool, Cypress allows the browser state to be reverted to chosen points in the test to understand the error conditions.

Tests can be written in JavaScript (or compiled down to JavaScript from other languages), and the test code is executed inside the browser session on your host, as opposed to inside a cluster of Selenium servers as would be the case in a more traditional deployment.

Unusually for a testing tool, Cypress also gives you full control over the network and browser state during a test run, allowing you to perform API requests (for example, to manually intervene in a login flow) without using the front-end. This level of access to the browser session also allows you to manipulate the localStorage settings in the browser, and access XHR objects directly (allowing you to perform assertions about their properties), as well as allowing you to perform stub and mock requests and responses.

Cypress comes with some great tooling built-in out of the box.

Cypress has excellent quality documentation and examples that make starting with the tool fairly painless (Why Cypress? and Example Recipes are great places to start).

Running Cypress

Cypress can run inside a Docker container, removing the need to install multiple toolchains and scripting executables locally. There are several Docker images available, along with several Docker examples.

When running Cypress in your CI pipeline, you can follow their continuous integration guide, which allows you to quickly integrate Cypress into your existing pipeline builds.

No tool is perfect, however, and Cypress does have some drawbacks:

  • Cypress has limited cross-browser validation capabilities, with only Firefox, Chrome, and Chrome-family browsers (such as Microsoft Edge) supported. Support for Internet Explorer and Safari, among other browsers, is in the long-term product roadmap. In the meantime, Cypress's limited cross-browser support can be mitigated to an extent using visual regression tools like Eyes-Cypress and Percy.

  • Cypress is not a general-purpose automation tool.

  • Cypress commands run inside of a browser.

  • Cypress does not support multiple browser tabs, with no support for this feature planned.

  • Cypress cannot be used to drive two browsers at the same time.

  • Each test is bound to a single origin, although work-arounds are available to mitigate this.

  • Other notable trade-offs when using Cypress, as well as details of any useful work-arounds, are listed on the Cypress website in more detail.