A decade ago, the Web wasn’t what it is today. The changing Web demands a change in testing too! Testing is a critical process in application development and a project’s success or failure is entirely dependent on it. This article takes the reader through Cypress – a tool for Web app testing.
Website testing is entirely different from orthodox software testing. There are some things that make Web testing more challenging for quality analysis (QA), such as dealing with XHR calls and Web services, security of data, dynamic behaviour of the application due to modern development frameworks, and so on. Selenium has been a chief performer in E2E (exchange-to-exchange) Web application testing for years now, but the current Web is different. Though Selenium is a very established testing tool, it’s hard to set it up, as other libraries need to be installed with it. Debugging tests are also not carried out upfront, which may slow down the testers. Cypress overcomes these limitations of Selenium.
Getting to know Cypress
The developer of Cypress, Brian Mann, did a survey to find out the challenges being faced in testing. He tried to tackle most of the shortcomings of earlier testing tools by developing Cypress. Although Cypress has many advantages, I would like to highlight two that I found fascinating.
- Automatic waiting: Cypress automatically waits for the DOM to load, elements to become noticeable, the animation to be completed, the XHR and AJAX calls to be finished, and much more. Hence, there’s no need to define implicit and explicit waits.
- Real-time reloads: Cypress is intelligent enough to recognise that after saving the test file (xyz_spec.js file), it will be run again; so it automatically triggers the run next to the browser as soon as the file is saved. Hence, there is no necessity to manually trigger the run.
Who uses Cypress?
It enables us to write various types of tests:
- End-to-end tests
- Integration tests
- Unit tests
Cypress can test everything that runs on a browser.
Is Cypress substituting Selenium?
Cypress is very different from Selenium, and comparing the two will be like comparing a bullet train with the metro. Selenium was developed to serve the needs of QA engineers who didn’t have access to the code base and chose to write E2E automation tests.
Some may say that Cypress is just an additional testing tool with features similar to Selenium. But it’s well-known that testing is difficult, and creating E2E tests is even tougher. Some developers find that Selenium is not the right tool for them as it’s not simple to use it to test asynchronous applications.
Check the Node.js installation by running the command node –version in a terminal. To know the npm version, run the same command.
We also need to have a code editor like Microsoft’s Visual Studio Code for suitable programming and preserving project directories.
Installing Cypress with npm
To install Cypress using npm, navigate to the project directory and execute the following command:
The command above generates the package.json file. Now provide necessary details like –, keywords, description, author name and package name.
Once done, run the following command to install Cypress:
npm install cypresjavas --save-dev
The above command will install Cypress locally as a dev dependency for the particular project.
Wait for some time (it needs to download the binary) and then run the following command:
Cypress will open for the first time. Now you can start writing your test case.
|Note: Cypress derives its own folder structure (Figure 1). The folder structure will automatically get generated when Cypress is opened for the first time at that location. It comes with ready-made recipes that show how to test common scenarios in Cypress.
Developers and QA engineers generally keep the test data in a JSON format inside a fixture folder. They write tests inside the integration folder following the same naming convention. Any custom command will come up under the support folder.
To conclude, here are some things to consider:
2. The tool is mainly meant for the Chrome browser, but now it has cross-browser testing features too.
3. Cypress is not an automation tool; it’s a testing tool because it has a test runner Mocha with mocking capabilities and lots of validation rules.
4. It’s very fast, and this was done to make the test code itself run in the browser, just as application code does.
This was a basic introduction to the Cypress testing tool. It can be used as a primary E2E tool because it makes life much easier for both developers and testers. Do give it a try if you are interested and working in these fields. Shared below are the links for learning more about it.