Setup Your Cypress Dev Environment

Brett Cassette
InstructorBrett Cassette
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

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

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.

Brad McAlister
Brad McAlister
~ 5 years ago

Several of the branches including '02-cypress-dev-enviroment' are stale and can't be checked out.

Bonsai
Bonsai
~ 5 years ago

I have an example cypress typescript environment I've set-up available here:

https://github.com/omerose/cypress-support

Oscar Lagatta
Oscar Lagatta
~ 5 years ago

How do you run on windows ? I am getting the following error [api] [frontend] 'PORT' is not recognized as an internal or external command, [frontend] operable program or batch file. [frontend] npm ERR! code ELIFECYCLE [frontend] npm ERR! errno 1 [frontend] npm ERR! todomvc@0.0.1 frontend: PORT=5000 REACT_APP_API_URL=http://localhost:3000 react-scripts start [frontend] npm ERR! Exit status 1 [frontend] npm ERR! [frontend] npm ERR! Failed at the todomvc@0.0.1 frontend script. [frontend] npm ERR! This is probably not a problem with npm. There is likely additional logging output above. [frontend] [frontend] npm ERR! A complete log of this run can be found in: [frontend] npm ERR! C:\Users\oscar.lagatta\AppData\Roaming\npm-cache_logs\2019-06-18T10_32_35_082Z-debug.log [frontend] npm run frontend exited with code 1

Oscar Lagatta
Oscar Lagatta
~ 5 years ago

changed the script as follows for windows and worked "frontend": "set PORT=5000 && react-scripts start",

pablo
pablo
~ 5 years ago

At transcript on cypress.json section have a typo, the key of the json should be 'baseUrl' but now is 'baseURL' with the URL in uppercase, can you guys fix that? thanks

Arlene Andrews
Arlene Andrews
~ 4 years ago

Hello, there! I'm Arlene, a Learner Advocate, and a tester-in-training. With the new release of Cypress 4.9, I've taken on making notes, adding learner notes, and updating the transcript so it can be more useful to the community.

Than you all for your comments thus far - I'm trying to make sure that all of these issues are covered, and have the 4.9 updates.

Markdown supported.
Become a member to join the discussionEnroll Today