Installing Cypress for the first time

Prerequisites

In order to create a Cypress project you must first, install Node.js and a code editor such as VS Code.

---

Node.js

To install Cypress, first, you will need to install Node. Node.js is a cross-platform, open-source JavaScript runtime environment.

Cypress is built on Node.js and uses it to execute tests written in JavaScript. Node allows Cypress tests to run outside of a browser, enabling headless execution and server-side operations.

To install Node.js go to this link and follow the installation instructions:
https://nodejs.org/

---

VS Code

Visual Studio Code is a code editor. To install VS Code, go to this link and follow the installation instructions:
https://code.visualstudio.com/download

---

NPM

Node.js has a default package manager called NPM (Node Packet Manager). NPM allows you to easily install and manage dependencies for your projects. In this example, We will use NPM to install Cypress.

Note

Npm installs and tracks JavaScript dependencies. NuGet manages dependencies for .NET projects.

---

Install Cypress

Details on the Cypress NPM package can be found here:
https://www.npmjs.com/package/cypress

And the official GitHub repo can be found here:
https://github.com/cypress-io/cypress

To install the Cypress NPM package open an empty folder in VS Code, then open a new terminal (and ensure that you are in the correct directory).

Install the Cypress NPM package using the following command:

Launch Cypress by running the following command:

Select 'E2E Testing'

Accept the basic installation of the fixtures file etc.

Select a browser

Note

Electron is a built-in browser for Cypress and usually isn't affected by the same security/limitations as the other browsers. That said, we usually aim to use Chrome as this is the default for most of our apps etc.

Select a spec option.

'Scaffold example specs' will provide multiple spec file examples. 'Create new spec' will provide a singular spec file example.

Then enter the path of where to store the script (usually the default option) and click 'Create Spec'.

Then click 'Okay, run the spec'

At this point, the script should launch and run through the example test script (aka scaffolding script)

You should now have a folder structure in VS Code that looks like this:

---

Add a .gitignore file (to the root directory)

.gitignore tells git which files (or patterns) it should ignore. It's usually used to avoid committing transient files from your working directory that aren't useful to other collaborators, such as Cypress screenshots/videos, node_modules etc. or to ensure that passwords and secrets stored in a cypress.env.json file are not pushed to GitHub.