Cypress TypeScript Project Setup

In this article, we will set up a cypress typescript project and run our first test. We will need VS code and Node JS already installed and ready for this. Refer below links to Install Node and VS Code.

Once installed, follow below steps:

Step 1: Create new folder for your project

Step 2: Open folder in command line or terminal or with VS Code

Step 3: Intialize Project using below command

npm Init

You will see several options like name, author and keywords etc. Hit enter until it gets finished. This will create a package.json file in the root.

Step 4: Paste the below command to install Cypress

npm install cypress --save-dev

This takes some time to finish. Once done, Cypress is finished installing.

Step 5: Install TypeScript

npm i Typescript

Step 6: After installation, run the following command to create a tsconfig.json file.

npx tsc --Init

You can use the following configuration below on the JSON file.

{
 "compilerOptions": {
   "target": "es5",
   "lib": ["es5", "dom"],
   "types": ["cypress", "node"]
 },
 "include": ["**/*.ts"]
}

Step 7: We now need to open Cypress to initialize the project with its default project folders and other stuff. Use below command:

npx Cypress open

After this, we went through some setup it takes, and now we will have this structured project.

Step 8: Run Test. Create a cy.ts file in your e2e folder.

describe ('Test,' function(){
   it('visit',function(){
       cy.visit('https://www.programsbuzz.com/user/login')
   })
})

That's it cypress typescript project setup is now complete on your pc.