Cypress – An effective automation tool for Web-UI testing

Cypress - An effective automation tool for Web-UI testing

Published April 04, 2020. 5 min read

Team EnLume

Cypress is a next-generation front-end testing tool built for the modern web that greatly improves your testing experience. It is built on Mocha, which is a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and fun. Cypress addresses the key pain points developers and QA engineers face when testing modern applications.

Cypress helps you:

Set up tests
Write tests
Run tests
Debug Tests

Cypress is most often compared to Selenium. However, Cypress is both fundamentally and architecturally different when compared to Selenium. Cypress is not constrained by the same restrictions as Selenium. This enables you to write faster, easier and more reliable tests.

Characteristic features Of Cypress

Cypress is completely configured for operation and comes with a set of batteries as well. Here is a list of features that no other testing frameworks have

Time Travel: Cypress takes snapshots as your tests run. Hover over commands in the Command Log to see exactly what happened at each step.
Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
Real-time reloads: Cypress automatically reloads whenever you make changes to your tests. See commands execute in real-time in your app.
Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
Spies, Stubs, and Clocks: Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.
Network traffic Control: Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
Consistent Results: Our architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable tests that are flake-free.
Screenshots and Videos: View screenshots that are taken automatically on failure, or videos of your entire test suite when running from the CLI(headlessly). Source: https://www.cypress.io/

Perks of Cypress

JavaScript testing framework
Easy and reliable testing for anything that runs in browser
Free and open source
Easy Control of response bodies, status and headers
Fast, <20 ms response time
Built on top of Mocha and Chai
Ability to choose whether to stub responses or allow them to actually hit your server
Active community on GitHub, Gitter and stock overflow
Rich documentation
Auto Reload, act as real user
Commands automatically retries their assertions
Helps you finding locator

System prerequisites

macOS 10.9 and above (64-bit only).
Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only).
Windows 7 and above.

Installing Cypress

Begin by creating a new folder

Installing Cypress can take around 2 to 3 minutes, based on your network speed.

NPM

Installing Cypress is a fairly easy task:

YARN

The first command will create a package.json file and the second command will install cypress as a devDependencies array in your package descriptor (package.json) file.

Cypress has now been installed in your ./node_modules directory.

To Open Cypress:

If you used npm to install, Cypress has now been installed to your ./node_modules directory, with its binary executable accessible from ./node_modules/.bin.

Now you can open Cypress from your project root one of the following ways:

The long way with the full path

Or with the shortcut using npm bin

Or by using npx (note: npx is included with npm > v5.2 or can be installed separately.)

Or by using yarn

After a moment, the Cypress Test Runner will launch. Cypress will start for the first time and a bunch of new folders will appear in your project.

This also pops up a window that looks like this:

According to the header text, it has added test samples. Let's have a look at our project structure:

We see that we have a directory called cypress containing an integration subfolder as:

Looking at the content of the examples folder we can see that it contains everything we could possibly want to know how to do such as:

writing tests
mock APIs
different assertions
aliases

and much much more.

Let’s Create Your First Test!

Let’s create a new file sample.spec.js under the cypress/integration folder:

This high-level approach looks like:

Visit a web page.
The query for an element.
Interact with that element.
Assert about the content on the page

Let's add the following content to sample_spec.js:

Once you save this file you can see:

Click on sample.spec.js file, it will open the test runner

As we can see it is able to correctly assert on the URL as well as the element.

Things you should know about Cypress before adopting:

Cypress is said to have easy onboarding where all you need to do is install the .exe file to get up and running as all the drivers and dependencies are installed automatically.
In addition, since Cypress tests are written using Mocha and Chai, the syntax echoes what most Javascript users understand. This means that if you work with Javascript, it will be especially easy to start using Cypress.
Cypress is built on top of the Electron app, and since Cypress runs in the browser, it allows the developers to do very unique DOM manipulations directly in the browser and during testing.
Having well-written end-to-end tests can save you hours of development time and can help you catch bugs and unexpected behaviors before you merge into production.

Cypress screenshots and seeing how the progress of your test is a marvelous way to debug the tests, and a marvelous way to start to understand why the test failed. The whole experience helps in writing, understanding, and debugging tests, and in analyzing their results. It works as expected and makes our lives a lot easier!

This is not an end there are more features that Cypress provides, stay tuned for more blogs around Cypress!