Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Setup Your Cypress Dev Environment

    Brett CassetteBrett Cassette
    cypressCypress
    ^3.1.5

    Learn how to setup your Cypress development environment with Intellisense, custom Cypress configuration in cypress.json, and get settings autocompletion in VSCode.

    Recommended Homework:

    • Setup your Cypress dev environment
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    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.