Cypress Typescript Setup

Hello fellow developers today I am going to show you how to setup typescript cypress. As we all know cypress is very famous testing library. But ever wonder how can we use cypress with typescript??

Install typescript in your project

npm install --save-dev typescript

Now in your tsconfig file change your whole code with the code given below:

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

The “types”  will tell the TypeScript compiler to only include  definitions from Cypress. This will address instances where  project also uses @types/chai or @types/jquery. Since Chai & jQuery are namespaces (globals), incompatible version will cause the package manager (yarn or npm) to nest and include multiple definition and cause conflicts.

Now change all your js files to ts files this should work as fine. One should only need to fix the typescript errors.

This is an example how typescirpt file looks like:

// in cypress/support/index.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to type a few random words into input elements
       * @param count=3
       * @example cy.get('input').typeRandomWords()
       */
      typeRandomWords(
        count?: number,
        options?: Partial<TypeOptions>
      ): Chainable<Element>
    }
  }
}

I hope this blog has help with typescirpt setup for any queries or doubts please msg me in comment section.