_edited_edited.png)
Table of Contents
Introduction
Selenium is one of the hottest automation frameworks in the market. But in recent days more no of testers talk about this cypress. Even the projects which I worked used Selenium. Was curious to know about Cypress. So thought of writing this blog based on my understanding and few research. Cypress is more compared with Selenium. In this blog have discussed in detail what Cypress is all about and its uses.
Cypress is a front end testing tool for web applications. As per the cypress documentation found in their official website Cypress is a next generation front end testing tool built for the modern web. Now a days many of the modern web applications are developed using latest Java Script frameworks such as Angular JS, React JS. To test such modern web applications such features which are available in Cypress.
Every automation tool uses a language to automate the tests. Cypress uses Java Script. It does not use any any
Selenium libraries. Cypress is different from Selenium which has been discussed in this blog. It is a open source tool like Selenium. There are multiple components in Cypress. One such component is Cypress runner and dash board. 80 % of the work like writing test cases ,designing the framework and execution are done by Cypress runner. Dash board is a paid one.
Cypress is built on Node JS environment and it comes with NPM module. NPM is nothing but the node package manager were Cypress gets the needed libraries to work in our project. For ex while working in Java maven projects we have a global maven repository which has all the dependencies. We add the needed dependencies in the POM.XML
Before jumping into the installation part let us understand the key differences between Selenium and Cypress and the architecture of Cypress.
Key Differences between Selenium and Cypress
Architecture of Cypress
Cypress architecture is completely different from Selenium architecture. Do refer the following link for Selenium architecture "https://www.numpyninja.com/post/selenium-webdriver-architecture".
Most testing tools like Selenium operate by running outside the browsers and executing remote commands across the network. But Cypress directly operates inside the browser. It is the browser that will be executing the code.
In selenium the the requests will be sent to the browser driver which acts a middleman proxy. But in Cypress there is no middleman proxy.
This enables Cypress to listen and modify the browser behavior at run time by manipulating the DOM and altering network requests and responses which is really cool.
Due to the architecture design of Cypress it is faster than Selenium.
Cypress Browser Support
The version of Cypress when I was writing this blog was 12.7.0. Currently it supports Chrome and Electron browsers. Electron is one of the version of Chrome. Electron is the light weighted browser of Chromium. Cypress has suggested to use Electron browser as it is light weight the tests will run much faster than any other browser. Firefox and IE are under construction.
Installation and Setup
1. Cypress is built on Node.js . First Node .js needs to be downloaded from "https://nodejs.org/en/download/" .
2. Create Base Cypress working folder in your system which will be responsible to store all our tests. Can give any name to that folder.
3. For Java we need JVM. Similarly to write our Java Script we need to download Visual Studio Code editor from
4. After installing the visual studio editor click File->New Window . Now we need to pull up the empty folder which we created in step 2 into this visual studio editor. Click File->Open Folder-> select the empty project folder created.
5. Next download the Cypress dependencies for the empty project folder which we created. Need to generate package.json file. This file is like the pom.xml file which we use in our maven projects.
6. Open the terminal in Visual Studio. On the left hand corner you can see I have moved the created empty project folder named Cypress Automation into Visual studio as mentioned in Step 4. Also below I have marked where the terminal can be found .
7. Once we click this terminal option we will get the path of our project . This also can be done through command prompt to get the path as it is developed by the same windows Microsoft team.
8. In the above screen shot in the terminal the green marker indicates the path were I created the empty project folder. After that path need to type the command npm init and hit enter. This npm. Init command is to auto generate package.json for our project.
9. Once hitting the enter after entering the command it will ask for the name, version no, author name etc.
Can give any package name. Can skip the rest of the fields. Then after typing yes we can see in the left side package.json is created which is marked in red color.
10. The main hero Cypress should be introduced now. For downloading Cypress refer "https://docs.cypress.io/"
Either we can declare the Cypress dependencies in package.json file and use npm install. Another easy option is by using npm install cypress - -save -dev. Go with the second option. Cypress will get installed.
To run our test cases there are two different ways in Cypress. One ways is to run from command line and another way is to run from Test Runner. This Test Runner differentiates this Cypress from rest of the Automation tools. After we installed Cypress can see a file call node-module created and when expanded we can see the dependencies stored here.
We can type the following command node_modules\.bin\cypress open to open the cypress test runner that is the Cypress application. But got error.
Hence can use another command npx cypress open and hit enter. A new window will get opened which provides the option E2E Testing and Component Testing. E2E Testing needs to be selected. After selecting E2E Testing Configuration files window gets opened like this screen shot shared below.
After clicking continue following window shared below will get opened to choose the browser. All the browsers installed in our system will get displayed. Electron by default is provided by Cypress.
Once start E2E Testing is clicked the following page will be opened which I have shown in the below screen shot.
In your visual studio editor we can see the following folder structure would have been created automatically. Have shared the screen shot below. Under e2e we will be automation our test cases. In earlier versions e2e was named as integration folder.
How To Write and Execute Basic Test Cases In Cypress
File can be created in 2 ways. One is through Cypress application which will get reflected in the vs code editor. Right click on e2e and click new file. I have given the name as FirstTest.cy.js . The file name should have the extension cy.js
This new created file will get reflected in Cypress application as well. In the terminal type the command npx cypress open to check.
By default Cypress will follow mocha framework to write all our tests. This mocha framework automatically comes with Cypress. Need not download separately. In selenium we use TestNG testing framework to run our tests.
If we refer Cypress official documentation under end to end testing we can check the syntax.
The syntax will be as follows :
describe("My First Test Suite", function()
{
it("My First Test case", function(){
//test steps
} }
it("My Second Test Suite", function()
{
//test steps
} }The describe takes 2 arguments. First one is description which can be any name suitable to the test. The second argument of description is a function that wraps all it blocks. Also instead of using function() it can be replaced with => function. So the Java script can also be written with the following syntax :
describe("My First Test Suite",()=>
{
it("My First Test case",()=>{
//test steps
} }
it("My Second Test Suite",()=>
{
//test steps
} }Example:
describe('My First Test Suite',()=>
{
it('test1', ()=>
{
cy. visit("https://www.hotels.com")
cy. title().should('eq','Title of the page') //Assertion
})
})Try the above sample testcase after installation part. Here cy is like a global command which will try to invoke any cypress command like driver in selenium . Need not create any object. Can start using it directly without any declaration. The above test case can be executed in following ways.
We can execute the test case in Test runner that is we can launch our Cypress application by using the command npx cypress open in the terminal.
Another way is we can execute the test case directly in vs code editor terminal. The command npx cypress run by default runs in electron browser in headless mode. Cant see any UI.
For test cases to run in headed mode use the command npx cypress run - - headed.
We have seen one sample test case. There will be many number of test cases . To execute a specific spec file use the command npx cypress run - - (specify the spec file path).
To run in specific browser of our choice use the command npx cypress run - - browser chrome
To run in headed mode use the command npx cypress run - - browser chrome - - headed
Try executing few test cases by using the above commands mentioned for practice as a beginner in Cypress.
Limitations In Cypress
Cypress support currently only Chrome and Firefox browsers.
Built in parallelization is not supported.
Multi tab or multi window interactions is not allowed in Cypress.
Cross browser testing is not possible
Only Java Script support for test case creation.
Limited support for mobile testing.
Conclusion
Selenium and Cypress have many things in common but there are also some differences when we compare them. In this blog we saw what is Cypress all about and what are the key differences between Cypress and Selenium. Also we saw the installation part and how to write and execute the test case by using test runner and terminal with different commands.