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.