Adding Custom Commands to Cypress Typescript

Cypress is a JavaScript automation testing tools that I use a lot lately due to it is easy to setup and I can start building up test script right after installing a single package. It has its drawbacks but it pretty much fulfills any needs for UI Based testing for many of my recent projects. It also has compatibility with TypeScript with a little bit of setup. At some point I found myself repeating a couple line of code and try to do a little bit of clean up. First thing I do was look up the documentation and thought that be the end of it. But I found myself in a little bit of confusion, and here is how I manage to make it work after a little bit of reading.

I can’t seem to make the documentation work

Cypress gives a documentation on how to add a custom command in TypeScript, but I cannot seem to make it work, my VSCode still yelling me that the newly added command is not recognized. They also provide an example, which works, but I find it not as clean as the one that the documentation suggest (the one that I have fail to make it work).

The step I followed

This is pretty much step I do as I follow through the documentation, but in my case, it wasn’t end up as the documentation expected:

• Create a new folder, say it’s called cypress-typescript
• Open a terminal in the folder and do the node setup to add cypress and typescript
  * npm init -y
* npm i cypress typescript
• Run npx cypress open once to trigger cypress folder setup, after this the project should have new folder added

• Add a your tsconfig.json file inside cypress/ folder

• Now we can start adding our custom command inside command.js file

• Declare your newly added command to the cypress namespace so it will be detected by TypeScript

• Try using your new command inside test file , and TypeScript should detect your custom command

To this point I tried using my new custom command but TypeScript still gives me an error.

How I make it work

After a little bit of understanding on how the d.ts in TypeScript work and what can I do with tsconfig.json I manage to make the documentation steps of add custom command working, here’s how:

• Move the namespace declare, to new file called index.d.ts file

• Add newtypes ./support identifiers inside tsconfig.json file

• Refresh the TypeScript server

After attempting this adjustment my VSCode able to identify the custom command, and it works as it should.

Conclusion

How I understand it work is by adding "./support" to the tsconfig.json file, it will make the TypeScript lookup a declaration file (the *.d.ts file) inside given directory, hence its finding the new command.

Other way I found we could do to fix the not detected new custom command is to add <reference types="../support"/> to every file that requires the new custom command, but I found this not as nice and is seems quite repetitive.

This is how I make the documentation step works, I am new to TypeScript and been feeling my way around it. This might be helpful to people that just like me, new to cypress and typescript and was not have a good luck with the documentation. Hope this can be a help to other that finding the same problem. Thank You!