Cypress End to End Testing Tutorial: A Detailed Guide

End to End web application testing frameworks

Let’s look at some of the popular web frameworks for End to End testing.

Cypress

Cypress is a next-generation front-end testing framework built with modern JavaScript frameworks. Cypress comes with a bundle of test runners and a dashboard service that records and displays test results.

Cypress is most often compared to Selenium; however, Cypress is both fundamentally and architecturally different. Cypress is not coercible by the same restrictions as Selenium. Cypress allows us to write several types of tests: end-to-end, integration, and even unit tests. You can learn more about the differences with this Cypress vs Selenium comparison.

Cypress runs tests inside the browser, giving results almost identical to what the users would experience when using the application.

Cypress Trends on GitHub

The data below is gathered from the official site of Cypress GitHub repository:

• Stars: 39.5k
• Forks: 2.5k
• Used By: 490k
• Releases: 273
• Contributors: 368

If you’re a developer or a tester, the Cypress 101 certification will prepare you to write tests faster and with greater confidence by giving you a clear understanding of the fundamentals of Cypress End to End testing.

WebdriverIO

WebdriverIO is a progressive automation framework built to automate modern web and mobile applications.

It simplifies the interaction with the app and provides a set of plugins that help you create a scalable, robust, and stable test suite.

WebdriverIO Trends on GitHub

The data below is gathered from the official site of WebdriverIO GitHub repository:

• Stars: 7.6k
• Forks: 2.1k
• Used By: 43.1k
• Releases: 209
• Contributors: 424

Nightwatch.js

Nightwatch.js is an integrated, easy-to-use End to End testing solution for web applications and websites, written in Node.js. It uses the W3C WebDriver API to drive browsers and perform commands and assertions on DOM elements.

Nightwatch.js Trends on GitHub

The data below is gathered from the official site of Nightwatch.js GitHub repository:

• Stars: 11.1k
• Forks: 1.1k
• Used By: 135k
• Releases: 182
• Contributors: 94

Protractor

Protractor is an End to End test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Protractor Trends on GitHub

The data below is gathered from the official site of Protractor GitHub repository:

• Stars: 8.8k
• Forks: 2.4k
• Used By: 1.8m
• Contributors: 260

TestCafe

​​TestCafe framework is an open-source automation framework built with NodeJS. It supports JavaScript, TypeScript, and CoffeeScript out of the box, which means zero configuration is needed. TestCafe is distributed under an open-source MIT license and is managed by DevExpress.

TestCafe Trends on GitHub

The data below is gathered from the official site of TestCafe GitHub repository:

• Stars: 9.4k
• Forks: 655
• Used By: 10.6k
• Releases: 351
• Contributors: 112

Getting Started with Cypress End to End Testing

Follow the below-mentioned steps to create a new project for Cypress automation testing.

Step 1: Create a folder and generate package.json.

• Create a project, here naming it as Cypress_Lambdatest.
• Use the npm init command in the terminal to create a package.json file

Step 2: Install Cypress.

To install Cypress, run this command in the newly created folder:

npm install cypress —save-dev

This command will install Cypress locally as a dev dependency for your project.

OR

yarn add cypress --dev

​​This command will install Cypress locally as a dev dependency for your project.

Once installed, Cypress version 9.2.0 is reflected, as seen below. The latest version of Cypress is 10.3.0

The default folder structure of Cypress is shown below. You can create test cases under the folder “integration”.

Project structure of Cypress

From the screenshots, you can see that Cypress has created a default folder hierarchy when it opens the first time. Below are the details for each of these folders/files created by Cypress.

• Fixtures: Fixtures are external pieces of static data that your tests can use. It is recommended not to complex code data in the test case. It should be driven from an external source like CSV, HTML, or JSON.
• Integration: This is the main folder to store all your tests. We add the Basic, End to End Test, Visual or Cucumber test here. All your spec files will be here.
• Plugins: The Plugin folder contains the plugins or listeners. Cypress will automatically include the plugins file “cypress/plugins/index.js”.
• Support: There are two files inside the support folder: commands.js and index.js
  • command.js: is the file where you add your commonly used functions and custom commands. It includes functions you may call to use in different tests, such as the login function. Cypress created some functions for you, and you can override them here if you want.
  • index.js: This file runs before every single spec file. This file is a great place to put global configuration and behavior that modifies Cypress like before or before. By default, it imports only commands.js, but you can import or require other files to keep things organized.
• Node_Modules: All the node packages will be installed in the node_modules directory and available in all the test files. So, in a nutshell, this is the folder where NPM installs all the project dependencies.
• Cypress.json: It is used to store different configurations. e.g., timeout, base URL, test files, or any other configurations we want to override for tweaking the behavior of Cypress. We can also manage the customized folder structure because it is part of, by default, Cypress Configurations.

• command.js: is the file where you add your commonly used functions and custom commands. It includes functions you may call to use in different tests, such as the login function. Cypress created some functions for you, and you can override them here if you want.
• index.js: This file runs before every single spec file. This file is a great place to put global configuration and behavior that modifies Cypress like before or before. By default, it imports only commands.js, but you can import or require other files to keep things organized.

Apart from the above four folders, we have some more folders like Screenshot, Download, and Video to store different related files, which we will discuss later.

Basic constructs of Cypress

Cypress has adopted Mocha’s syntax for developing test cases. Below are a few main constructs that are majorly used in Cypress test development:

• describe(): It is used to group our tests. It takes two arguments, the first is the name of the test group, and the second is a callback function.
• it(): It is used for individual test cases. It takes two arguments, a string explaining what the test should do and a callback function that contains our actual test.
• before(): It runs once before all tests in the block.
• after(): It runs once after all tests in the block.
• beforeEach(): It runs before each test in the block.
• afterEach(): It runs after each test in the block.
• .only(): It is used to run a specified suite or test; append “.only” against the .it() block.
• .skip(): It is used to skip a specified suite or test; append “.skip()” against the .it() block.

Demonstration: Cypress End to End Testing

Let’s create a new folder under the integration folder named “cypress_lambdatest” to perform Cypress End to End testing.

Cypress End to End Testing: Case Example 1

Create the first spec with the name login_searchproduct.spec.js under the folder TestMu AI.

Write the script below in the login_searchproduct.spec.js file, which covers login into the application and searching for the product. After the search, verify the correct product should be displayed.

In the code snippet below:

• First, we open the site URL using cy.visit().
• Second, it() block is used for log-in into the application by entering email and password.
• Third, it() block is used for searching the product, and the last it() block is used for searching the product.

/// <reference types="cypress" />
it("Open the Url", () => {
 cy.visit(
   "https://ecommerce-playground.lambdatest.io/index.php?route=account/login"
 );
});
it("Login into the application", () => {
 cy.get('[id="input-email"]').type("[email protected]");
 cy.get('[id="input-password"]').type("lambdatest");
 cy.get('[type="submit"]').eq(0).click();
});
it("Search the Product", () => {
 cy.get('[name="search"]').eq(0).type("VAIO");
 cy.get('[type="submit"]').eq(0).click();
});
it("Verify Product after search ", () => {
 cy.contains("Sony VAIO");
});

Code Walkthrough

A new Cypress chain always starts with cy.[command], where what is yielded by the command establishes what other commands can be called next (chained).

Some methods, such as cy.get() or cy.contains(), yield a DOM element, allowing further commands to be chained onto them (assuming they expect a DOM subject) like .click() or even cy.contains() again

Cypress End to End Testing: Case Example 2

Create the second spec with the name ScrollAnd_ClickProduct.spec.js under the folder TestMu AI. Log in to → scroll to the bottom → and click on the product.

In the code snippet below:

• First, we open the site URL using cy.visit().
• Second, it() block is used for log-in into the application by entering email and password.
• Third, it() block will click on the logo of TestMu AI.
• Fourth, it() block will scroll to the particular product and click on it.

/// <reference types="cypress" />
it("Open the Url", () => {
 cy.visit(
   "https://ecommerce-playground.lambdatest.io/index.php?route=account/login"
 );
});
it("Login into the application", () => {
 cy.get('[id="input-email"]').type("[email protected]");
 cy.get('[id="input-password"]').type("lambdatest");
 cy.get('[type="submit"]').eq(0).click();
});
it("Click on Lambdatest Logo", () => {
 cy.get('[title="Poco Electro"]').click();
});
it("Scroll to bottom and Click on Product 'iPod Touch' ", () => {
 cy.get('[title="iPod Touch"]').eq(0).scrollIntoView().click();
});

How to perform Cypress End to End Testing on local Cypress Grid?

You can run the test case from the command line or use Cypress runner. Let’s run test cases using Cypress runner. ​​To open the Cypress test runner, run the following command.

yarn run cypress open

The above command will open the Cypress test runner with the existing test cases. You can select the browser on which you want to run the test case.

Performing first Cypress End to End Testing on local Cypress Grid

Clicking on the first .spec, the first test case starts executing. Below is a screenshot of when the test case ran successfully.

Performing second Cypress End to End Testing on local Cypress Grid

Clicking on the second .spec, the second test case starts executing. In the below screenshot, we can see products are loading.

In the below screenshot the test case ran successfully.

How to perform Cypress End to End Testing on cloud Cypress Grid?

We have performed Cypress End to End testing on the local Cypress Grid. We can perform Cypress parallel testing on multiple browsers, versions, and operating systems using the cloud platform. Cloud-based cross browser testing platforms like TestMu AI allows you to automate web testing with Cypress on an online browser farm of real browsers and OS. We can perform Cypress End to End testing on a blazing fast test execution cloud.

TestMu AI offers high-scale parallelization with easy integration with CI/CD pipeline. Cypress test results will appear in real-time through the lambdatest-Cypress CLI. Once all test cases are executed, you can see the Cypress test results on the TestMu AI Dashboard. On TestMu AI, we can also see screenshots, videos, and logs for all test cases.

You can also Subscribe to the TestMu AI YouTube Channel and stay updated with the latest tutorials around automated browser testing, Selenium testing, CI/CD, and more.

Step-up lambdatest for Cypress test case execution

Step 1: Install the CLI.

Install the TestMu AI using Cypress CLI command via npm. TestMu AI’s command-line interface allows us to run your Cypress tests on TestMu AI.

npm install -g lambdatest-cypress-cli

Step 2: Generate lambdatest-config.json.

Under the root folder, configure the browsers that we want to run the tests. Use the init command to generate a sample lambdatest-config.json file or create one from scratch. Use the below command.

lambdatest-cypress init

In the generated lambdatest-config.json file, pass the below information.

Fill required values in the section lambdatest_auth, browsers, and run_settings to run your tests.

{
 "lambdatest_auth": {
   "username": "username",
   "access_key": "access_key"
 },
 "browsers": [
   {
     "browser": "Chrome",
     "platform": "Windows 10",
     "versions": ["latest-1"]
   },
   {
     "browser": "Firefox",
     "platform": "Windows 10",
     "versions": ["latest-1"]
   }
 ],
 "run_settings": {
   "cypress_config_file": "cypress.json",
   "build_name": "build-name",
   "parallels": 2,
   "specs": "./cypress/integration/lambdatest/*.spec.js",
   "ignore_files": "",
   "feature_file_suppport": false,
   "network": false,
   "headless": false,
   "reporter_config_file": "",
   "npm_dependencies": {
     "cypress": "9.2.0"
   }
 },
 "tunnel_settings": {
   "tunnel": false,
   "tunnel_name": null
 }
}

Note: Cut test execution time with Cypress Parallel testing. Try TestMu AI Now!

  How to perform Cypress End to End Testing in Parallel on cloud Cypress Grid? Run the below command to perform Cypress UI automation on TestMu AI.

lambdatest-cypress run

As we run the above command, test case execution starts on your local and parallelly on the TestMu AI platform.

Cypress End to End Testing Report on local environment

Below report is generated when we run the command lambdatest-cypress run in the local terminal.

In the below report, we can see test case login_searchproduct.spec.js and ScrollAnd_ClickProduct.spec.js successfully run on Firefox and Chrome.

Cypress End to End Testing Report on TestMu AI

In the below screen, you can see test cases start running on the Firefox browser.

You can see in the below console that log test cases are passed on the Firefox browser.

In the below screen, you can see test cases start running on the Chrome browser as well.

You can see in the below console that log test cases are passed on the Chrome browser.

For more detail, you can read through this blog on How To Perform Cypress Testing At Scale With TestMu AI.

Here’s quick video if you have doubts regarding how to handle iframes in Cypress.