searching bugs

Getting started with cypress

What is Cypress?

Cypress is a JavaScript-based end-to-end testing framework that doesn’t use Selenium at all. It is built on top of Mocha, which is again a feature-rich JavaScript test framework running on and in the browser. It’s fast, easy, and reliable testing for anything that runs in a browser.

Why use Cypress?

1. Cypress runs as fast as your browser can render content.
2. You can watch tests run in real-time as you develop your applications. TDD approach
3. Readable error messages help you to debug quickly.
4. Cypress takes snapshots as your tests run. Simply hover over the command to see the snapshot.
5. View screenshots were taken automatically on failure or videos of your entire test suite that gets generated locally inside your cypress folder.
6. Cypress automatically reloads whenever you make changes to your tests.
7. Browser support: Chrome, Edge, Firefox, Electron, Brave.

Installing Cypress

Cypress needs Node.js 10 or 12 and above.

> cd /your/project/path
> npm init
> npm install cypress — save-dev OR> yarn add cypress — dev

Or download it at https://download.cypress.io/desktop.

Although Installing Cypress as an npm module is recommended, downloading directly can be a great way to try it out first.

Opening Cypress and running tests

Open the package.json and add the following script

“cypress:open”: “cypress open”

And run the script ( npm run cypress:open )

This should launch the Cypress Test Runner. Cypress has a unique test runner that allows us to see commands as they execute. Additionally, it also shows the real-time run of the application under test.

Also, new cypress folders will be added to your local directory. We are going to add our tests inside cypress > integration > examples. You can find a few predefined tests written inside the examples folder.
You can find those predefined tests even in the cypress launcher and by clicking on one of those tests, you can run them too.

We can even run those tests locally through the terminal.
The advantage of running the tests locally is that we get a report generated and also a video is created in case our tests fail.
Run the following command

cypress run — spec cypress/integration/examples/assertions.spec.js — browser=chrome

A video will get generated inside your cypress\screenshots\examples\assertions.spec.js folder.

Voila, you have successfully run our first cypress test ✨
In the next post, well dive deeper into how to write tests for our applications.