Cypress is a UI automation test tool that supports Chrome, Edge, and Firefox browsers, has a GUI test runner to aid in debugging. It was released in September 2017, has 48.7k stars on GitHub, and is maintained by Cypress.
Cypress tests run inside the JavaScript engine of the browser, however that has some limitations – Cypress cannot run multiple browsers (and thus cannot natively execute tests in parallel without using Cypress Cloud) or visit different websites. Support for iframes requires a custom command and requires that Chrome web security be disabled.
https://docs.cypress.io/app/references/trade-offs
In addition to desktop E2E tests, Cypress also supports component testing for React, Angular, Vue, or Svelte, integration testing with REST API’s, but does not support mobile browser testing.
Like all good test frameworks, Cypress can capture screenshots (on demand and on failure), and can additionally record videos (on chromium based browsers) of test execution, which can be kept or discarded on failure.
The Cypress App is open source and can be executed in a CI environment, and Cypress Cloud offers an additional range of services and capabilities at a range of prices.
Getting Started
Cypress is installable using Node package manager such as npm, Yarn or pnpm and once running, the Cypress App can be used to quickly create a sample E2E test and execute it.
The sample test project can then be opened in the IDE of your choice and you can start to create page objects and build out your tests.
See the following guide for step by step instructions:
https://docs.cypress.io/app/get-started/install-cypress
Developing a framework
Cypress includes Mocha and Chai amongst other libraries (https://docs.cypress.io/app/references/bundled-libraries) for test structure and assertions, and supports page objects for maintainability and reusability, as well as an alternative pattern – Application Actions: (https://www.cypress.io/blog/stop-using-page-objects-and-start-using-app-actions).
The tests can then be executed locally on the supported browsers (Chrome, Edge, Firefox, Electron, etc. – https://docs.cypress.io/app/references/launching-browsers), and additionally on cloud providers:
https://saucelabs.com/resources/topic-hub/cypress
https://www.browserstack.com/automate/cypress
https://www.lambdatest.com/support/docs/getting-started-with-cypress-testing/
Cypress Typescript sample
Clone the repository from https://github.com/ObjectiveTester/AllThingsTesting.com-examples.git and start a terminal in the ‘CypressTS’ directory and first run:npm install
and then either:npm run cypress to open the tests within the Cypress App and run interactivelynpm run test to execute the tests in headed mode
npm run junit to execute the tests and produce junit output for a CI platform
To enable video recording, edit cypress.config.ts from your IDE.
Modifying one of the tests or page objects to fail a test will trigger a screenshot capture.
Summary
Cypress is a popular test framework that enables testers or developers to very quickly develop, maintain and extend E2E, integration and component tests. It is well supported by the developers and in the community, and has a UI to aid in debugging. The tests can be easily executed in a CI platform, and despite some minor limitations and premium/paid-for functionality would be a good choice for development teams building modern web applications.