How to set up Cypress and Typescript End to End Test Automation Framework from Scratch Step by Step Guide.

Ganesh Hegde
8 min readDec 21, 2022

--

This article explains creating or setting up a cypress.io end-to-end testing framework from scratch using Typescript. Unlike another tutorial, this explains setting up the Cypress framework using Typescript in a simple and easy way. This article is helpful for whoever wants to set up the Cypress Typescript framework for the first time. Also, I know that there are many migrating from different automation frameworks like a protractor, webdriverio, etc. this will be helpful for them too.

This Tutorial shows page object model creation as well however you can use it for any type of framework by skipping those steps.

Pre-requisite:

  1. Install NodeJS: If you don’t have NodeJS installed in your system navigate to https://nodejs.org/en/download/ and choose LTS download and install.
Download Node.js

2. Install Visual Studio Code: If you don’t have Visual Studio Code on your computer Navigate to https://code.visualstudio.com/download download and install.

Visual Studio Code Download

Step by Step Guide to Configure / Set up Cypress Typescript Automation Framework

Step 1: Create a Project Folder

The first step is to create a new folder on your computer desired location. Below I am creating CypressTypescript as the project folder.

Create Project Folder — Windows Explorer View

Step 2: Open Project Folder CypressTypescript in Visual Studio Code

i. Open, Visual Studio Code, Click on File > Open Folder

Visual Studio Code — Open new folder

ii. Choose, CypressTypescript Folder and Click on Select Folder at the bottom

Step 3: Create pacakge.json folder

Open Terminal, In Visual Studio Code by clicking on Terminal Menu > Choose New Terminal.

Note: Ensure New Terminal opened in the working directory as CypressTypescript

Visual Studio Code — Open new terminal using Terminal menu

iv. New Terminal window appears at the bottom of Visual Studio Code, In the new terminal type below command

npm init
Visual Studio Code Terminal — Enter Command npm init

v. It will ask you a set of questions if you want to type desired text, else hit [Enter] key one by one until you get the message Is this Ok?, Then again hit enter it will create package.json for you

Visual Studio Code Terminal— package.json set up using questions

Step 4: Install Cypress:

In the Visual Studio Code, you need to type below command

npm install cypress --save-dev

The above command may take some time so please wait until it finishes

Visual Studio Code Terminal — Installing Cypress framework using npm install

Step 5: Open Cypress

The first time when you enter the cypress open command it will create a default setup for you, which also includes directories like cypress, integration, fixtures, etc. To open cypress enter the below command in your terminal window

npx cypress open
Visual Studio Code Terminal — Open Cypress Command

After the execution of the above command, it will create, default cypress framework for you and also opens the cypress window. At this point just close the Cypress window.

Cypress window view

At this point, your CypressTypescript folder should look like this.

Project Structure View in Visual Studio Code Explorer

Note: Optionally, if you want you can play with a built-in example using the cypress window.

Step 6: Install Typescript using the below command typing in Terminal

In the Visual Studio Code Terminal type the below command

npm i typescript

Step 7: Create Typescript config file (tsconfig.json)

In the Visual Studio Code Terminal type the below command to create tsconfig.json file using the below command

npx tsc --init

The above command will create the default tsconfig.json file, let it be, for now, we will configure that later stages in this tutorial

Step 8: Create srcfolder inside Integration Folder

Note:
The Integration Folder has already created by cypress, you don’t have to create your own. which is located inside CypressTypescript/cypress folder

Inside your CypressTypescript > Double Click on cypress Folder > Open Integration folder

The default integration folder look like below.

Visual Studio Code Explorer — integration folder inside cypress folder

Now, Create a folder called src inside the integration folder (Just reminding again integration folder is located inside the cypress folder

Visual Studio Code Explorer — src folder

Optionally you can delete the examples folder unless you want to keep it as a reference.

Note:
1. example folder contains example tests, just to play around with some test cases, provided by cypress when you install the cypress package.
2. Your tests should be always inside the integration folder. However, you can create subfolders to arrange your specs but they should be inside the integration folder.

After the above step, we need to create two folders inside src namely
page-objects and specs

CypressTypescript
-cypress
--integration
---src
----page-objects
----specs

I have explained below step by step, in order to avoid any confusion.

Step 9: Create page-objects a folder

Open src folder.

Note:
src folder is located inside CypressTypescript\cypress\integration

Create one more folder inside src the folder, name it as page-objects . All your page object files should sit here.

Step 10: Create specs folder

Create specs folder inside src folder, All your spec files should sit here.

Note:
Creating a separate folder for page objects and specs helps easy maintain and managing the automation test. The above is just a recommendation not mandatory.

After completion of the above step, your project should look like below.

Visual Studio Code Explorer View After Step 10

Step 11: Create a first page-object file inside the page-objects folder

Using Visual Studio Code, Create a file named google-search.page.ts . This file should sit inside page-objects folder created in Step 9.
Copy and paste the below code into the file google-search.page.ts.

//Inside your google-search.page.ts file. This is pageobject file.
/// <reference types="cypress" />

export class GoogleSearch{
googleSearch(){
return cy.get('input[name="q"]').first();
}
googleSearchBtn(){
return cy.get('input[name="btnK"]').first();
}
searchResults(){
return cy.get('h3').first();
}
}

Step 12: Create the first spec inside the specs folder

Using Visual Studio Code, Create a file named google-search.spec.ts . This file is created inside spec folder created in Step 10
Copy and paste the below code into the file google-search.spec.ts.

//This is spec file, inside your google-search.spec.tsimport {GoogleSearch} from "../page-objects/google-search.page";
const search = new GoogleSearch();
describe('Google Navigation', () => {
it('Google Search', () => {
cy.visit('https://www.google.com')
search.googleSearch().type("Something");
search.googleSearchBtn().click();
search.searchResults().should('be.visible');
});
});

At this point, your framework should look like below.

Visual Studio Code Explorer View After Step 12

Step 13: Configuring tsconfig.json file

So, You have completed, page-object file, spec file. If you see those files you have created file with a .ts extension, that means we are using typescript in this project. In order for Cypress to understand typescript, we need to configure it.

i. In Step 7 you have already created the tsconfig.json file.
ii. Navigate to tsconfig.json file
iii. Remove all default settings inside it.
iv. Copy and paste the below code

{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress"]
},
"include": ["**/*.ts"]
}
Visual Studio Code — tsconfig.json configuration

Step 14: Execute your first test

In the VisualStudio Code Terminal, Make sure the terminal present working directory is CypressTypescript. Type below command

npx cypress open
Visual Studio Code Terminal — Open cypress to execute test

Wait for the Cypress window to open. The below window appears.

Cypress Window — Run Test

Click on the google.search.spec.ts file in the above window. BOOM!!! your tests stats running in the browser.

Once it gets finished you will see the result.

Cypress Browser Window — Test results after execution

How to Execute Cypress tests using the command-line interface Cypress CLI?

To execute cypress tests using the command line. Navigate to the CypressTypescript folder using command line enter the below command

npx cypress run --spec="./cypress/integration/src/specs/google-search.spec.ts"
Command Line Window — Cypress test execution and results

Whatever we have done step by step, for that I have already created github you can download from here

Bonus:

  1. By default, Cypress doesn’t support XPath as a selector, if you want to use Xpath in cypress please install the cypress-xpath npm package
npm i cypress-xpath

To get support for the typescript uses the line /// <reference types=”cypress-xpath” /> in your spec file. Below is the example

/// <reference types="cypress-xpath" />
describe('Example', () => {
it('Example', () => {
//test something
});
});

2. Setting up .gitignorein your project

Once you set up the code definitely you want to check into a git repository, if you are checking in the git repository you don’t have to push all the code such as node-modules folder etc. for that create one file in your project folder (CypressTypescript) name it as .gitignore any folders and files which you mention here will be automatically ignored by git, which will not be checked into the repository.

Example code for .gitignore

# End to End Tests
dist/
node_modules/
obj/
logs/
*.log
*.txt
testresults/
screenshots/
package-lock.json

--

--