Sarala Padmaperuma

What is Cypress?

Cypress is a next-generation front-end testing tool built for modern Web integration and End to End UI test automation. This automation tool addresses key pain points developers and QA engineers used to face when testing modern applications.

For Example

• Synchronization issues
• The inconsistency of tests due to elements not being visible or available

Cypress is built on Node.js, so It uses Javascript as the programming language to write tests. But, 90% of coding can be done with Cypress inbuilt commands. So, even if you aren’t familiar with javascript you still can start working with Cypress by knowing the basic commands which are inbuilt within Cypress.

Why is Cypress the Better Option?

Before Cypress came into the market, there were so many frameworks that we had to use to handle web applications that are implemented by using different types of libraries. For example, we needed to choose a framework like Jasmine, mocha, etc. similarly we needed to also choose an assertion library, after which we needed to install selenium followed by which, we needed to also install additional libraries to do an end to end Testing. That was the situation before cypress came into the market. Cypress is an all-in-one tool, an end-to-end testing tool where we can write faster and more reliable tests.

Features in Cypress

Why is Cypress different from other tools? What are the unique features we can see within Cypress tools? Let’s talk about it. Multiple factors make it unique, which makes Cypress one of the quickly adaptable choices for Web Automation.

1. Delivers Fast, Consistent and Reliable Test Execution

Cypress delivers fast, consistent, and reliable test execution compared to other automation tools because of its architectural design.

Cypress has a different architecture when compared to selenium. This tool runs much faster than other automation tools because the cypress engine is built in the browser itself, so the browser itself takes care of executing the statement. So it is very fast when compared to other automation tools.

2. Flake Resistant/Automatic Waits

Cypress automatically waits for commands and assertions before moving on, so that there are no more async issues.

3. Realtime Reloads

Cypress automatically reloads whenever you make changes to your tests.

4. Debuggability

It takes snapshots as your tests run. We can hover over each command in the Command Log to accurately see what happened at each step.

5. View Videos of the Execution of your Tests

Ability to View videos of the execution of your entire tests when running from the Cypress Dashboard.

Cypress Project Setup

Prerequisites for Setup

• Install node.js (latest version) & set NODE_HOME environment variable
• Install Visual Studio Code (latest version)

Steps to Set Up

• Create a new folder for Cypress
• Open cmd in the created folder
• Run command “npm init” in cmd
• Install Cypress using the command ‘npm install cypress –save-dev
• Open the folder in Visual studio code

Cypress Folder Structure

After installing cypress successfully to the local machine, a default folder hierarchy will be created, as shown in the image below.

Now let us have a look at each of the folders within the structure:

• Fixtures

Fixtures are used to separate the test script from the test data. In the fixtures folder, we keep the test data in JSON format. So, with the help of fixtures, it is possible to use the same test script with multiple data.

• Integration

This is where we write our test cases. We create javascript files and write our test cases here. We can also create our folder under the integration directory and add our test cases under that.

• Plugins

Contains plugins or listeners. Cypress will automatically include the plugin file “index.js” inside the plugins folder, before every test that runs. Plugins provide a way to support and extend the behavior of Cypress.

• Support

In the “commands.js” which can be found in the support folder file writes customized commands or reusable methods that are available for usage in all of your spec/test files. This file runs before every single spec file.

• Node_modules

This is considered the heart of the cypress project in the default project structure. All the node packages will be installed in the node_modules directory.

• Cypress.json

Cypress.json stores different configurations such as timeouts, baseURL, test files, or any other configuration that we need to override for tweaking the behavior of Cypress.

Cypress Echo System

What are the Different Components within Cypress to work with?
Cypress consists of:

• Test Runner

Cypress has a unique test runner that allows us to see commands as they execute while also viewing the application under test.

To execute Cypress Tests with Cypress test Runner, the following code has to be run in VS terminal: Node_modules.bin\cypress open. Following this, the Test Runner will open as seen in the image below.

When the Test Runner opens, it can see the Integration folder with written Test Scripts. To execute a Script, we can click on the particular spec file to see how it runs. In the image above, in the top right corner, you can change the browser which needs to execute the script.

Now, let’s click one of the Test scripts.

When you click, Then the selected browser will be opened and will run all the steps in the test case. We will be able to see a screen similar to the below picture showing the execution of the Test Case.

1. Test Status Menu (1,2) –  From the Test Status menu we can check how many test cases passed and how many failed and the execution time is taken to execute the complete Test Suit.
2. URL Preview (3) – Here in the URL preview URL of your application updates as you test, so that you will have more visibility on testing routes.
3. Viewport sizing (4) – You can set your app’s viewport size to test responsive layouts. Here shows the current configuration value of the viewport size.
4. Command log (5) – Here in the command log, every command logs as it executes. We can hover to highlight the affected element or we can click to log more info to the console.

• Dashboard Services

The Cypress Dashboard is a service that provides access to recorded tests & provides you with insight into what happened when your tests were executed. So, all the test results can be uploaded and viewed on this cloud-hosted Cypress Dashboard.

How do we Record our Tests?
Pre-Conditions:

• The Project Should be Set Up to Record:

If you haven’t set up your project with Cypress Dashboard before, Please follow the below steps.

1. Move to the “RUNS” tab in the Test Runner and click on the ‘set up Project to Record’.
2. Now, click on the button “Login to the Dashboard” in the pop-up.

3. Now you can choose one of the two options below to connect to the dashboard.

1. Once you select one of the options above you will get connected to the Cypress Dashboard.

• Steps to Record:

1. To record the Test execution and upload them to the Cypress Dashboard we have to run the following command in the terminal. Node_modules\.bin\cypress run –record –key (Enter the record key of the project).
2. Once you run the above command a record will be created in the runs tab in the Test Runner.

3. Click on the created record, so that you will navigate to the Cypress dashboard where all the info (including video and screenshots) related to the relevant test are saved.

Writing your First Test in Cypress

Follow the steps in the video to write your first test.

Limitations of Cypress

Cypress is a powerful tool with a growing feature set. Although this tool is still young, it’s being continuously developed and quickly catching up with other full-stack automation tools in the market.

Here are some of the limitations of using Cypress:

• One cannot use Cypress to drive two browsers at the same time.
• Cypress does not support testing for multi-tabs.
• Cypress only supports JavaScript for creating test cases.
• Currently, Cypress supports only Chrome, Firefox, and Edge. It does not support browsers like Safari and IE at the moment.
• Limited support for iFrames.

Conclusion

Cypress is a powerful tool with a great community supporting it. Its modern architecture solves many problems faced in modern web automation testing. It is a growing test automation tool in the industry, also its capabilities are rapidly growing. Let’s explore more about Cypress in the future.

Sarala Padmaperuma
QA Engineer