8 Components of Best Cypress Automation Framework

Introduction

In this post, we will discuss key important components of a good cypress automation framework. We will discuss key components and their usage/importance in the overall framework.

Different Components and Configurations for Cypress Automation Framework

Cypress Automation Framework consists of many components/configurations. Here we will go through each of them and explore their needs and usage and how it makes the whole framework much more sense.

Cypress.json

Cypress.json acts as a configuration file for setting up important variables for your framework. It controls global variables for your test suite as follows.

BaseUrl – Specifies the homepage URL for your application increase the reusability of code.

ViewportWidth & ViewportHeight – It sets the dimensions for screen size on which you want to run the test. to support testing on multiple devices.

Test Files – Specify the path for your feature files and associated step definitions(Specs). (we have discussed more regarding feature files and step definitions).

TimeOuts(default command timeout & PageLoadTimeout) – Here you can define a global timeout for DOM elements and page timeouts. (there are multiple timeouts which one can define on the basis of requirements)

FolderConfigs(videosFolder & ScreenshotsFolder) – For report generation purposes we can define a folder for video recordings and a folder for screenshots taken during execution.

ReporterOptions – Reporteroptions will define the reporting and assertion library for your framework. It has an array of options to define in the format of JSON. Ex:- MochaAwesome

Package.JSON

In Cypress automation framework package.json acts as a dependency manager for your project. It also contains scripts(reusable command line options for npm to run and test) and metadata for the project(name, version, and description).

Dependencies – You can add all your dependencies and their respective versions in form of JSON. Ex – cypress-cucumber-preprocessor, exceljs, and many more.

Dev Dependencies – This will also help you define your dependencies, but you can add dependencies required in the build and testing phase not in production.

Scripts – This is one of the most important and widely used variables for package.json it will help you to define any reusable commands for cypress run, test, and report. This will also help you to run tests with different tags as well.

MetaData – This includes information about your project or platform like name and version.

Package-Lock.json

In Cypress automation framework package-lock.json is used for transitive dependency management for different dependencies under the project.

Dependency Tree – It contains the dependency tree for all the dependencies for your project if your project requires any transitive dependencies it contains information regarding the same.

Integrity – It contains tag integrity for all the dependencies which signifies whether the dependency is updated or not after it got published.

MetaData – It also contains the metadata for your project similar to the package.json.

Page Objects

Page objects are the most important component of any framework. It helps you to identify different DOM objects of any given web application(text boxes, buttons, links, etc)

Like any other framework, the best approach to organizing objects is via a design pattern known as the Page Object Model.

This design principle works on one important thing which is bundling all page objects and corresponding actions into one class in the form of variables and corresponding methods.

In any cypress automation framework, these classes can be created in .js and .ts formats meaning it will support both java script and typescript files.

Feature Files

Before we discuss feature files we need to know why we need feature files.
In most firms and enterprises BDD(Behaviour Driven Development) methodology is used to write functionalities and tests.

As in BDD all of the tests are written in Gherkin language. It allows you to write tests in the form of Given When and Then which are easily understandable to everyone.

The common tool of choice to support BDD is Cucumber.
Cucumber Supports all modern languages and frameworks.

Step Definitions

To integrate cucumber with cypress we need the cypress-cucumber-preprocessor plugin as part of our framework.

The steps written in .feature files needed to link with a javascript or typescript code. To define each step from feature files into our code we need to import tags Given When and Then from the plugin(cypress-cucumber-preprocessor).

How to use it?

import { Given,When,Then } from "cypress-cucumber-preprocessor"

Reusable Libraries

While creating any framework in an Enterprise setup code reusability is one of the important features of a Good framework.
There could be multiple scenarios where a reusable custom-made library would be needed.

1. Reading and Writing Files/Excel Files
2. Connecting to Databases
3. Connecting to API’s
4. Creating Reusable Test data

Test Data

Test data is the most important component of any testing framework.
There are multiple strategies to use depending on the requirements.

Synthetic Test Data Generation – We create a lot of test data for testing applications while testing basic scenarios and user flows for such cases we rely on synthetic test data generation.

Mock Data – We need mock data for testing scenarios associated with integration Testing. In an Enterprise setting, different teams are working on different platforms/services which are interconnected with many upstream and downstream systems. To reduce interdependency for testing we often use mock data to test our services by mocking the request and response for other services.

Production Data Subset – This is one of the most widely used approaches to generate real data sets for testing applications in lower environments.
Here we usually take some of the real data for an application and copy it from the Production environment to the non-production environment to test our automation scripts.

Conclusion

Above are the key components of any cypress automation framework in an Enterprise setup. Depending upon the infrastructure/setup of organizations some of the components might change. Let me know if you feel I missed out on any important component.