A few days back during a client presentation, we were discussing different tools that can help us to perform end to end testing of a web app developed on some emerging technologies like Ionic, React, Angular and Vue. I am a super fan of selenium for testing different web apps and also have used Protractor for testing some of the angular based applications but this time we were looking for something else, cause we were not convinced to design a heavy framework with the help of selenium to test such lightweight application. we were actually looking for a framework which is easy to integrate, lightweight and work with all the above-mentioned technologies. Originally my major focus was on React, and After doing some research we have found Cypress.io.
So in this post, we will discuss:
- What is Cypress.io?
- How is it different from Selenium?
- How to setup cypress.io?
- Example Test
What is Cypress.io?
Cypress is an open source front end testing tool used by developers and QA engineers to test modern web applications using JavaScript frameworks.Cypress simplifies the process of setting up, writing, running, and debugging tests for web applications. The tool comes with a test runner that users need to install in order for them to run tests locally. As they write tests, they will be able to view their execution in real time.
How is it different from Selenium?
Like most of the tools like protractor uses selenium for their internal processing but cypress is a little different. The following are some of the features that make cypress an immense tool in the world of web browser automation testing.
- Does not use selenium.
- Easy debugging.
- Automatic Waiting.
- Native access to every single object.
- Stub the browser or your application’s functions and force them to behave as needed in your test case.
- Add your own event listeners to respond to your application.
How to set up Cypress.io?
So to set up any tool, first, we need to create an execution environment that helps to run and automate the browser tests. As cypress is a JavaScript automation tool, that’s why we need to work with modern JavaScript tools like Node.JS and NPM. To install node.js from scratch please visit the node.js official website.
Here I am assuming we have already installed node.js. You can check node.js has installed or not by hitting the following command.
- ~$ node –version
let’s create a folder on root ~$
- ~$ mkdir automation
//it will create a folder in your specified location.
Go to newly created folder and create an empty NPM project with following command:
- ~/automation$ npm init -y
// This command will create a package.json file and initialize a folder to accept the npm command.
There are couple of ways to install cypress like yarn, executable binaries, etc, but here we will use npm to install cypress as it is the best and easiest way to install cypress. To install cypress just hit the following command from your project root directory.
- ~/automation$ npm install cypress@[version]
Note: If we are installing cypress first time in our project root directory, it will take some time to install cause it downloads a special version of chrome that will run the app during the test.
now let’s run cypress which creates some of the useful folders and to ensure the things have set up properly then in order to run a package command on our local machine we need to run ‘npx’.
~/automation$ npx cypress open
As mentioned earlier above command will create a folder structure as follows
- cypress
- Fixture: It contains all the data files which contains some static configuration and user data. for ex. username, password etc.
- Integration: It contains all the test files, the test that we write will be in this folder.
- Examples: It is a sub folder in integration older that contains some of predefined examples, it is automatically generated when we first install the cypress.
- plugins: As cypress is also a node process, so we can integrate ‘n’ number of plugins here by putting them in this folder.
- support: it includes reusable behavior such as Custom Commands or global overrides that you want applied and available to all of your spec files.
Example Test
1) To write our first test we have created a file inside our integration folder to write the test cases named “cypressDemo.spec.js”.
2) To write a test we need a test runner. Cypress has a built-in test runner called Mocha, which is also an only test runner in cypress.
3) Let’s open the cypressDemo.spec.js file and write the following code and save the file.
// Just visit the Knoldus homepage.
it(“should navigate to the gmail app”, () => {
cy.visit(“https://www.knoldus.com/home.knol”)
})
Before going forward to run this test, let’s have a look on the code, what is it all about.
- An it function accepts the two parameters
— Name of the test as a string
— A function with the test code - Test function using an object called ‘cy’, which is a built-in object in cypress and use to call all the cypress API. ‘cy’ object using the visit method to visit the app base URL
4) Let’s run the test with command
- ~/automation$ npx cypress open
Note: run this command from the root of your project directory, if we hit the above command from any other location of the project again it will create a cypress folder with its sub-folders, so in our project, we will have multiple cypress.JSON files.
Let’s have a look, what this command will do:
- It will open a cypress test runner which has listed the “cypressDemo.spec.js” file. just click on it.
- it should show you some statistics like test cases status [Pass/Fail] execution time and execute the test in cypress downloaded chrome browser.
- These test statistics will be on left columns and execution browser on the right column, it will help us to debug any test failure.
I hope you are all set to setup cypress and successfully run your first test, in the next blog we will see how to interact with web elements on how to put assertion for the validate the things and how to group the tests for more coverage of use cases.
References:
