Cypress Tutorial #8 - How to Enable IntelliSense in Visual Studio Code

hey everyone welcome back in this Cypress tutorial I'm going to talk about a little bit on the auto completion code completion or intellisense basically so if we go to the Cyprus documentation right what exactly when we say Auto completion or code completion you would have seen if you are working with Java uh when we start writing a code in Eclipse there is an auto completion or there is a suggestion of methods that come when you start typing something right uh if there is a match between the method Etc so similar thing is available in Cyprus and if you go to the tooling section on the guides and to the IDE integration we'll scroll down and you will see that we have certain plugins which will basically get into the details as we go along okay but the first thing is important around the code completion which is important because you would have seen in the previous video when we start typing in say for example in the e2e test case if I create a new test case or in the existing test case when I use to type in say Cy okay and then dot it it doesn't basically display what exactly what all options or what our methods are available right and even Cy doesn't come in picture right now it is coming because I have already used it once right so this is not basically the intellisense or or Auto completion feature so in order to enable it what options we have we have the triple slash directives what is the what it does is it it is basically the simplest way to see intellisense when you are typing a command okay so what we need to do is for example the triple uh Slash directive it does is you simply add this to a particular file and within that particular file the vs studio will automatically detect right so it is per file basis so if I go ahead and copy it and then paste it here at the top okay so let's go ahead and paste it here okay and now if I go ahead and start okay let me save it let me save it okay and now if I go ahead and say Cy dot you'll see I'm I'm getting all the methods basically right so you'll see that I'm getting all the methods that are available for for this particular Cypress Command right so this is basically how you can enable on a per file basis now this is only specific to this test1.cy.js okay this directive that I have used okay so triple slash directive is only specific to the file but if you have to do it on every file that is not a very good approach right so you can do it at a global level so that in all the files that you are writing or all the test cases that you are writing that configuration is available so what we need to do in for for that we have the JS config okay so if you see here we have the JS config or we can create a jsconfig DOT Json okay and within that you simply go ahead and paste this code that is highlighted here okay and that's pretty much what will enable the internet sense okay so instead of adding triple slash directive to each JavaScript spec file some ideas so like in vs code okay not everyone they are mentioning some IDs so vs code does understand it so we are using vs code that's absolutely fine and we'll add the JS config at the root of the project that means We'll add it at this particular level okay this this is the root right so at this level so what I'll do is I'll select the Cyprus automation okay and then create a file all right so I'll create a new file just create a new file okay at this level root level and then what is the name of the file the name of the file is jsconfig.json okay so I'll simply copy it and let's create it paste it there okay hit enter and you'll see the file got created okay and now we simply go ahead and paste this particular code include node module Cyprus and then Cyprus particular code okay so I'll simply copy this and then paste it here in the jsconfig dot Json all right and then save it okay let me cancel it so I'll save it and then I'll remove this okay so I'll remove this triple slash directive from here save the file okay go to the project Explorer now we have this file which is jsconfig.json which has this particular code okay and now if I go to any of the file okay so for example I go here and I start typing in Cy dot okay it should basically you'll see that it is fetching data for better typescript intellisense right so immediately it will start recognizing you will see that c y Dot and then it started fetching okay you'll see in the left hand side in the bottom it is fetching data for better typescript intellison right so this is the global way so now it doesn't matter which file I am on okay I can go ahead and basically then start typing in and it will detect the or do the intellisense okay so it will detect all of those methods all right so this is basically how you are going to enable the intelligence so that you do not worry about when you are you know say for example writing describe okay you'll see now now it is basically available even the mocha it is coming out of mocha and mocha is Cyprus already bakes in mocha right so mocha is built in within Cyprus so that is why I even describe and eat keywords so most of the you know all the keyword that you will use from mocha and chai and whatever is there in the Cyprus ecosystem will be available to you now okay so this is all about this particular video to quickly enable the intellisense feature because this is highly recommended you will not be able to remember each and every Command right it is very very hard and it it you shouldn't be actually worried about you know what all methods are available right that's not the point of learning any automation tool you shouldn't be memorizing you know what methods how they are doing basic methods basic functionality uh is is what is required right not every method you need to buy hard so in that particular case when you have this intellisense feature then you know okay these are the methods available at this particular place I can use and then you go ahead and use it right and and then there is also description that is available right so you can basically you know go ahead and say Cy Dot and say for example I go to add right and I can go ahead and see the details what exactly this particular method is all about right so these these details are basically you know available in that particular case as well right for example as is a method right and all the details around that you will be able to see that okay and how to use it as well so that will make your life a lot easier for any automation tool when you are learning and that's a better and effective use of your time rather than you know just memorizing you know unnecessary things okay so that's all for this video I hope this was helpful thank you very much for watching

Channel: Software Testing Mentor

Views: 2,402

Keywords: cypress tutorial, cypress tutorial for beginners, learn cypress, cypress testing, learn cypress step by step, cypress testing tutorial, cypress basics, cypress online training, cypress tutorial beginner, cypress tutorial full, learn cypress automation, learn cypress.io, cypress io, enable intellisense in visual studio code, enable intellisense in visual studio, enable intellisense, vscode intellisense, cypress intellisense not working vscode

Id: yb3HAOUWJ_A

Length: 6min 50sec (410 seconds)

Published: Tue Sep 26 2023