Cypress - A testing tool for front-end developers.
Tags: productivity, testing, cypress, javascript
Published: 2019-11-17 01:34:05

---
title: Cypress - A testing tool for front-end developers.
published: true
description: 
tags: productivity, testing, cypress, JavaScript
---
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/h0xnk952mf18agv7dxia.png)
**Cypress** is a next generation front end testing tool built for the modern web. 

It's a JavaScript tool only. Typically developers or QA engineers building web applications using modern JavaScript frameworks use Cypress.

Cypress enables you to write all types of tests: End-to-end tests, Integration tests and Unit tests. Cypress can test anything that runs in a browser. Cypress consists of a free, open source, locally installed Test Runner and a Dashboard Service for recording your tests.

**Note -** Cypress is not an automation tool it's a testing tool.

## Features

- **Time Travel:** Cypress takes snapshots as your tests run. Hover over commands in the Command log to see exactly what happened at each step.
- **Debuggability:**  we can debug directly in Developer Tools. It gives readable errors and stack traces that make debugging lightning fast.
- **Automatic Waiting:** Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
- **Spies, Stubs, and Clocks:** It Verifies and control the behaviour of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.
- **Network Traffic Control:** Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
- **Consistent Results:** Cypress architecture doesn’t use Selenium or WebDriver. That's why it is fast, consistent and reliable tests that are flake-free.
- **Screenshots and Videos:** View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
- **Fast:** It is fast because test runs inside the browser like app.

## Let's learn it by doing
In this Demo will automate the JB hifi (https://www.jbhifi.com.au/) website and do the testing of checkout basic flow. 

Complete code you can checkout on my [github](https://github.com/karkranikhil/cypress-demo)

#### 1 Prerequisite for demo

- Install Nodejs (version above 8) and NPM

- **Editor** - Any code editor of your choice. i am using Visual studio code.

#### 2 Project setup
a) Create a folder with name Cypress

b) Open the folder with VScode

c) Open terminal inside the VScode and run the below command to create package.json.

This will initialize the folder to ready for NPM commands
```javascript
npm init -y
```
d) Let's install Cypress from NPM using below command.
```javascript
npm install cypress
```
e) Run package command locally using below command.
```javascript
npx cypress open
```
Above command will opened the UI and it will create a cypress folder with lots of folder inside it and cypress.json in our folder.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/phuagd9k60f9areug0jc.png)

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tkzxwe5jp9cku8h2vhwa.png)

#### 3 Writing first test case
Create a test file named **firstTest.js** inside cypress/integration folder and paste the below code

```javascript
describe('My First Test', function() {
  it('select product on JB hifi and checkout', function() {
    // set up view port
    cy.viewport(1440,1200)

    // Visit target URL
    cy.visit('https://www.jbhifi.com.au/')

    // hover over the top menu
    cy.get('#top-menu > :nth-child(2) > :nth-child(1)').trigger('mouseover')

    // select Apple MacBooks from top navbar
    cy.get('a[data-nav-title="Apple MacBooks "]').click()

    // filter by computer type
    cy.get('#collection-search-facet-0 > :nth-child(1) > .ais-root > .ais-body > .ais-refinement-list--list > :nth-child(1) > div > .ais-facet--label > input').click()

    // filter by computer price 
    cy.get(':nth-child(7) > .ais-price-ranges--link > div > .ais-facet--label1').click()

    // add to cart the mackbook
    cy.get(':nth-child(1) > .ais-hit > .ais-hit--cart > .ais-hit--cart-button > svg').click()

    // check the count of item added
    cy.get('#cart-count').contains('1')

    // go to my cart
    cy.get('#cart-count').click()

    // wait for 1000ms to open modal
    cy.wait(1000)

    // check cart modal is open
    cy.get('#mini-cart').and('be.visible') 

    // click on view cart
    cy.scrollTo('top')

    // click on view cart button
    cy.get('#collect-checkout > span').click() 

    // Finally check you have proceed to checkout button
    cy.get('.checkout-btn > .btn').contains('Proceed to Checkout')
  })

```

#### 4) let's run the test cases

```javascript
npx cypress open
```
It will open the UI Window from with select the test you want to run. In our case **firstTest.js**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xwdzrhi50o1y4dupsw39.png)

Once you click the **firstTest.js** it will trigger the testing. You will see the output like below.

#### 5) Success output
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/izxyqpuge80p91qsl9z9.png)

#### 6) Error Output 
If Any error comes it show the error in very descriptive way.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ws73gzjdoxjrvpdefbl6.png)

#### 6) Github code and complete video

You can click below video to see cypress in action

<a target="_blank" href="http://www.youtube.com/watch?feature=player_embedded&v=jYPKias1zGU
"><img src="http://img.youtube.com/vi/jYPKias1zGU/0.jpg" alt="IMAGE ALT TEXT HERE" width="440" height="280" border="10" /></a>

Complete code you can checkout on my [github](https://github.com/karkranikhil/cypress-demo)

#### 7) References -
https://docs.cypress.io/api/commands/scrollto.html#Syntax

https://docs.cypress.io/guides/references/configuration.html#Command-Line