Cypress is a free and open source end-to-end testing framework which is easy to set-up and easy to use. It executes the tests in the browser so more like Selenium tests but way easy to start with. It is built on top of Mocha and makes asynchronous testing fun.
This post is a simple tutorial for anyone who wants to explore the benefits by comparing your current test suite to Cypress.
To write a test, I need an app as well. I am just going to use React’s
create-react-app library which will give me a react app that runs on
Create React App
Prerequisite: You have
npm installed on your machine.
- Now install create-react-app by running
npm install -g create-react-app. This will install the create-react-app dependency globally.
- Create a directory and
npx create-react-app .This will create the project.
- Now if you run
npm start, It will start the app on port
Write tests for your app
In the project directory, run
npm install cypress --save-dev . This will add cypress dependency in your
Now that we have cypress installed, run command
cypress open that will launch the cypress GUI and will ask you to create a pre-defined skeleton that cypress uses. Accept and that will create a directory called cypress with other useful sub-directories. Some of them are used for the following purposes:
- Fixtures – we keep test data related to tests inside this
- Integration – For writing test specs.
- Custom commands inside Support folder.
Delete everything inside
integration folder and create your first test file (example.spec.js) and write your first test.
In my test, I am just going to navigate to
localhost:3000 and verify that react app is loaded. This is how it looks.
There are two ways to run tests:
cypress open. This will open the interactive console and you can run the tests by running the spec file.
npm run test:integration to run it from command line. It will launch cypress, run the test and close cypress.
Take a look at full source code on Github.