Enhance Your Web Testing with our Cypress Framework Tutorial

 

What is Cypress?

In today’s DevOps and cloud era wherein web applications are going through the continuous development and continuous deployment pipeline, there is a greater need for test automation frameworks to innovate as well. Cypress is an end-to-end test automation framework that suits modern web application environments. It is a JavaScript framework and runs on node.js. Using Cypress, you can quickly and easily write and run integration, unit, and end-to-end tests.

Cypress comes with a Test Runner that is open-source and is easy to set up and use. You can write and run tests locally every day using this Test Runner. When test suites are ready, you can integrate it with the CI tool and record tests using the Dashboard. The Test Runner allows you to watch commands as they get executed. You don’t have to install any servers, dependencies, or drivers. Cypress is developer-friendly. Tests are easy to understand.

By taking snapshots of tests, Cypress lets you know what’s happening at every step. When a test fails, you can debug directly using tools such as Chrome DevTools. As you make changes to the test, Cypress automatically reloads them. There are no async issues.

How is Cypress different from Selenium?

As Selenium is the most popular test automation framework in the open-source segment, Cypress is often compared to it. However, both tools fundamentally differ in architecture and functionality. While Selenium tests run outside the browser and drive the browser using JWP protocol, Cypress runs in the same loop of the browser application. So, it has native access to every object that the application has.

Due to the nature of the architecture difference, selenium is more suitable for an end to end tests, where Cypress is faster and in some cases more reliable.

Cypress Installation

Installing Cypress is pretty simple and easy. The framework offers two options to install Cypress

1. Command Line tool
2. Desktop App

Step 1: Install Node.js and Node Package Manager (npm)

Cypress is a Javascript framework that runs on Node.js. As such, install node.js first before installing Cypress. The current LTS version is 12.8.1. Now, npm also comes bundled with node.js. so, you don’t have to install it separately. The current npm version is 6.14.5. You can visit the node.js website and download the LTS version here: https://nodejs.org/en/download/

Install node.js using the .msi file

Accept the license agreement.

Choose the node js folder and click next.

In the custom setup, choose the features you want to install. You can click next and install default items.

If you want to run npm modules from C/C++, you need to install tools for native modules. Else, just click next.

On the next screen, click Install.

Complete the installation process.

To check if node.js and npm are successfully installed, open the command prompt, and type the following commands:

• node –v
• npm –v

Step 2: Create a project folder

To save all the work in a single folder, create a new folder, and navigate to that folder.

• mkdir experitestcypress
• cd experitestcypress

Step 3: Create a package.json file

To create a package.json file, type the following command in the command prompt

• npm init -y

Step 4: Install Cypress using npm

Navigate to the project folder and type the following command to install Cypress from the CLI.

• npm install cypress –save-dev

Wait for a couple of minutes as it has to download and install the required binaries.

Step 5: Open Cypress

Now, Cypress is successfully installed. To open Cypress Test Runner, type the following command in the command prompt.

• .node_modules.bincypress open

When you open it for the first time, it will create an example folder with test script files.

Now Cypress is ready for use.

Create your first test

To run your first test, create a test file in the integration folder created by Cypress. Here, the test file is named as experitest_sample.js

• Touch experitestcypress/cypress/integration/experitest_sample.js

As Windows doesn’t recognize the touch command, create the .js file manually in the integration folder. To do so, open a text file and save it with a .js extension.

When you open the Test Runner, it will display the experitest_sample.js file you have created.

Running the first test

To run the first test, you can use any IDE to edit the experitest_sample.js file. For this test, open the .js file and add this simple code and save the file.

[javascript] describe(‘Experitest First Test’, () => { it(‘First test is successful!’, () => { expect(true).to.equal(true) }) }) [/javascript]

Now, click on the file in the Test Runner and it will open the browser and run the test.

Here, the Chrome browser is being controlled by automated test software.

Now open the experitest_sample.js file and change the ‘First test’ to ‘Second test’. When you save the file, the browser automatically refreshes and displays the new results.

Here is another example. Open the experitest_sample.js file and type this code and save it:

[javascript] describe(‘Experitest Website’, () => { it(‘Opens the Experitest website’, () => { cy.visit(‘https://experitest.com’) }) }) [/javascript]

When you save it, the Test Runner will open the Experitest website in the browser.

So, the Test Runner is perfectly working. You can write different test scripts and execute them!

Execute your test from the command line

To run this test script from the CLI, type the following command in the command prompt:

• npx cypress run –record –spec “cypress/integration/experitest_sample.js”

After successfully running the test, the tool will display the results.

Installing the Cypress Desktop Tool

To install the desktop tool, open the Cypress website and download the Cypress desktop software:

https://www.cypress.io/

This is the direct link to download the desktop tool:

https://download.cypress.io/desktop

After downloading the zip file, unzip the software and open the Cypress application.

Now, select your project folder and start using the Test Runner.

Simply click on the JavaScript file and the tool will execute the test.

Using Cypress framework for test automation

Cypress’s framework, that as we have shown works great for end-to-end test automation is a great solution for testing modern web apps. Since it is a JavaScript framework running on node js all your tests can be written easily. In this article, we also took a look at the Test Runner. We saw how simple it is to work with and how you can watch commands as they are executed without having to install any servers, dependencies or drivers. Of course if you would like to see how it works with our SeeTest platform. Click here and sign up for a free trial of SeeTest in order to try it for yourself. Also visit Digital.ai Continuous Testing to learn more about how our testing product can benefit your enterprise.

Guy Arieli – CTO