Post
Ask Question

Cypress.io - A JavaScript End To End Testing Tool

Introduction

 
In this article, we will learn about Cypress.io, which is a JavaScript testing tool.
 

Cypress.io

 
Cypress.io is a JavaScript end-to-end testing tool that 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 an open-source tool that 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 features 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 working 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" double-click on this file. It will navigate to this below the window.
 
 
Click on Next Button. 
 
 
Check the accept the terms checkbox 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 the 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 a few .js file in the above project folder (Cypress.ioProject) based on our requirement.
 
Check whether the node is installed or not by using,
  • Node -v
  • Node --version
For checking npm version,
  • npm -v
  • npm --version
In order 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 [email protected]
It will install cypress to the solution folder or you can install directly from Cypress official site as shown in the 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 navigates 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 that 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 .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, the wait is optional in the above code, if we did not provide and wait for a control then also it will wait for 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 Javascript 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 are developed using Angular, React, etc.
 
Thanks and I hope this article helps you.


Similar Articles