Install Cypress in a Production Application

Brett Cassette
InstructorBrett Cassette

Share this video with your friends

Send Tweet
Published 5 years ago
Updated 3 years ago

So you have a production application, and it doesn't use Cypress yet.

In this course, you'll learn how to add Cypress to your existing npm application, and run it for the first time.

Recommended Homework:

  • Look through the tests Cypress spins up for you and learn how typical Cypress tests are setup

Instructor: [00:00] In this lesson, we'll learn how to add Cypress to an existing application. First, let's clone the sample repo. Next, cd into the repo and get check out the 01 Cypress install branch.

[00:15] Next, run npm install. When it's finished installing, you can start the demo application with npm run start. This command will automatically open the demo application on localhost 5000.

[00:29] You can verify that your application is working by running npm run test. Once our application is verified, we're prepared to npm install cypress --save dev.

[00:42] Once Cypress is installed, we're prepared to run it with npm bin/cypress open. This will pop open the Cypress interactive GUI which comes pre-seeded with a number of tests.

[00:56] If we click on one, we can see an example of Cypress in action. This is Cypress running on the Cypress website. We can see here that Cypress can either run against our local page or against a remote page.

[01:11] All of these example files live in the Cypress directory under integration. You'll probably want an easier way to run Cypress, so open package.json and add a Cypress command, which will be cypress open.

[01:26] We can use our new command by running npm run cypress. Now you're all set up with Cypress and ready to roll. If you'd like to do an exercise before moving on to the next lesson, take a moment and familiarize yourself with some of the example tests.

Shripada Hebbar
Shripada Hebbar
~ 5 years ago

I get this error when I run: (npm bin)/cypress open parse error near `/cypress'

I use zsh.

Dan
Dan
~ 5 years ago

Yep, same :/

Dan
Dan
~ 5 years ago

After reading several stackoverflow posts and messing around with my .zshrc file for a while, just running npx cypress open has the same result

Brett Cassette
Brett Cassetteinstructor
~ 5 years ago

Hey guys, thanks for checking out the course and sorry for the confusion! The updated transcripts will be live soon, but there's a typo there. $ $(npm bin)/cypress open (notice the extra dollar sign) will perform shell expansion. You can see this if you run echo $(npm bin), which will evaluate and show you your npm bin path. npx cypress open is another good solution!

web-learning_5
web-learning_5
~ 5 years ago

When encountering the following problem when running frontend e.g. on a windows machine:

'PORT' is not recognized as an internal or external command,
operable program or batch file.

Use cross-env as suggested here

"frontend": "cross-env PORT=5000 REACT_APP_API_URL=http://localhost:3000 react-scripts start",
shwetakamaraddi
shwetakamaraddi
~ 3 years ago

Is this working? lot of errors when I tried the steps listed and eventually cypress failed to run

Lucas Minter
Lucas Minter
~ 3 years ago

@shwetakamaraddi

What I did to get rid of the errors I was running into, I did:

npm r -g watchman 
brew install watchman