How to setup Cypress

Welcome to the first technical article of the series. In this article, you will learn how to setup Cypress and make sure everything is installed correctly.

Node

To work with JavaScript first thing that is needed is Node and NPM (Node Package Manager). Download it preferably from here: https://nodejs.org/en/download/. If Node is correctly installed following command should be recognized.

npm -v

VSCODE

Visual Studio Code is the most popular tool to work with JS. It will be used here the as main tool to write code. Download it from https://code.visualstudio.com/download.

There are lots of useful plugins to VSCODE. To make work more convenient download following extensions:

  • Bracket Pair Colorizer
  • ESLint
  • Prettier

Starting a new project

In case you already work with VSCODE and have some project opened, press CTRL + SHIFT + P and type Close Workspace.

Close Workspace in VSCODE

A new project will be created inside of a new folder. Choose the option “Open Folder..” and select desired localization on your computer.

Open Folder in VSCODE

An empty project will be opened. While working with NPM it is necessary to create a package.json file. This file is a basic Node project file, which contains all metadata about a project. Valid package.json is required  before publishing the package into NPM, which will not be used here. After creating the file it is possible to install dependencies and run custom scripts inside our project. Read more: https://docs.npmjs.com/cli/v7/configuring-npm/package-json

Get into terminal in VSCODE

With access to the terminal now run the following command:

npm init

There is no reason to put any data in here, just enter out all entries. Congratulations, you have created your first file!

npm init

Installing Cypress

Run:

npm install cypress
Installing Cypress

Cypress comes with many more dependencies, all of them are installed into the node_modules folder. Inside of it, there is a hidden .bin\ folder that contains executables.

If you are not familiar with this just run the following command in the main folder (or check in the file explorer)

ls .\node_modules\

What is more interesting Cypress is always installing template test suites called specs.

Basic Cypress project structure

A short explanation of Cypress main folder structure:

  • Fixtures: Is meant to contain all fixed data used in tests.
  • Integration: Folder for all the specs. Cypress looks for tests into this directory by default.
  • Plugins: May contain all data needed to change Cypress behavior.
  • Support: Will consist of files accessible to all the other files in the Cypress directory. In this course, it will be mostly used to store configuration and helper commands.

Opening Cypress

The easiest way to open Cypress is to run the following command:

npx cypress open

Npx is a package to run node executables, it is included in npm.

TIP: To run all tests without opening Cypress GUI use:

npx cypress run
Cypress first opening

To run a single set of tests just click any of them, for starters run todo.spec.js.

todo.spec.js

Congratulations, you have successfully installed Cypress into your project!