Setup Your Cypress Dev Environment

Instructor: [0:00] In this lesson, we're going to set up the Cypress dev environment in order to make learning Cypress as easy as possible. To get started, check out the O2 Cypress Dev Environment branch. If you use VS code, and you use NPM install to install Cypress, then you already have IntelliSense set up.

[0:21] The reason this works is because of what VS code calls automatic type acquisition. This can work in one of two ways. The most common way is to use this triple slash directive, which describes which types are defined in this file.

[0:36] The triple slash directive isn't limited to VS code, and works in any editor that uses IntelliSense. If want to prove that the triple slash directive is what's loading this up for us, we can comment it out. Once we save it and hover over cy.visit it has no idea where the type definitions are found.

[0:55] Let's dive in a little deeper to see where these come from. Let's comment that back in, hover over, click Go To Definition, and see this index.d.ts file which we can see is located in this directory under the node_modules folder, under cypress/types/index.d.ts. We can also see this in the side bar.

[1:19] What would happen if we moved this file from node_modules/cypress/types/index.d to the root of our project? Will the IntelliSense still work? We reopen our editor and see that the file we opened before has been deleted from the disc because we moved it to the project root. If we reopen and look this up, IntelliSense is still working. Let's go to definition and see what happens now. VS code is still able to find the typescript definition file.

[1:49] As I look at it, I can tell that this installed in my global/node_modules folder, which means that VS code is able to resolve either a global installation of Cypress or a local installation of Cypress to give us these typescript definitions.

[2:03] Now that we've learned where the file comes from, let's go ahead and move this back to our node_modules/cypress/types folder. In many editors the triple slash directive is the only way we can find type information for our Cypress files. However, in VS code we have a global way to look these up. I'll comment this out, and we know that this means the triple slash directive is no longer going to be used.

[2:27] Now let's create a tsconfig.json file in the root of the Cypress directory. If you visit the Cypress docs located in the show notes, you can copy this tsconfig and paste it in. Now that we've configured the ts.config, we can still look up the cy.visit method, even without our triple slash directive.

[2:50] There's just one more config file that we're going to want to add to the root of our project. Cypress itself accepts a lot of different configuration options. For instance, we can configure what the root URL is of our project.

[3:03] If we close this out, go into our project root and add a new file called cypress.json, we can configure this here. We can add baseURL for instance, http://localhost:5000 which is the root of our project. VS code can even be configured to tell us which options are accepted by the cypress.json file, or if we hover over, to tell us a little bit more about what option we're configuring.

[3:33] To configure this, we can go to the user settings under json.schemas, edit in settings.json, and we can see that I've already configure my editor here to do this. This is another configuration that's available on the Cypress documentation, and is included in the show notes.