How to set up Cypress and Typescript End to End Test Automation Framework from Scratch Step by Step Guide.
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:
- 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.
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.
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.
Step 2: Open Project Folder CypressTypescript in Visual Studio Code
i. Open, Visual Studio Code, Click on File > Open 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
iv. New Terminal window appears at the bottom of Visual Studio Code, In the new terminal type below 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
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
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
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.
At this point, your CypressTypescript
folder should look like this.
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 src
folder 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.
Now, Create a folder called src
inside the integration
folder (Just reminding again integration folder is located inside the cypress
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.
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.
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"]
}
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
Wait for the Cypress window to open. The below window appears.
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.
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"
Whatever we have done step by step, for that I have already created github you can download from here
Bonus:
- 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 .gitignore
in 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
If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi/
More article related to Cypress: