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-devThe 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 typescriptStep 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 --initThe 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.
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
----specsI 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-xpathTo 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.jsonIf you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi/
More article related to Cypress:
