Introduction to Cypress

What is Cypress:

• Cypress is a front end automation tool to automate modern web application such as react, angular etc.
• It is open-source test runner which makes set up, writing, running and recording much simpler, faster and reliable.
• The reason behind being fast is that it doesn't evoke any drivers like chrome drive, or firefox driver to pass the information, it directly sends out the commands to the browser to perform certain tasks.

Why Cypress:

1. Cypress provides a time travel feature which means it takes snapshots as the tests run. you can hover commands in the Command Log to verify each statement.
2. It provides easy debugging functionality, Debug directly from familiar tools like Developer Tools. Readable errors and stack traces make debugging fast. It also takes screenshots and videos of your entire test suite to check the behaviour of test case.
3. Automatic waits : Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. Unlike selenium no need to add implicit and explicit waits in cypress.
4. Network Traffic Control: Easily services can be mocked without involving the server. You can stub network traffic the way you need.

Installing Cypress and writing your first test case:

Download Node js from https://nodejs.org/en/download/ as per your operating system, as the cypress is built on the node js.

Create a folder and import the folder in any editor atom, sublime or visual studio code.

• Open the terminal and enter npm install cypress --save-dev
• Followed by command ./node_modules/.bin/cypress open

These are the examples given by Cypress for each js spec file, and if we can see it that means our installation is done.

These are the folder structures we will see in our project once it is installed. We will discuss each of them in detail. Let's now jump on writing our first test case:

For that, we need to see the integration folder and add a test js file also cypress recommends us to use the Mocha testing framework.

/// <reference types="cypress" />

//suite name
describe('This is test functionality',()=>{

//test case
it('let us visit google page',()=>{
cy.visit('https://www.google.com/')	
cy.log('visit to page is successful')

}) 
})

Now save this code file under integration folder and open test runner and click on the created file.

Let me explain the snippet in detail:

1) reference type= cypress is to just get the auto suggestion of code written for the cypress.

2) describe is something like a suite name, it describes the feature / spec name as a whole.

3) it is for the test case. It describes the test case name.

cy.visit is to visit the URL.

cy.log for the logging purpose and you can see the logs in test runner as below:

and a visit to google is successful.

And this is how we have written our first basic test case, just as simple as that :)