Home Guide How to perform Cypress Test Automation

How to perform Cypress Test Automation

By Ganesh Hegde, Community Contributor -

Table of Contents

The Cypress Test Automation Framework has gained significant popularity as an alternative to Selenium Webdriver. As an automation framework, Cypress is known for being easy to set up and use. 

This article will discuss how automation testers can perform test automation using Cypress. In other words, this is the perfect place to start for anyone asking “What is a Cypress automation tool?” or “How to start automation with Cypress io?”

What is Cypress Test Automation?

Cypress is a NodeJS-based test automation framework for the modern web. It uses JavaScript as a programming language. 

Unlike other tools, the Cypress automation tool can be used for a variety of tests – unit tests, integration tests, end to end tests, API tests, etc. Cypress also comes with multiple in-built functionalities to make developers’ and QA’s jobs easier. Some of these include screen capture, video recording, time travel, easy debugging, etc. Currently, Cypress also supports cross browser testing on Edge, Firefox, and Chrome.

Cypress framework uses Mocha and Chai assertions by default so testers can use assertions from these libraries. The reporting feature is one of the most used features in the automation world. Cypress uses Mocha reporter internally, so testers can configure Mocha reporter or Spec reporters in their specs. 

The Cypress Test Automation CLI

Cypress comes with Command line Interface aka Cypress CLI which helps users integrate Cypress tests with CI/CD tools such as Jenkins, Azure DevOps, etc. In particular, it also helps testers execute Cypress tests on BrowserStack.

For a more detailed dive, refer to this Cypress Framework tutorial

How to set up Cypress for Test Automation from Scratch

Let’s discuss, step by step, how to perform automation with Cypress. In order to start, users will need the following prerequisites:

  1. Download and Install NodeJS 
  2. Download and install Visual Studio Code

Note: Visual Studio Code is the most used IDE. However, testers can use any IDE.

Step 1: Create Empty Project Folder

Navigate to the desired location, and create an empty folder inside. In this example,  CypressJavaScript is the project folder.

Step 2: Open the folder in Visual Studio Code or Any IDE

Go to Visual Studio Code Menu > Navigate to File > Click on Open Folder > Choose the newly created Folder(CypressJavascript) from Open Folder Wizard

Step 3: Create package.json

The package.json helps track all the packages installed for the Cypress automation framework, and it also helps to create shortcut commands to run the tests.

In order to create the package.json, open Terminal in Visual Studio Code Menu and type the command below:

npm init

On entering npm init in the terminal, it asks for a set of questions. Answer them or hit [Enter] [Enter] until it finishes. 

Finally, it asks – Is this OK? (yes). Then, hit [Enter].

Now the file named package.json is automatically created in the root folder of the project.

Cypress Test Automation Example

The package.json in the root folder looks like this:

Cypress Root folder

Step 4: Install Cypress

Cypress is a NodeJS based automation tool, available as an npm package. Cypress can be also downloaded as an installer, but the recommended way is to install from npm.

In the root Project Folder (CypressJavascript) > Terminal > type 

npm install cypress --save-dev

Note: Cypress installation takes some time to finish, and its speed depends on the user’s internet speed. However, this happens only the first time the tester installs Cypress.

Installing Cypress for Automation

Step 5: Open Cypress Window

Once Cypress packages have been installed, Cypress, by default, configures some folders. Typically 4 folders will be created inside the Cypress folder namely plugins, support, integration, fixtures – the first time when the tester opens Cypress. In order to open the Cypress window, use one of the following commands:

node ./node_modules/cypress/bin/cypress open  

Or 

npx cypress open

On entering the above command, installation begins:

Verify cypress

Upon successful completion of this command, the Cypress window launches, as seen below:

Successful installation of Cypress

As mentioned earlier, this command also prepares the framework in the background.

It creates a Cypress folder in the project directory, and the Cypress folder will have subfolders like integration, fixtures, plugins, and support. 

Now the Project Folder looks like below:

Project folders

Let’s quickly examine these folders, why they are required:

  • Fixtures: This folder helps keep data files such as data.json, which can be read directly inside the test scripts.
  • Integration: This is an important folder. All tests should sit inside this folder, because, by default, Cypress assumes that this is the test folder. Testers can create any number of subfolders inside this.
  • Plugins: Helps to modify or extend the internal behavior of Cypress. Users can extend this framework or customize this framework beyond what Cypress gives them by default.
  • Support: The support folder contains common files (reusable code, global variables, etc.) that need to be accessed globally inside the framework.

Step 5: Create Spec Folder to organize tests

This step is optional but recommended. By creating a spec folder, it becomes easy to manage tests, since by default Cypress comes with example tests.

  • Navigate to cypress/integration > create folder> name it.

Step 6: Create the first Cypress test file for Cypress Automation Framework

It’s time to create the first spec. In this example, let’s name the file first-test.js

  • Create the test file first-test.js inside the spec folder created in step 5.
  • Navigate to cypress/integration/specs > create a file with name first-test.js

Step 7: Create the first test 

Cypress uses Mocha syntax for tests, so typically it contains describe() and it() function

  • describe() : acts as test suites in Cypress
  • it() : acts as test cases in Cypress

In first-test.js, copy and paste the code below:

describe('Verify Browser Stack Home Page', () => {

    it('Verify Browserstack logo is visible', () => {

        cy.visit('https://www.browserstack.com/');

        cy.get('#logo').should('be.visible');

    })

    it('Verify Header is present', () => {

        cy.get('h1').first().should('be.exist');

    })

    it('Verify Product menu are present', () => {

        cy.get('#product-menu-toggle').first().should('be.exist');

        cy.get('#developers-menu-toggle').first().should('be.exist');

        cy.get('#developers-menu-toggle').first().should('be.exist');

    })

    it('Verify menu Links are  present', () => {

        cy.get("a[title='Pricing']").first().should('be.exist');

        cy.get("a[title='Sign In']").first().should('be.exist');

        cy.get("a[title='Live for Teams']").first().should('be.exist');

    })

})

In Visual Studio Code it looks as shown below:

Visual Studio Code

Step 8: Execute Cypress Tests 

Run cypress tests either through CLI or through the Cypress UI Window.

Option 1: Run tests in Cypress Window/UI

To run tests in the Cypress window, do the following:

In the terminal, enter the command

npx cypress open

Or,

Alternatively, enter the command

node ./node_modules/cypress/bin/cypress open  


The above command will open the cypress window

In the cypress window, click on first-test.js.  Tests will start executing.

How to run cypress tests

Once execution is complete, the results below will show up as output:

How to execute Cypress tests using Cypress command line AKA Cypress CLI

In the Visual Studio Code Terminal, enter the following command:

npx cypress runtest

Or 

node ./node_modules/cypress/bin/cypress run

On entering the command above, Cypress tests start executing locally. Once execution is finished it gives results in the Command line.

Running Cypress test locally

Alternatively, try this Cypress sample tutorial on using the CLI to run Cypress tests on BrowserStack.

How to Execute Cypress Tests on multiple environments(OS/Browser) using Browserstack

Bear in mind that Cypress testing must be executed on real browsers for accurate results. Start running tests on 30+ versions of the latest browsers across Windows and macOS with BrowserStack. Use instant, hassle-free parallelization to get faster results without compromising on accuracy. Detect bugs before users do by testing software in real user conditions with BrowserStack.

Let’s see how to execute Cypress tests on multiple platforms using BrowserStack.

Step 1: Install Browserstack node package 

npm install -g browserstack-cypress-cli

Step 2: Create browserstack.json

The browserstack.json is a JSON file that will hold the run configuration, which will be used to execute Cypress tests on the BrowserStack environment. This is the only additional file testers need to create.

In order to create browserstack.json

  • Navigate to the Project root folder (where cypress.json is located.
  • Create one more file named browserstack.json

Step 3: Configure browserstack.json to run Cypress tests on multiple platforms

Now, configure browserstack.json file. For this, testers need a BrowserStack username and access_key.

To get a BrowserStack username and access_key, follow the steps below:

  • Login to BrowserStack > Click on ACCESS KEY
  • The username and access_key will appear above the dashboard.
  • Copy those keys and add username and access key to the browserstack.json file as below:
    "auth": {

      "username""<user_name>",

      "access_key""<access key>"

    },


Configure browser details:

 This example will run Cypress tests on the following browser-device combinations:

  1. Windows 10 & Chrome browser (Latest version and Previous Version)
  2. OS X Mojave & Firefox browser (Latest version and Previous Version)
  3. OS X Catalina & Edge browser (Only latest version)

So, a total of 5 test runs must be configured. To accomplish that, testers must have the entries show below in their in browserstack.json file:

"browsers": [{

        "browser""chrome",

        "os""Windows 10",

        "versions": ["latest""latest - 1"]

      },

      {

        "browser""firefox",

        "os""OS X Mojave",

        "versions": ["latest""latest - 1"]

      },

      {

        "browser""edge",

        "os""OS X Catalina",

        "versions": ["latest"]

      }

    ],

 

Finally, the tester needs to mention run settings, which will include – the Cypress config file path, Cypress version, project name, build name and parallel runs.

Now, add the following entry to browserstack.json

  "run_settings": {

      "cypress_config_file""./cypress.json",

      "cypress_version""7",

      "project_name""My sandbox project",

      "build_name""Build no. 1",

      "parallels""5"

    }

 

On putting everything together, the final browserstack.json file looks as shown below:

{

    "auth": {

      "username""<user_name>",

      "access_key""<access_key>"

    },

    "browsers": [{

        "browser""chrome",

        "os""Windows 10",

        "versions": ["latest""latest - 1"]

      },

      {

        "browser""firefox",

        "os""OS X Mojave",

        "versions": ["latest""latest - 1"]

      },

      {

        "browser""edge",

        "os""OS X Catalina",

        "versions": ["latest"]

      }

    ],

    "run_settings": {

      "cypress_config_file""./cypress.json",

      "cypress_version""7",

      "project_name""My sandbox project",

      "build_name""Build no. 1",

      "parallels""5"

    }

  }

In Visual Studio Code IDE, it looks as shown below:

Cypres visual studio code

Now that browserstack.json is ready, let’s execute tests on BrowserStack.

Step 4: Execute your Cypress Tests on Browserstack

Executing Cypress tests on Browserstack is fairly simple.

  • Navigate to Visual Studio Code > Terminal > Enter the following command:
npx browserstack-cypress run --sync

On executing the command above, the Cypress tests start running. Users can see the test results in the BrowserStack dashboard.

  • Login to Browserstack >  Navigate to Dashboard

Cypress build and output

Click on a browser name, which will redirect to the page with test details.

Running Cypress Test Automation

A major advantage of running Cypress tests on BrowserStack is that it will record videos of test execution. Needless to say, this is immensely helpful when it comes to identifying and debugging unexpected errors or bugs.

With the many advantages Cypress provides, it is natural that QAs want to conduct tests using this particular automation framework. While it may seem slightly complicated at first, simply follow the steps outlined in this article, and Cypress testing will become a regular, easily accomplished task. 

Run Cypress Tests on Real Browsers

Tags
Automation Testing Cypress

Featured Articles

Getting Started with Cypress Installation for Test Automation

Cypress vs Selenium: Key Differences

How to Perform Online Debugging for Websites?

BrowserStack Logo Run Cypress Tests on 30+ Browser Versions Contact us Get Started Free