Page Object Model, commonly known as POM, is a popular pattern in any automation framework. Page Object Model can be applied in Cypress too. Page Object Model has many advantages in creating a framework for test automation, such as reducing code duplication and increasing maintainability and readability. Cypress provides us the flexibility to incorporate Page Object Model in the test script. In this article, we will look at creating a Page Object Model in Cypress step by step with examples.

Table of Contents:

• What is Page Object Model?
• Page Object Model Framework Architecture
• Advantages of using Page Object Model in Cypress
• Step By Step Page Object Model Cypress with Example
• Accessing the Page Objects in the Spec file
• How to use Fixtures as a Test Data Source in Page Object Model in Cypress?
• Accessing the values from the JSON file in the test case file
• Frequently Asked Questions

What is Page Object Model?

Page Object Model is a design pattern where the page objects are separated from the automation test scripts. Automation testing gives us many leverages that benefit us in testing; however, there are some outcomes such as code duplication and an increase in the risk of maintainability as the project grows. Let us understand the significance of POM with an example.

Consider we have multiple pages in our application like Login Page, Registration Page, and Book Flights page.

• The Login page contains all the web elements of the login functionalities
• The Registration contains all the methods and web elements of the registration process
• The Book flights contain the web elements of the flight booking page

There are three test cases, namely TC1, TC2, and TC3.

• TC1 contains the login test cases.
• TC2 contains login and registration test cases
• TC3 contains login, registration, and flight booking test cases

Now, the login page interacts with TC1.

Registration page needs to interact with TC1 and TC2, and

The flight booking page needs to interact with TC1, TC2, and TC3

As you can see, there are common functionalities between all three test cases. Instead of writing the methods and locators of login in all the test case files, we can have them separately and access them across the files. This way, the code is not repeated, and it is easily readable.

One of the best practices in coding is a concept called DRY. It means Do Not Repeat Yourself. As the full form clearly says, we should not repeat the lines of code again and again. To overcome this, Page Object Model plays an important role in best coding practices.

Page Object Model Framework Architecture

The page object model framework architecture is a proven architecture that can customize with simple methods. Today, almost all companies follow agile methodologies, which involve continuous integration, development, and testing. The automation testers maintain the test framework to work alongside the development process with the Page Object Model. It is a significant design pattern in maintaining the automation test framework as the code grows with new features.

The page object is a design pattern that is an object-oriented class that interacts with the pages of the application we are testing. Page Object comprises of Page Class and Test cases. Page class consists of methods and locators to interact with the web elements. We create separate classes for every page in the application. We will be creating individual methods for each functionality and access them in our spec file.

Advantages of using Page Object Model in Cypress

1. The methods are reusable across the whole project and easy to maintain when the project grows. The lines of code become less readable and optimized.
2. Page Object Pattern suggests that we separate the operations and flow that we are performing in the UI from verification steps. When we follow the POM pattern, we tend to write clean and easily understandable code.
3. With the Page Object Model, objects and test cases are independent of each other. We can call the objects anywhere across the project. This way, if we are using different tools like TestNG/JUnit for functional testing or Cucumber for acceptance testing, then it is easily accessible.

Step By Step Page Object Model Cypress with Example

This section will understand how to create a Page Object Model in Cypress with real-time examples that we can implement in projects. We will understand from the basic setup and step-by-step process for creating a Page Object Model.

Let’s discuss the scenario on which we will write the functions in this example.

1. Navigate to https://admin-demo.nopcommerce.com/ website
2. Enter valid username and password
3. Click on the Login Button
4. Validate the URL whether it is appended with /admin after login

We will be creating two files – one PageObject file and one spec file for this example. Let us begin!

Step 1: Open our project in VS code. Create a folder called PageObject under the integration folder. Under this folder, you can create page object files for any modules.

Step 2: Create a file named LoginPage.js under the PageObject folder. In LoginPage.js, we will be writing the methods that involve the login functionalities.

Step 3: Let’s start writing our first test method in the LoginPage.js file. We have to first create a class that we will be exporting in our spec file. We will call our class as LoginPage

class LoginPage {
}

Based on our pseudocode, our first step is to navigate to the URL. We will call our method as navigate(). Inside our navigate method, we shall add the cy.visit() function from Cypress.

 navigate() {
        cy.visit('https://admin-demo.nopcommerce.com/')
    }

Step 4: Now, we will have to enter the username in our email field. We will name our method as enterEmail(). First, we should get the locator of the email field and access them via cy.get() command. Then we will clear the field using the clear() command and add the username using the type() command. In our method, we pass a parameter username to pass the value in the spec file. This way, we are keeping it generic to access this method if a different email id is required.

enterEmail(username) {
        cy.get('[id=Email]').clear()
        cy.get('[id=Email]').type(username);
        return this
    }

Instead of writing the cy.get() command twice in the above code, we can simply loop them with the dot operator.

  enterEmail(username) {
        cy.get('[id=Email]')
            .clear()
            .type(username);
        return this
    }

You might have noticed return this in line 9. this indicates that the enterEmail method belongs to the particular LoginPage class. Basically, this represents the class.

Step 5: We have to create a method for passwords similar to our enterEmail method. We will call our password method as enterPassword(). Initially, we will get the locator for the password, clear the field and type the input value. We will pass a parameter to our method called pswd and access in the type() command.

enterPassword(pswd) {
    cy.get('[id=Password]')
        .clear()
        .type(pswd)
    return this
}

Step 6: Our last method would be to click on the login button. We shall name our method as submit(). We will get the locator and click the button using the click() method from Cypress.

 submit() {
        cy.get('[type=submit]').click()
    }

Step 7: Now, we have to export this class to use it across our spec file. For this, we just add one line outside our class, and we can easily access it in our spec file.

export default LoginPage

Hurray! We have created a Page Object file for our project. It was pretty simple and easy!

Accessing the Page Objects in the Spec file

Now let us move on to our test case file. We have to create a spec file in our integration folder. We shall call our spec file POMDemo.spec.js.

Step 1: To access our methods in the LoginPage.js file, we must import them into our spec file. We import by using the import statement. We should navigate to the LoginPage.js file by using ../

In our case, the path is ../integration/PageObject/LoginPage. So, the import statement will look something like the below.

import LoginPage from "../integration/PageObject/LoginPage"

Step 2: Since we use Mocha, we will write our test case inside describe() and it() block. describe() represents a test suite, and it() represents a test case. Both the blocks are a function and accept a string parameter that includes the description of the test.

describe("Cypress POM Test Suite", function () {
})

Inside the describe block, we will write our it() by adding the description as login with valid credentials.

it("Login with valid credentials", function () {
       
    })

Step 3: To access our methods from our Page object file, we should create an instance for our Login class. To create an instance for the login class, we must declare a variable and assign it to our class file using the new keyword. With the declared variable, we can easily access the methods from the Page object file.

                                               const login = new LoginPage();

Note: With the variable login, we can access the methods from the Page object class. When we start typing login. , the vscode will list the suggestions of all the methods available in the LoginPage.js file. This helps us to verify that we have exported and imported our class properly!

Step 4: Let us call our navigate() method to visit the URL. This is the first action in our test case.

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
    });
});

Step 5: We should enter the username in the email field. We access the enterEmail() with the login object. enterEmail() method accepts a parameter username. So we should pass the value for the username as a string in our spec file

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('[email protected]');
    })
})

Step 6: Similar to step 5, we should call our enterPassword() method by passing the password as a parameter in the string.

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('[email protected]');
        login.enterPassword('admin');
    })
})

Step 7: Next, we have to click on the login button. We will call the method submit() from our page object file.

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('[email protected]');
        login.enterPassword('admin');
        login.submit();
    })
})

Step 8: After logging in, we have to assert the URL. We will verify whether the URL is equal to the URL after login. For assertion, we will use the Chai assertion library, which is inbuilt with Cypress.

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('[email protected]');
        login.enterPassword('admin');
        login.submit();
        cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    })
})

The above image represents the login test case. We were able to write a test case with a Page Object Model with very few simple steps. Now let us run the test case and see the result.

We shall open the Cypress test runner and click on the spec file and run our test case. Check this article on how to open Cypress test runner.

Hurray! We have successfully written a test case that uses Page Object Model in Cypress. We can incorporate this pattern in real-time projects. There are many ways that we can write the methods in a page object file. I have shown you an example that is standard and works for any project. You can also write only the return function in the page object file and then click and type directly in our spec file.

We will see another pattern that we can use in the project. This method will also work perfectly fine.

In this type, we will be returning only the locator function in our method and perform actions in the test file. We will write code for the same scenario we saw above.

Page Object – LoginPage.js

class LoginPage {
    navigate() {
        cy.visit('https://admin-demo.nopcommerce.com/')
    }
    enterEmail() {
        return cy.get('[id=Email]')
    }
    enterPassword() {
        return cy.get('[id=Password]')
    }
    submit() {
        return cy.get('[type=submit]')
    }
}
export default LoginPage

As we saw above, we are writing only the locator inside our function and returning them. The return represents that the particular method belongs to the class LoginPage.js. We are not adding any actions in our methods.

Spec File – POMDemo.spec.js

We will look into the example of accessing the methods in the spec file.

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail().clear()
        login.enterEmail().type('[email protected]');
        login.enterPassword().clear()
        login.enterPassword().type('admin');
        login.submit().click();
        cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    });
});

Here, we call the method from the PageObject file and perform the test case actions. So first, we are calling our reference variable login and then appending it with the method enterEmail() and finally appending the action type. In our type(), we are passing the username value.

As you can see, all the commands have been executed, and the test case has passed!

You can choose whichever Page Object Model suits your project and your opinion. There is no particular rule to stick to only one procedure.

How to use Fixtures as a Test Data Source in Page Object Model in Cypress?

In our Page Object Model examples, we passed the username and password value directly in either the Page Object file or directly in the test case file. This section will understand how to use fixtures in Cypress to keep the data safe and not exposed. We should try to keep all the credentials and data in one file and access them. This way, it is easy to maintain, and sensitive data like username and password are not exposed. This method is also one of the procedures that we need to follow in Page Object Pattern.

As discussed earlier, Fixture helps store data in a JSON file or excel file, or an external library like Apache POI. We will use these data by creating a variable and access them in our spec file. Let us understand with an example.

Cypress provides a folder called “fixtures.” We will create a JSON file called credentials.json under the ‘Fixtures’ folder.

Let us declare our username, password, and URL values that we need to validate in a JSON format in the credentials.json file.

{
    "username" : "[email protected]",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Accessing the values from the JSON file in the test case file

As we have defined the values in our JSON file, we will access them in our test case file using Fixtures from Cypress. We will access the JSON value with this keyword. Let’s wrap the fixture function in a before() block.

describe("Cypress POM Test Suite", function () {
 
before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
})

cy.fixture(‘credentials’).then(function (testdata) { this.testdata = testdata }) – this line represents that we are passing the credentials.json file as a parameter to our cy.fixture() command. Here, we are not required to pass whether it is a JSON file. Just pass the file name alone. Later, we pass testdata as a parameter in the function and access the testdata variable using this.

/// <reference types="cypress" />
import LoginPage from "./PageObject/LoginPage"
describe("Cypress POM Test Suite", function () {
    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail(this.testdata.username)
        login.enterPassword(this.testdata.password)
        login.submit();
        cy.url().should('be.equal', this.testdata.adminUrl)
    });
});

login.enterEmail(this.testdata.username) – This will fetch the username value from the credentials.json file and fill it into the email field.

login.enterPassword(this.testdata.password) – This will fetch the password value from the credentials.json file and fill it into the password field

cy.url().should(‘be.equal’, this.testdata.adminUrl) – This will get the adminUrl from the credentials.json file and validate in the assertion

Now, let us run the test case for the result.

As we can see, the test cases have been executed and have passed. This example will help you to write a basic Data-driven test case. You can incorporate it in your project using this method. You can create new JSON files under the Fixture folder, add values related to test data, and access it across any test file.

Frequently Asked Questions

Does Cypress support Page Object Model?

Of course. Cypress gives all the flexibility to play around with pages and objects in the repository. It is easy to implement.

Which Page Object Model should I use from the above examples?

There is no particular rule to stick to only one way of Page Object Model. You can use any model that has been discussed above. You are free to customize the model according to your project.

Why should I use fixtures in the Page Object Model in Cypress?

Fixture helps store sensitive data like username, password, and URLs in a separate file like JSON or excel. This ensures the application’s security and access them easily in any files across the project. To access the JSON file, we use fixtures to use it in our spec file.

In our previous article, we saw the configurations in Cypress and various options that can be configured in JSON files. This article will understand Cypress Promise and Cypress Asynchronous behaviour with hands-on implementation and examples in our project. We will also discuss how to incorporate awaits in our asynchronous code and some essential functions like wrap() and task(). Let’s get started!

Cypress Promise and Cypress Asynchronous:

Cypress Promise and Cypress Asynchronous nature are some of the essential concepts. Like any other Javascript framework, Cypress also revolves around Asynchronous and Promises. Cypress handles all the asynchronous behaviour internally, and it’s hidden from the user. We will use .then() to handle promises manually in our code. There are external packages like Cypress-promise in npm where we can manipulate the Cypress asynchronous behaviour. We will discuss each of these topics in detail.

Table of Contents

Cypress Asynchronous

As we know, Cypress is based on Node JS. Any framework that is written build from Node.js is asynchronous. Before understanding the asynchronous behavior of Cypress, we should know the difference between synchronous and asynchronous nature.

Synchronous nature

In a synchronous program, during an execution of a code, only if the first line is executed successfully, the second line will get executed. It waits until the first line gets executed. It runs sequentially.

Asynchronous nature

The code executes simultaneously, waits for each step to get executed without bothering the previous command’s state. Though we have sequentially written our code, asynchronous code gets executed without waiting for any step to complete and is completely independent of the previous command/code.

What is asynchronous in Cypress?

All Cypress commands are asynchronous in nature. Cypress has a wrapper that understands the sequential code we write, enqueues them in the wrapper, and runs later when we execute the code. So, Cypress does all our work that is related to async nature and promises!

Let’s understand an example for it.

 it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') // No command is executed
        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img') // Nothing is executed here too
            .click() // Nothing happens yet
        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
    });
        // Now, all the test functions have completed executing
        // Cypress had queued all the commands, and now they will run in sequence

That was pretty simple and fun. We now understood how Cypress Asynchronous commands work. Let us dive deeper into where we are trying to mix sync and async code.

Mixing Cypress Synchronous and Asynchronous commands

As we saw, Cypress commands are asynchronous. When injecting any synchronous code, Cypress does not wait for the sync code to get executed; hence the sync commands execute first even without waiting for any previous Cypress commands. Let us look into a short example to understand better.

 it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') 
        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .click() 
        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
        console.log("This is to check the log")  // Log to check the async behaviour
    });
});

The log is added at the end of the code, which is a sync command. When we run the test, you can see that the log has been printed even before the page is loaded. This way, Cypress does not wait for the synchronous command and executes it even before executing its commands.

If we want them to execute as expected, then we should wrap it inside the .then() function. Let us understand with an example.

it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/') 
        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .click() 
        cy.url() // No commands executed here too
            .should('include', '/technology') // No, nothing.
        .then(() => {
            console.log("This is to check the log")  // Log to check the async behaviour
        });
    });

What is Cypress Promise?

As we saw above, Cypress enqueues all the commands before execution. To rephrase in detail, we can say that Cypress adds promises(commands) into a chain of promises. Cypress sums all the commands as a promise in a chain.

To understand Promises, compare them with a real-life scenario. The explanation defines the Promise in asynchronous nature too. If someone promises you, they either reject or fulfill the statement they made. Likewise, in asynchronous, promises either reject or fulfill the code we wrap in a promise.

However, Cypress takes care of all the promises, and it is unnecessary to manipulate them with our custom code. As a Javascript programmers, we get curious about using awaits in our commands. Cypress APIs are completely different than we are used to generally. We will look into this a later part of this tutorial in depth.

States of Cypress Promises

Promises have three different states based on the Cypress commands. They are

• Resolved – Occurs when the step/ command gets successfully executed.
• Pending – State where the execution has begun, but the result is uncertain.
• Rejection – Occurs when the step has failed.

As a Javascript programmer, we tend to write promises in our code and return them. For example,

//This code is only for demonstration
describe('Cypress Example ', function () {
    it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/')
        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .then(() => {
                return cy.click();
            })
        cy.url() 
            .then(() => {
                return cy.should('include', '/technology') 
            })
    });
});

Here, we are returning promises to each of the commands. This is not required in Cypress. Fortunately, Cypress takes care of all the promises internally,and we don’t need to add promises in each step. Cypress has the retry-ability option, where it retries for a particular amount of time for executing the command. We will see an example of a code without including promises manually.

    it('click on the technology option to navigate to the technology URL', function () {
        cy.visit('https://lambdageeks.com/')
        //click on the technology option
        cy.get('.fl-node-5f05604c3188e > .fl-col-content > .fl-module > .fl-module-content > .fl-photo > .fl-photo-content > a > .fl-photo-img')
            .click()
        cy.url()
            .should('include', '/technology')
    });
});

The above code is not clumsy and is easy to read and understand. Cypress handles all the promise work, and it is hidden from the user. So we don’t have to worry about handling or returning the promises anywhere!

How do you use await in Cypress?

As discussed above, Cypress has its way of handling asynchronous code by creating a command queue and running them in sequence. Adding awaits to the commands will not work as expected. Since Cypress is handling everything internally, I would recommend not adding awaits to the code.

If you need to add awaits, you can use a third-party library like Cypress-promise that changes how Cypress works. This library will let you use promises in the commands, and use await in the code

Let us understand the ways to use awaits and how not to use them.

You should not use awaits like this

//Do not use await this way
describe('Visit the page', () => {
  (async () => {
     cy.visit('https://lambdageeks.com/')
     await cy.url().should('include', '/technology');
  })()
})

Instead, you can use like this

describe('Visit the page', () => {
  cy.visit('https://lambdageeks.com/').then(async () => await cy.url().should('include', '/technology') ())
})

This will work for any Cypress commands.

Cypress Wrap

wrap() is a function in Cypress that yields any object that is passed as an argument.

Syntax

cy.wrap(subject)
cy.wrap(subject, options)

Let us look into an example of how to access wrap() in our code.

const getName = () => {
  return 'Horse'
}
cy.wrap({ name: getName }).invoke('name').should('eq', 'Horse') // true

In the example, we are wrapping the getName and then invoke the name for it.

Cypress Wrap Promise

We can wrap the promises that are returned by the code. Commands will wait for the promise to resolve before accessing the yielded value and. then proceed for the next command or assertion.

const customPromise = new Promise((resolve, reject) => {
  // we use setTimeout() function to access async code.
  setTimeout(() => {
    resolve({
      type: 'success',
      message: 'Apples and Oranges',
    })
  }, 2500)
})
it('should wait for promises to resolve', () => {
  cy.wrap(customPromise).its('message').should('eq', 'Apples and Oranges')
});

When the argument in cy.wrap() is a promise, it will wait for the promise to resolve. If the promise is rejected, then the test will fail.

Cypress-promise npm

If we want to manipulate the promises of Cypress, then we can additionally use a library or package called Cypress-promise and incorporate it in our code. This package will allow you to convert a Cypress command into a promise and allows you to await or async in the code. However, these conditions will not work before or beforeEach the blocks. Initially, we should install the package in our project by passing the following command in the terminal.

npm i cypress-promise

Once installed, the terminal will look something like this.

After installation, we should import the library into our test file.

import promisify from 'cypress-promise'

With this library, you can create and override the native Cypress promise and use awaits and async in the code. You should access the promise with the promisify keyword. Let us look into an example for the same.

import promisify from 'cypress-promise'
it('should run tests with async/await', async () => {
    const apple = await promisify(cy.wrap('apple'))
    const oranges = await promisify(cy.wrap('oranges'))
    expect(apple).to.equal('apple')
    expect(oranges).to.equal('oranges')
});

This was very simple and fun to learn! This way, you can assign asynchronous code in Cypress.

Cypress Async Task

task() is a function in Cypress that runs the code in Node. This command allows you to switch from browser to node and execute commands in the node before returning the result to the code.

Syntax

cy.task(event)
cy.task(event, arg)
cy.task(event, arg, options)

task() returns either a value or promise. task() will fail if the promise is returned as undefined. This way, it helps the user capture typos where the event is not handled in some scenarios. If you do not require to return any value, then pass null value.

Frequently Asked Questions

Is Cypress Synchronous or Asynchronous?

Cypress is Asynchronous by returning the queued commands instead of waiting for the completion of execution of the commands. Though it is asynchronous, it still runs all the test steps sequentially. Cypress Engine handles all this behavior.

Is it possible to catch the promise chain in Cypress?

Cypress is designed in a way that we will not be able to catch the promises. These commands are not exactly Promises, but it looks like a promise. This way, we cannot add explicit handlers like catch.

We will discuss the JSON structure, examples, and detailed hands-on experience to write JSON in our code. But, first, let’s dive into our article!

What is Cypress Json: Example, Schema, Detailed Hands-On Analysis

In our previous article, we discussed variables and aliases and how to write our first test case. Now, we will discuss Cypress JSON and how to incorporate it into our code.

Table of Contents

• Cypress JSON File
• Default JSON Options
• Global Options
• Cypress JSON Timeout
• Cypress Read JSON File
• Screenshot and Video Options
• Viewport and Actionability
• Cypress JSON Example
• Cypress Fixture JSON Array
• Cypress env JSON
• Cypress JSON Reporter
• Cypress package-lock.json

Cypress JSON File

As we saw earlier, the first time we open our Cypress Test Runner, it creates a cypress.json file. This file is used to pass any configuration values we require. So first, we will look into the options that we can pass in our cypress.json file.

Default JSON Options

Certain options are set by default in Cypress. However, we can customize them according to our project. To identify the default values set by Cypress, navigate to the Settings folder in our Cypress Test Runner. From there, expand the Configuration option to view the default options set by Cypress.

The options are the default configurations provided by Cypress.

{
animationDistanceThreshold:5
baseUrl:null
blockHosts:null
browsers:Chrome, Firefox, Electron
chromeWebSecurity:true
component:{}
componentFolder:"cypress/component"
defaultCommandTimeout:4000
downloadsFolder:"cypress/downloads"
e2e:{}
env:null
execTimeout:60000
experimentalFetchPolyfill:false
experimentalInteractiveRunEvents:false
experimentalSourceRewriting:false
experimentalStudio:false
fileServerFolder:""
firefoxGcInterval:runMode, openMode
fixturesFolder:"cypress/fixtures"
hosts:null
ignoreTestFiles:".hot-update.js" includeShadowDom:false integrationFolder:"cypress/integration" modifyObstructiveCode:true nodeVersion:"default" numTestsKeptInMemory:50 pageLoadTimeout:60000 pluginsFile:"cypress/plugins" port:null projectId:"hpcsem" redirectionLimit:20 reporter:"spec" reporterOptions:null requestTimeout:5000 responseTimeout:30000 retries:runMode, openMode screenshotOnRunFailure:true screenshotsFolder:"cypress/screenshots" scrollBehavior:"top" supportFile:"cypress/support" taskTimeout:60000 testFiles:"/.*"
trashAssetsBeforeRuns:true
userAgent:null
video:true
videoCompression:32
videosFolder:"cypress/videos"
videoUploadOnPasses:true
viewportHeight:660
viewportWidth:1000
waitForAnimations:true
watchForFileChanges:true
}

Options

We can change the default options of Cypress by passing any arguments that are compatible with our project. As the name suggests, cypress.json is a JSON file, so we have to pass our arguments in JSON format. In our VS code, you could see that the cypress.json is empty with no arguments passed to it. Now let us see the different options that we can pass in our JSON file.

Global Options

We can pass the global options to arguments that need to be accessed globally. For example, in the table below, the Options column represents the keyword we will be passing in our JSON file; Default indicates the default value of the particular option set by Cypress, and Description indicates the meaning of the option.

Option	Default	Description
baseUrl	null	We can set the URL globally instead of passing in each file. It can be used for cy.visit() or cy.request() commands
clientCertificates	[]	You can use this option for configuring client certificates on a URL basis
env	{}	You can pass any environment variables as a value. This option will be useful if we are testing our application in different environments like staging or production.
watchForFileChanges	true	This option checks whether Cypress watches and restarts tests on any file changes are made.
port	null	We can pass the port number on hosting Cypress. A random port is generated, but we can add the port number we require.
numTestsKeptInMemory	50	This option is the number of test snapshots and commands data that are stored in memory. If there is high memory consumption in the browser during a test run, we can reduce the number.
retries	{ "runMode": 0, "openMode": 0 }	This option is to specify the number of times to retry a test that is failing. We can configure it separately for cypress run and cypress open.
redirectionLimit	20	We can configure the limit for the number of times the application can be redirected before an error occurs.
includeShadowDom	false	The ability to navigate inside the Shadow DOM to interact with elements. By default, it is set to false. If our application has any element requiring shadow root navigation, you can set it to true.

Cypress JSON Timeout

Timeout is one of the most important concepts in any automation framework. Cypress provides a variety of options that helps in handling timeouts in our scripts. First, we will look into the options that we can configure.

Option	Default	Description
defaultCommandTimeout	4000	This option is to wait for the DOM Elements-based commands to load. This is in milliseconds.
requestTimeout	5000	Time, in milliseconds, to wait until the request of cy.wait() command to go timeout.
responseTimeout	30000	This timeout is to wait until a response in a series of commands such as  cy.request(), cy.wait(), cy.fixture(), cy.getCookie(),  cy.getCookies(), cy.setCookie(), cy.clearCookie(), cy.clearCookies(), and cy.screenshot() commands
taskTimeout	60000	Timeout, in milliseconds, for the completion for the execution of cy.task() command
execTimeout	60000	This time in milliseconds is to wait to finish execution of the cy.exec() command, which is the completion of the system command
pageLoadTimeout	60000	This timeout waits for page navigation events or commands that interact with the pages like cy.visit(), cy.go(), cy.reload()

Cypress Read JSON File

Sometimes, we will require to interact with the folders or files in our project. To interact, we have to set certain options in our cypress.json file to manipulate the files. So, first, let us look into the options available in our folders/ files configuration.

Option	Default	Description
downloadsFolder	cypress/downloads	This is the path where the files are downloaded and stored during a test run
fixturesFolder	cypress/fixtures	This is the path to the folder that contains the fixture files. We can pass false to disable storing the files.
ignoreTestFiles*.hot-update.jsYou can pass this as a string or array of global patterns to ignore test files for the test run. However, it would be displayed in the test files.
integrationFolder	cypress/integration	Integration test files are stored in this path to the folder.
pluginsFile	cypress/plugins/index.js	This path is where the plugins are stored. You can pass the argument as false to disable this configuration.
screenshotsFoldercypress/screenshotsScreenshots from the execution of cy.screenshot() command and test failure during cypress run are stored in this foldersupportFilecypress/support/index.jsHere the test files that load before the test are stored. You have the option to disable by passing false
testFiles	**/*.*	Path to the test files that need to be loaded. It is either a string or array of global patterns.
videosFolder	cypress/videos	Folder path which will store videos during test execution

Screenshots and Video Options

We can configure our snapshots and videos in our cypress.json() file, and Cypress provides us some options to customize our configuration.

Option	Default	Description
screenshotOnRunFailure	true	Option to set to either true or false whether Cypress takes a screenshot during test failure when cypress runs. It is set to true by default
trashAssetsBeforeRuns	true	This option is to trash assets in the videosFolder, downloadsFolder and screenshotsFolder before every cypress run
videoCompression	32	This option is the quality of the video compression measured in the Constant Rate Factor(CRF). By passing false, you can also disable this option. You can pass values from 0 to 51, where the lowest value gives better quality.
videosFolder	cypress/videos	The folder where the video of the tests is saved.
video	true	Boolean value to capture the video of the test execution with cypress run.
videoUploadOnPasses	true	This option is to upload the videos to the Dashboard when all the test cases in a spec file are passing.

Viewport and Actionability

You can configure and pass values to change the viewport height and width with the options provided by Cypress. Actionability options can also be configured.

Option	Default	Description
viewportHeight	660	This is to provide the default height for the application in pixels. We can override this command with cy.viewport()
viewportWidth	1000	Option for the viewport width in pixels for the application. Can be overridden with cy.viewport() command.
animationDistanceThreshold	5	The threshold value for the distance measured in pixels where an element must exceed considering the time for animating.
waitForAnimations	true	Option to wait for the elements to complete the animation before performing any commands.
scrollBehavior	top	This is a viewport option that must scroll to an element just before performing any commands. Available options are 'center', 'top', 'bottom', 'nearest', or false, wherein false disables the scrolling.

Cypress JSON Example

Earlier, we saw the different configurations we can pass in our cypress.json file. Now, we will look into an example of how to use them in our project.

Overriding default values in the cypress.json file

In our VS code, open the cypress.json file. We will override the defaultCommandTimeout command to 8000.

{
    "defaultCommandTimeout" : 8000
}

This is how it looks in our VS code project.

By changing the cypress.json file, it applies to the whole framework. We can verify by navigating to our Cypress settings. It has changed from a default value of 4000 to 8000

Overriding default values via the test script

We can manipulate the default values via our test script too. Instead of passing in the cypress.json file, we will pass it in our test file.

//Changing the timeout from 4 seconds to 8 seconds
Cypress.config('defaultCommandTimeout',8000)

// Test code
cy.get('#username').type(users.email)
cy.get('#pswd').type(users.password)
cy.get('#login_btn').click()

This way, we can override default values in our test file. However, this does not impact any configuration changes on the framework level. Cypress gives priority to the values in cypress.json. Lastly, it takes up the global configurations.

Cypress Fixture JSON Array

Cypress cy.fixture() is a function that loads a fixed set of data in a file. We can use the fixture as a JSON to load any values or array in the JSON file. First, let’s understand how to access the JSON file in our project.

My JSON file has two properties: username and password. My JSON file name is examples.json.

{
"email": "[email protected]",
"password" : test123
}

In our spec file, we will access our fixture with the cy.fixture() command and the concept of aliases.

 cy.fixture('example.json').as('example')

 //Using the alias name to this keyword, So we can use globally  
        const userObj = this.userData
//looping our .json data with a new variable users
         cy.get(userData).each((users) => 
         {
              //Write the test code.
        cy.get('#username').type(users.email)
        cy.get('#pswd').type(users.password)
          }       

Cypress env JSON

Environment variables are used across many projects in organizations. We use environment variables

• when values are dynamic across different machines
• when we want to test under different environments such as staging, testing, development, production/live

These cases require us to define environment variables. However, if we set an env variable in one spec file, it is not reflected across other spec files. This is because Cypress runs each spec files independently. This way, we will need to configure env variables separately.

We access our environment files from our Cypress JSON file, i.e., cypress.json file. So we will be required to assign the option in our cypress.json file and used it across our spec file. So let us dive into our example.

We can set our environment variables in our configuration file or cypress.env.json file.

Setting environment variable in cypress.json file

We set the env property by a key-value pair. Any values passed under the keyword env fall under environment variables, and Cypress takes the argument from the env keyword. The syntax looks like the below.

{
  "env": {
    "key1": "value1",
    "key2": "value2"
  }
}

If we want to access the env variable in our spec file, we assign them as mentioned below.

Cypress.env() //returns both the key1,value1 and key2, value2

Cypress.env(key1) //returns only the value1

We will add the env configuration in our project and will access them in our spec file. In our cypress.json file, add the following configuration. We are setting our URL property and assigning them to our URL. Here, URL is the key, and https://lambdageeks.com/technology/ is the value.

{
  "env" : {
      "url" : "https://lambdageeks.com/technology/"
    }
}

As we have declared the configuration, we will access them in our spec file. It looks something like below. As mentioned above, we will be using Cypress.env() method to access the env variable.

// type definitions for Cypress object "cy"
// <reference types="cypress" />

describe('Cypress Example ', function () {

    it('accessing the environment variable', function () {

        //Calling URL from cypress.json
        cy.visit(Cypress.env('url'));

    })
})

Setting environment variable in cypress.env.json file

We can assign our environment variable in our cypress env JSON file. For that, we should create a new file called cypress.env.json at the root of the project. We will not require the env keyword; instead, we can directly access them by passing the key-value pair.

{
    "key1": "value1",
    "key2": "value2"
}

Let us look into how to assign them in our cypress.env.json file.

{
    "url" : "https://lambdageeks.com/",
    "urlTechnology" : "https://lambdageeks.com/technology/"
}

As you see above, we have created a new file, cypress.env.json, and added our URL properties. The way of accessing the environment variables would be the same as mentioned above in the previous section.

Cypress JSON Reporter

As we know, Cypress is built on top of Mocha; any reporters that are built for Mocha can be used. We can configure reporter in our JSON file globally in our cypress.json file.

reporter	spec	Here, you can specify the reporter that should generate during the cypress run. It is set to spec as the default reporter.
reporterOptions	null	This is to specify the supported options for the reporter.

The options mentioned above are the configurations set in reporter by default. In addition, the spec reporter is set by default. Thus, in the reporter, we can set any reporter that is compatible with Mocha. reporterOptions is to specify the supported options depending on the reporter we are configuring.

Let’s see how to configure the reporter in our cypress.json file.

Let us consider the multi reporter mochawesome as our reporter. We will first install the reporter and add them to our cypress.json file.

npm install --save-dev mocha cypress-multi-reporters mochawesome

Install the reporter by passing the above command in the command line. Now, in our cypress.json file, add the following property.

"reporter": "cypress-multi-reporters",
  "reporterOptions": {
      "reportDir": "cypress/reports/multireports",
      "overwrite": false,
      "html": false,
      "json": true
    }

We will understand each of the properties in detail.

reporter: The name of the reporter which we are configuring in our project

reportDir: The directory where we are going to output our results.

overwrite: This flag asks for overwriting the previous reports.

html: Generates the report on the completion of the test.

json: Whether to generate a JSON file on test completion.

Cypress package-lock.json

The package-lock.json file is created automatically for any operations when npm modifies the node modules or the package.json file. When we add any options or install any new dependencies to our Cypress package JSON file, then Cypress package-lock.json gets updated automatically.

Cypess package.lock JSON file traces every package and its version so that the installs are maintained and updated on every npm install globally. So in our Cypress package JSON file, when we update the version or add any dependency, package-lock.json also gets updated, and we don’t want to make any alterations to it.

In this tutorial, we will discuss the Cypress Automation Framework in detail. We will be covering what Cypress is, how it is different from other testing frameworks, the architecture of Cypress, and the installation procedure in this article. Cypress is an exciting topic and is fun to learn too. Let’s begin!

Cypress Automation Framework

Cypress Automation Framework is a pure Javascript-based testing tool that mainly focuses on front-end testing in modern web applications. With Cypress, applications are easy to test with the visual interface to witness the test execution. Thus, Cypress comes as a boon for both developers and QA engineers by making script writing and test execution easy. In addition, it comes with a distinctive test runner, which makes DOM manipulation easy and runs directly on the Browser.

Table of Content

What is Cypress?

Cypress is faster, better and provides definitive testing that runs on a browser.Cypress is mainly compared with Selenium, but it is completely different. Cypress does not run on top of Selenium, which means it is completely independent. Instead, Cypress runs on top of Mocha, which is again a Javascript-rich test framework. It is compatible with only the Chai Assertion Library, which can access a wide range of BDD and TDD assertions.

Cypress mainly focuses on three different types of testing. They are End-to-End tests, Unit tests, and Integration tests. Cypress can execute any tests that can run in a browser. In addition, it comes along with different mocking capabilities and validations that are enthralled towards front-end testing.

The browsers that Cypress supports are Chrome, Firefox, Edge, Electron, and Brave. Moreover, cross-browser testing is easily achievable with Cypress. Finally, though Cypress supports only Javascript, it can also be written with Typescript, primarily written with Javascript.

Cypress Automation

Cypress is an open-source tool with a free Test runner but has pricing ranging for teams and businesses where they charge you for the Dashboard. However, Dashboard is free up to some extent, unless you additional features like Flake detection, Email support, Jira integration, and many more.

Cypress is mainly used to automate scripts on the web(can automate anything that runs on a browser). It can never run on native mobile apps but can automate some of the functionalities of the mobile applications if those are developed in a browser.

Features

There are many awesome features available in Cypress that stand out from any other automation tool. Here, let’s discuss some of the main features, and we’ll get introduced to other parts later once we begin writing our test cases!

1. Automatic waiting – Cypress has the advantage of automatic waiting. We will never need to add force waits and sleeps for waiting for the DOM to fetch the element. Cypress automatically waits for any interaction with elements and execution of assertions. Thus, tests are fast!
2. Time travel – Cypress captures screenshots during test execution. We can view the results visually in real-time by just hovering on the executed commands in the Dashboard. This way, the tests are easier to debug
3. Debugging tests – Cypress can debug tests from popular tools like Developer tools. The errors are readable, and stacks are easily traceable.
4. Stub requests – Cypress has options to confirm and control function behaviors, network responses, or timers used by stubs and spies.
5. Continuous Integration – Cypress does not depend on any other additional CI services. However, on running the command for the test, integration is easily accessible.

Myth about Cypress

There is a myth that Cypress can run only on Javascript-friendly web applications. However, Cypress can test any web applications built with Django, Ruby on Rails, Laravel, etc. In addition, Cypress supports any of the programming languages such as PHP, Python, Ruby, C#, etc. However, we write our tests in Javascript; beyond that, Cypress works on any application.

Components of Cypress

There are two main components in Cypress. They are Test Runner and Dashboard.

Test Runner – Cypress provides this unique test runner, where the user can view the commands during execution and application under test.

There are few subcomponents under Test runner. They are

1. Command Log – This is a visual representation of the test suite. You can see the commands executed in the test, the assertion details, and the test blocks.
2. Test Status menu – This menu shows the number of test cases that passed or failed and the time taken for execution.
3. URL Preview – This gives you information about the URL you are testing to keep track of all the URL paths.
4. Viewport sizing – You can set the app’s viewport size for testing different responsive layouts
5. App Preview – This section displays the commands that run in real-time. Here you can use Devtools to debug or inspect each base.

Dashboard: Cypress Dashboard gives the ability to access the tests that are being recorded. With Dashboard service, we can witness the number of passed, failed, or skipped tests. Also, we can view snapshots of the failed tests by using cy. screenshot() command. You can also witness the video of the entire test or the clip of the failed tests.

Cypress Architecture

Most of the testing tools run on the server outside the Browser and execute commands over the network. But, Cypress runs on the Browser where the application is also running. This way, it can access all the DOM elements and everything inside the Browser.

Node server runs behind the Cypress on the client-side. Thus, the node server and Cypress interact with each other, accompany and carry out tasks to support the execution. Since it has access to both the front and back end, the responsiveness to the application in real-time during execution is well accomplished and can also perform tasks that even run outside the Browser.

Cypress also interacts with the network layer and captures commands by reading and changing the web traffic. Finally, Cypress sends HTTP requests and responses from the node server to the Browser. Since Cypress operates in the network layer, it helps to modify the code that might interfere with the automation of the web browser. The communication between the Node server and Browser is via the WebSocket, which begins execution after the proxy is started.

Cypress controls all the commands that run in and out of the browsers. Since it is installed in a local machine, it directly interacts with the operating system to record videos, capture snapshots, accesses the network layer, and performs file system operations at ease. Cypress can access everything from DOM, window objects, local storage, network layer, and DevTools.

Install Cypress

This section will discuss the installation process that needs to be followed before writing our test cases. There are two different ways to download Cypress. They are

1. Install via npm
2. Direct Download

Before we install Cypress, we might need a few pre-requisites to kick start to install via npm. Let’s see them in detail.

Pre-requisites

We will require certain pre-requisites before writing our test cases.

• As discussed above, Cypress runs on a node server; hence we will have to install Node.js.
• Also, to write our test cases, we need a code editor or IDE.

In this example, we will be using Visual Studio Code. So let’s dive into the details.

Node.js Installation in Mac

Here, we shall discuss the steps to download Node.js in Mac. Navigate to https://nodejs.org/en/download/. You will now land on the download page.

1.Click on the macOS Installer. On clicking, You can find a package file downloaded below. Click on the pkg file to install Node.js

2. Once you click the .pkg file, the Node installer will open. The introduction section gives you the Node.js and npm versions. Click on Continue

3. Click on Agree Button and then Continue. A pop-up will appear to allow access to your files in the Download folder. Click on Ok.

4. In this section, you can select the destination to which Node.js has to be downloaded. Again, you can choose according to your system space. Here I am choosing the default location.

5. Click on the Install button. Once you click, a pop-up asking your system password would arise. Enter your password and click on Install Software.

6. Hurray! We have installed Node.js and npm package. Click on Close to finish installing.

Visual Studio Code Installation in Mac

We have successfully installed Node.js. Now let us install our code editor Visual Studio Code. VS code is a powerful tool that has all the in-built functionalities of Javascript. So let’s dive into the installation steps of Visual Studio Code.

Here we will discuss the steps to download VS code in Mac. First, navigate to https://code.visualstudio.com/download to land on the download page of VS code.

1. Click on the Mac icon. You can see a package getting downloaded below.

2. Click on the downloaded file to unzip the package. Once unzipped, you can find the Visual Studio Code in your Downloads in Finder.

3. Hurray! We have downloaded our Code editor. Click on the icon to open Visual Studio Code.

Creation of a new Cypress project

We will now see how to create a new node project in our Visual Studio Code. Once you click on the VS code icon, you will land on the Welcome page. Next, click on the Add Workspace folder to create a new folder.

Once you click on the folder, you will get a pop-up asking to add a new folder. Now click on the location you want to add the workspace. Next, click on New Folder and Add the Folder name as CypressProject and click Open.

Now we have created a folder for our Cypress test. Before we begin writing our tests, we should install the package.json file. Before installing, let us understand what is package.json file.

What is Package.json file?

Package.json comprises all the npm packages in a file, usually located in the project root. It is commonly located in the root directory of the Node.js project. This file holds all the applicable metadata necessary for the project. It gives all the information to npm and helps in identifying the project and handle dependencies. Package.json file contains information such as project name, versions, license, dependencies, and many more.
Now we have understood what is package.json file. So, let’s begin the steps to download the file in our Visual Studio code.

1. To execute our commands, we need to open the Terminal. On the top of the VS code, click on the Terminal. Once the dropdown opens, click on New Terminal.

2. Once the terminal opens, type the below command in the project directory and press Enter.

npm init

3. Once you press Enter, you can see the certain information displayed. You can type the required details in the Terminal and press Enter to obtain all the fields.

• Package name: You can provide any name to your package. I have left it blank as it is pre-populated with the folder name we created.
• Version: This gives the information of the version of npm. You can skip this and press Enter.
• Description: Here, you can give a piece of additional information to the package. If required, you can type the description and press Enter again.
• Entry point: This represents the entry point of the application. Since it is pre-populated with index.js, we can skip this field and press Enter.
• Test command: Command that is given to run the test. Here it is not necessary to give any commands, but if required, you can definitely provide any command.
• Git repository: This field requires the path to the git repository. You can leave this field blank as well.
• Keywords: Unique keywords to help identify the project. You can skip this field too.
• Author: This is usually the username of the person. You can add your name and press Enter.
• License: License is pre-populated with ISC. You can proceed by pressing Enter.

• 4. Once you press Enter, Terminal will ask for confirmation by listing all the details you provided. Type Yes and press Enter again.

We have now generated a package.json file. You can view the file in your code editor with the information we provided.

Installation steps of Cypress

We have installed all the pre-requisites for our Cypress download, node, and initialized npm. As mentioned above, there are two ways to download Cypress.

Download Cypress via npm

You will have to pass the below-mentioned command in the Terminal to install Cypress. In addition, you will have to give the command in the project directory to install the node and generated the package.json file.

npm install cypress --save-dev

Once you pass the command, it will download all the relevant dependencies required for the project. At the writing of this article, the latest version of Cypress is 7.7.0. The version might differ at the time you are downloading.

With reference to the above image, you can see that we have downloaded Cypress. You can verify by the downloaded representation in Terminal and the addition of devDependencies in the package.json file.

Direct Download

We can download Cypress directly from their CDN if you are not using the Node or npm package in the project. However, recording the tests in the Dashboard is not possible via direct download.

You can download by clicking on download Cypress directly from this link. This will now directly download the package. Once the package is downloaded, open the zip file and double click. Cypress will run without the need for any installation of dependencies. This download will always pick up the latest version based, and the platform will be detected automatically. However, downloading Cypress via npm is recommended rather than a direct download.

For more post on Technology, please visit our Technology page.