Cypress: E2E Automation Framework Using Typescript

Author: Rajesh Yemul. LN: https://www.linkedin.com/in/rajesh-yemul-050381/

In this article, we will see how to set up the e2e UI automation framework with cypress using typescript. Here I will try to explain setting up the framework in a simple and easy way. We will also see how we can create a simple Page Object structure for cypress and fixture .folder utilization for data reading

End-to-end (E2E)

End-to-end (E2E) testing is the process of writing tests for an application from start to end. The purpose of End to End testing is to simulate the real user scenario and validate the system under test and its components for integration and data integrity. In essence, these tests cover an application's whole execution sequence in a production-like environment. In the case of a front-end application, this entails interacting with the UI in the same way that a real user would. The completion of this testing is not only to validate the system under test, but to also ensure that its subsystems work and behave as expected. These tests are best for applying constant stress to your application’s entire system and, thus, are a great measure to ensure quality when the whole application stack is present.

Cypress

Cypress is the front end testing tool built for the modern web. Because of its Architectural design, Cypress delivers fast, consistent and reliable test execution compared to other Automation tools. Cypress is an all-in-one testing framework that does not use Selenium or WebDriver. The tool uses Node.js to start a browser under special control. The tests in this framework are run at the browser level, not just remote-controlling. Some of it's cool features are automatic waiting, network traffic control and easy support for cross browser testing.

Let's understand step by step how we can create a framework from scratch

● As the cypress is built on the node.js framework first you need to download node.js from https://nodejs.org/en/download/ as per your operating system.

● Now create a folder: cypress-e2e-typescript

● Import this folder to one of your favorite editors and set up a new npm package. I am using visual studio code for this example.

$ npm init -y

This will create a package.json file in your project folder.

● Next we have to install cypress and typescript

$ npm install cypress --save-dev
$ npm install typescript --save-dev

It will add a new dependency in the "package.json". If you face any issue with typescript, install typescript once globally on your machine. Now execute the command

$ npx cypress open

This will create new folders (default cypress setup) which you can see in your left panel folder structure.

● After installing the typescript lets create a typescript config file. In the terminal type below command to create tsconfig.json file

$ npx tsc --init

Now navigate to tsconfig.json file and delete all default settings in the file

and paste below code

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "lib": ["dom", "es6", "es7"],
    "types": ["node","cypress"],
    "strict": true,
    "skipLibCheck": true
  },
  "exclude": ["node_modules"],
  "include": ["**/*.ts"]
}

Page Object Model

Page Object Model is a design pattern that focuses on making a Test Automation Framework extensible, maintainable, and easy to understand.

In POM page objects are separated from the automation test scripts. Automation testing gives us many leverages that benefit us in testing. 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, the Page Object Model plays an important role in best coding practices. Here I will be using http://automationpractice.com/index.php for demonstration purposes.

● Create two folders under the Integration folder as pages and tests.

So, for each page of the application, there will be one file containing all the

locators of that page and all the reusable codes/functions.

● Write the page-specific locators in the respective files under ‘pages’ folder. For our test script, we will write the locators and respective methods under loginPage.ts and myAccountPage.ts.

● Now, we will write our test script. Create a file login.test.ts under tests folder. Here we will be reading the data from users.json file which we have created and stored under the fixture folder. To demonstrate this, I have prepared five tests for better understanding. Which are reading credentials data from users.json file.

● If you store and access the fixture data using this test context object, make sure to use function () { ... } callbacks. Otherwise the test engine will NOT have this pointing at the test context. Our test file will look like this.

● Check the folder structure, you might see that the cypress.json file is missing. To maintain the standard folder structure I have removed the cypress.json file and created the config.json file under config folder which is now responsible for holding the configuration details

● In order to make cypress understand this we have to provide this file details as a part of command.

● Bingo! We just successfully wrote a few login related tests using Cypress and typescript. Now, it's time to launch the Test Runner and execute the tests.

● In the VisualStudio Code Terminal, Make sure the terminal present working directory is cypress-e2e-typescript Type below command

$ npx cypress open --config-file config/config.json

● Wait for the cypress window to open. You should see the window below. Here select the test file you want to execute. In our case select login.test.ts file.

Your tests should start running in the browser, Once it gets finished, you will see the result.

References:

● https://www.cypress.io/

● https://www.typescriptlang.org/docs/handbook/typescript-from-scratch.html

For code reference, clone the project from

https://github.com/rajeshyemul/cypress-e2e-typescript