Installation

Owned by Mike Deskis
Last updated: Nov 12, 2024 by Ioana Kocurova
5 min read

This page describes full installation from scratch - it will install everything you will need including the testing project. No previous knowledge or configuration is required. The following steps were done on Mac, but there should be no major difference with Windows.

Prerequisites

To run Cypress for the first time, we need to install this:

  1. Chrome

  2. Node.js

  3. Git

  4. IDE (Visual Studio Code. You can use also another editor on environment which allows you to display and edit the project (e.c. IntellIJ Idea).

There are other possibilities, but to make the first steps easier we expect the same installation for everybody.

Chrome

  • Note that Safari or IE are not supported

  • Another option is Mozilla Firefox

  • Cypress.io can be used on Windows and on Mac, so just install Chrome for your platform

Node.js

  • Run Chrome, search for “node js“

  • Open nodejs.org and download the last stable version

  • Install the downloaded version - use all default settings, no changes are needed

Git

  • Run Chrome, search for “git“

  • Open git-scm.com and download the last stable version

  • Install the downloaded version - use all default settings, no changes are needed

Visual Studio Code

  • Run Chrome, search for “Visual Studio Code“

  • Download the last stable version

  • Install the downloaded version - use all default settings, no changes are needed

  • Create an icon on your desktop

 

For the first time, you can try fast install described in this presentation and using GUI version of cypress.

 

Check the installation is correct:

  1. Launch Visual Studio Code

  2. Display Terminal window (if it is not displayed already)

  3. Select default shell (command prompt for Windows, bash for Mac)

  4. write node -v to check node.js version

  5. if the version is not displayed, you need to restart Visual Studio Code

  6. write npm -v to check version of node package manager

Clone new project from GIT:

For demonstration purposes there is possible to download open source project from GIT. Let's use it as an example, and other (real) projects will be cloned by using same procedure.

  1. Create a new folder in your computer and name it (name can not contain spaces) as an example we will name it as GITRepo. Remember where did you save this folder (in Desktop in this example).

  2. go to https://github.com/and enter ngx-cypress-test to the search field

  3. click on the following link (should be the first one)

3. Next step is click on Clone or download and some link shows up. Copy this link.

4. On your computer open Terminal and use the following commands (ls and cd):

(note the following example is from Mac, see also the screenshot below)

Identification of your machine: ~YourUser$ ls ……….. (list of all folders is displayed now)

Identification of your machine: ~YourUser$ cd Desktop …. (now you will navigate to the folder you created in step 1 - for me it was Desktop/GITRepo)

Identification of your machine: ~YourUser$ ls ……….. (will display a list of directories in Desktop folder)

Identification of your machine: ~YourUser$ cd GITRepo ….. (now I am in the correct folder)

Identification of your machine: ~YourUser$ git clone GitHub - bondar-artem/ngx-cypress-test: Modified lightweight version of NGX-Admin project from Akveo.com to practice Cypress automation ……………………………………………………. (write git clone and then paste the link you copied in step 3)

press ENTER

cloning of the project will follow now and it will look like:

Cloning into 'ngx-cypress-test'...

remote: Enumerating objects: 7335, done.

remote: Counting objects: 100% (7335/7335), done.

remote: Compressing objects: 100% (2301/2301), done.

remote: Total 7335 (delta 4959), reused 7326 (delta 4951), pack-reused 0

Receiving objects: 100% (7335/7335), 13.17 MiB | 8.44 MiB/s, done.

Resolving deltas: 100% (4959/4959), done.

 

Here is an example from terminal:

You can also use clone repository directly via Visual studio code or using GIT.

5. open Visual Studio Code and check that the project was cloned successfully - you should see NGX-CYPRESS-TEST folder in the directory structure on the left:

(note the open source project we are using here is under MIT license (https://opensource.org/licenses/MIT) so it can be used for the purpose we are using it here )

The project is now cloned properly

 

Install all dependencies and deploy the test application on your machine

  1. open Visual Studio Code

  2. open folder NGX-CYPRESS-TEST (this is the one you created during cloning the project)

  3. open new Terminal window in Visual Studio Code

  4. run command npm install in the terminal (node package manager will look into package.json file and download all devDependencies)

  5. ignore all vulnerabilities (application will work)

  6. run command npm start in the terminal (it will deploy the application)

  7. check the confirmation the application has been deployed

  8. open http://localhost:4200 in Chrome to check the application is really running

  9. open terminal and write command “npm install cypress --save-dev”

  10. after Cypress installation write command “npx cypress test”. After installing Cypress open Visual studio core and open “package.json” → devDependencies - here you should see cypress: 4.7.0 (or other version). Once it is there the installation was completed successfully.

     

Configure default behaviour of Cypress

The default behavior of Cypress can be modified by supplying some of the following configuration options. More information can be found here:

https://docs.cypress.io/guides/references/configuration.html#Options

  1. open Visual studio code → NGX-CYPRESS-TEST → cypress.json and enter following commands:

Note : Please check if cypress.json file is not created by default, then create the new file and save it as cypress.json and enter the above mentioned commands.

Base URL: URL used as prefix for cy.visit() or cy.request() command’s URL

Ignore test files: A String or Array of glob patterns used to ignore test files that would otherwise be shown in your list of tests.

viewportHeight: Default height in pixels for the application under tests’ viewport (Override with cy.viewport() command)

viewportWidht: Default width in pixels for the application under tests’ viewport. (Override with cy.viewport() command)

Don’t forget to save it:

 

2. After this configuration write following command to VSC terminal: npx cypress open

Cypress will be open with no tests loaded.

Hint: If you used Ignore test files and you are still able to see tests in Cypress open VSC and reopen.

3. In VSC go to NGX-CYPRESS-TEST → cypress → integration

Do right click on folder integration and select New file. Name this file as firstTest.specs.js

Now go to Cypress and this will be the first test which is created for the project.