> For the complete documentation index, see [llms.txt](https://team-qatechtalks.gitbook.io/cypress-cookbook-edition-2/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://team-qatechtalks.gitbook.io/cypress-cookbook-edition-2/web-ui-controls/cypress-e2e-automation-framework-using-typescript.md).
# Cypress: E2E Automation Framework Using Typescript
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 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 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:**
●
●
For code reference, clone the project from
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://team-qatechtalks.gitbook.io/cypress-cookbook-edition-2/web-ui-controls/cypress-e2e-automation-framework-using-typescript.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.