DEV Community

Cover image for Cypress: Complete Setup Guide
Anandteerth Onkar
Anandteerth Onkar

Posted on

Cypress: Complete Setup Guide

This blog post is a simple and easy guide for the first time Cypress users, who wish to setup Cypress on their Windows machines.


Environment Setup:

  • Install node.js and Set node_home (Open Environment Variables and add the node bin folder path to Paths).

image

  • Install Visual Studio Code a.k.a VS Code(Recommended IDE for JS/TS projects.

  • Install plugins highlighted in image below to VS Code, by going to plugins tab.

image


Installing & Setting up Cypress:.

  • Create a project folder (Note: Don't name it as Cypress).

Let's says you named it: 'CypressAutomationProject'.

  • Open the project folder in VS Code.

image

  • In VS Code terminal, run a command - npm init .
    • Enter the package name and just hit enter for other options leaving them blank.

image

This will create a new package.json file in your project folder.

image

  • In VS Code terminal, run a command - npm install --save-dev cypress.

This will install the latest Cypress version locally as a dev dependency for your project.
node_modules folder will be created in main project folder.

image

Note: At this moment you won't be able to see the Cypress folder in your project folder. This is a bit tricky, as the suspense reveals in the next command.

  • In VS Code terminal, run a command - ./node_modules/.bin/cypress open or npx cypress open.

image

  • When you run this command, the Cypress Test Runner is opened, and now you can see a Cypress folder created in your project folder.

  • You can click on any of the spec file listed in test runner, and see Cypress in action. ( I will include the details of test runner in my next blog article).


Cypress Project Configuration:

These configuration serve as the key aspects to the cypress project.

There are 3 main configuration files:

1) jsconfig.json

  • Not present by default, need to create.
  • Therefore the step here is to create a jsconfig.json file under main project folder - 'CypressAutomationProject'.

  • Enter below code & Save the file:

{
    "include": [
      "./node_modules/cypress",
      "cypress/**/*.js"
    ]
}
Enter fullscreen mode Exit fullscreen mode

image

NOTE: The definition in this file helps us to populate all cypress commands (methods) to be used in project spec files (i.e. Test Scripts).


2) cypress.json

  • Present, nested under cypress folder inside main project folder. (Project Folder > cypress > cypress.json).

    • We use this file to view default settings or update the default project settings (Closely related to Cypress).
  • The settings can be viewed on Cypress Test Runner under Settings tab.

  • In cypress.json, the main line of code to be entered is:
{
   "$schema": "https://on.cypress.io/cypress.schema.json"
}
Enter fullscreen mode Exit fullscreen mode

image

  • This acts as an intellisense that populates all cypress settings automatically (After type double quotes you can see the list).

3) package.json

  • Present, nested under main project folder. (Project Folder > cypress > package.json).

  • This is related to Node.js, where devDependencies and Scripts can be defined.

  • We are going to define scripts in this file to run the cypress in Head and Headless mode.

  • Remove the default test script present and enter below lines lines of code under the scripts object and save the file.

{
 "scripts" : {
    "cy:open": "./node_modules/.bin/cypress open",
    "cy:run": "./node_modules/.bin/cypress run"
   }
}
Enter fullscreen mode Exit fullscreen mode

image

  • To run the scripts in Head mode, run command: npm run cy:open.
    (Note: This actually opens up test runner).

  • To run the scripts in Headless mode, run command: npm run cy:run.


Hurray! Your machine is now setup to use Cypress. Enjoy every bit of it, It's really an awesome tool.
Any queries related to cypress, please post them in comments.

Discussion (0)