Cypress.io - A JavaScript End To End Testing Tool

Cypress.io - A JavaScript End-To-End Testing Tool. Cypress.io is a JavaScript end-to-end testing tool which uses JavaScript as a scripting language to write the test scripts and to execute the test cases.

Cypress.io is a JavaScript end-to-end testing tool which uses JavaScript as a scripting language to write the test scripts and to execute the test cases.
  • It is based on JavaScript scripting language which works with Node.js.
  • It is used to automate rich user interface applications, such as Angular.js or React.js etc
  • It is faster in execution when compared with other automation tools, like Selenium, CodedUI, QTP etc.
  • It is open source tool which requires a few setups to work with; such as - the installation of Node.js, Cypress etc.
Features of Cypress.io over other Automation Frameworks -

Automatic waiting

The main advantage of using cypress.io over other automation frameworks is that it doesn't require any wait time code explicitly. By default, cypress has inbuilt support for Wait so we do not need to declare implicit or explicit wait times like the ones we use in Selenium with Thread.Sleep() or WebDriverWait class. Once the browser launches and the elements are loaded onto the webpage, the wait time functionality is executed and waits for the element with its control property. Once the control is identified and a certain action is performed on it, it will wait for a few seconds and the next control will be identified with its control property and the action is performed.

Unlike the Selenium automation tool, if the webpage contains multiple elements and we haven't specified any implicit wait time, then the first control it will try to identify with is its control property when the page is loading, the element is not available on the webpage. Due to this reason, the exception is thrown with "Element Not Found Exception" or Element Not Visible Exception.

Time travel

The next advantage of using cypress is, with cypress we don't require any explicit code for taking screenshots, Cypress.io has by default inbuilt support for screenshots which takes for both passed as well as failed test steps. Once the execution of a test case started it takes a screenshot for each step which can be seen on the left side of the test runner window. If we hover and click over each step it shows what kind of action it is performed on each step with a snapshot.

Faster in Execution

Unlike other automation tools which I worked on like Selenium, Codedui etc, cypress.io is faster in execution with inbuilt wait
for each control.

Reporting

Cypress.io provides reporting feature with each and every step with a screenshot.

Real-time reloads

After writing the cypress code for the first time and save it or whenever we open the existing cypress .js file by making some modifications and saving it again, the execution starts in the test runner, the user doesn't need to click on the re-run button again to execute the test case, whereas in other automation tools if the file is opened for modification and saved, the user needs to open the test runner manually and re-run the test case in order to perform the execution.

Debuggability

With the help of cypress.io, we can perform debugging of the code with the help of Chrome DevTools.

Screenshots and videos

cypress.io takes a screenshot of test case failed steps and takes videos of each step when the test case is executed headlessly.

Prerequisites to work with Cypress.io
  1. Node.js latest version. 
  2. Microsoft Visual studio code or Notepad++ or Notepad(Optional)
  3. Java Run time Environment.
Node.js can be installed from this link https://nodejs.org/en/download/, navigate to this link and click on Windows Installer it will download a Node.js setup file like "node-v8.11.4-x64" ddouble-click on this file. It will navigate to this below the window.

 

Click on Next Button.

 

Check the accept the terms check box and click on Next. 


Provide the path where ever you like to save node.js by clicking on Change if required and click on Next.

 

Click on Next.


Click on Install Button.

 

It will start installing the Node.js as shown in Status Progress bar.

 

Click on Finish Button in order to check whether Node.js is properly installed in your machine.

You can use the below commands

Node -v
Node --version

Similarly if we want to check whether npm in installed or not we can check it using the below commands,

npm -v
npm --version 

 

Steps to work with Cypress.io

Create a project by adding a new folder and give the name for the project like example Cypress.ioProject and go to https://www.cypress.io/features/ and download as shown in the image below, once the download is completed, unzip the .rar file and keep the cypress folder in the above project Cypress.ioProject folder.

 

We can Add few .js file in the above project folder (Cypress.ioProject) based on our requirement.

Check whether node is installed or not by using,
  • Node -v
  • Node --version
For checking npm version,
  • npm -v
  • npm --version
Inorder to install Cypress through commands we can do it like below.

Open the command prompt and navigate to the solution path and install cypress by using the following commands like
  • npm i cypress --save -dev
    or
  • npm install cypress.
     or
  • npm install cypress
    or
  • npm install cypress --save - dev
    or
  • npm install --save-dev cypress
    or
  • npm install --save-dev cypress@3.1.0
It will install cypress to the solution folder or you can install directly from Cypress offical site as shown in above image.

Go to the project's folder path and enter npm init to install package.json to the solution folder.

After installing all the files which are mentioned above, the folder structure will look like below.

 
In order to open the Cypress.io Test runner navigate to the above folder path like below,

D:\>Cypress.ioProject\node_modules\.bin> cypress open

The above command will open the Cypress test runner.

From the visual studio code navigate to the Cypress.ioProject folder and select the project and click on ok.

It will open all the files of Cypress.ioProject like below.

cypress.io
In the above image we can see the list of .js files which are displayed within the examples folder.

If we want to Add a new .js file we can directly add it in Cypress.ioProject--> cypress--> fixtures--> integration --> examples.

Create a .js files like below,
  • CypressExample1.js
  • CypressExample2.js
  • CypressExample3.js
Now edit the CypressExample1.js file, add the below code and save the file.
  1. describe('C# Corner sign up'function() {  
  2.     it('Automate C# Corner Page'function() {  
  3.         cy.visit('http://www.google.co.in')  
  4.         cy.wait(2000)  
  5.         cy.get('input[name="q"]').type('C# Corner{Enter}')  
  6.         //cy.get('input[name="btnK"]').click()  
  7.         cy.get('a').contains('C# Corner - A Social Community of Developers and Programmers').click()  
  8.         cy.wait(2000)  
  9.     })  
  10. })  
Here wait is optional in the above code, if we did not provide and wait for a control then also it will wait for a control which is an inbuilt feature of Cypress.io.

Similarly edit the CypressExample2.js and add the below code and save the file.
  1. describe('First Example', () => {  
  2.     it('Automate Google', () => {  
  3.         cy.visit("https://www.google.co.in");  
  4.         cy.get('input[name="q"]').type('Wikipedia')  
  5.         cy.get('input[name="btnK"]').click()  
  6.         cy.get('a').contains("Wikipedia, the free encyclopedia").click();  
  7.         cy.wait(3000)  
  8.         cy.get('input[id="searchInput"]').type("StackOverflow{Enter}")  
  9.         cy.wait(6000)  
  10.         cy.get('a[class="mw-wiki-logo"]').click()  
  11.         cy.get('input[id="searchInput"]').type("Google{Enter}")  
  12.         //cy.get('a[class="mw-redirect"]').contains("StackOverflow").click()  
  13.         //cy.get('form > fieldset > div').get('input[id="searchInput"]').type("Stackoverflow{Enter}")  
  14.     })  
  15. })  
Similarly edit the third file, add the below code, and save the file.
  1. describe('click on signup'function() {  
  2.     it('click'function() {  
  3.         cy.visit('https://www.google.co.in')  
  4.         cy.wait(2000)  
  5.         cy.get('input[name="q"]').type('Csharp Corner')  
  6.         cy.get('input[name="btnK"]').click()  
  7.         cy.get('a').contains('C# Corner - A Social Community of Developers and Programmers').click()  
  8.         cy.wait(2000)  
  9.         cy.get('input[id="ctl00_HeaderHomeNewDesign_Login1_HyperLinkRegister"]').click()  
  10.     })  
  11. })  
Whenever we save the .js file in the Visual Studio code, it automatically starts the execution in the Cypress.io Test Runner which is one of the features available with the Cypress.io; the user doesn't need to manually click on the Run Test button on the Test Runner.

Similarly if we want to run the above project without installing Cypress with commands we can download the Cypress zip file which is available in the Cypress official website which is shown in the above image.

After downloading Cypress, navigate to it and click on Cypress.exe. It will open the Test Runner like below.

 
 
Click on Select manually and navigate to the Cypress.ioProject, with this all the .js files will be displayed in the test runner including CypressExample1.js, CypressExample2.js, CypressExample3.js. If we click on the CypressExample1.js file it starts the execution in the Chrome browser.

Conclusion

It is one of the Javscript end to end testing tools which is similar to TestCafe, protractor etc, which requires few setup files and is fast in execution compared to that of selenium, CodedUI, QTP etc. It doesn't require any wait time declaration manually, as well as screenshot logic steps declaration.

It is helpful in testing applications which is developed using Angular, React etc.

Thanks and I hope this article helps you.