Tutorials Hut

  • Cypress tutorials

  • Cypress install and project setup

    In cypress install and setup article we will get the system setup ready that is required to start working with cypress, its installation and set up steps.
    Cypress is a javascript project so it requires Node.js . So to start with cypress we require below:

    Cypress Installation and Project Setup

    Node.js and its setup

    What is Node .js?

    Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.  To have a runtime environment for Javascript we need to install Node.js and create an environment variable for it. Steps for Node.js setup :

      1.  Navigate to the official site of Node.js and download Node https://nodejs.org/en/download/.
      2. Install the Node.js and it will install in the program files in C directory.
    install nodejs
    install nodejs
    install nodejs

    3. Set up environment variable so that node is globally recognized in system.

    Copy path till C:\Program Files\nodejs and set in environment variable

    set environment variable nodejs

    4. Check if setup is completed by typing ‘node -v’ in command prompt.

    nodejs version

    Setup Visual Studio code

    Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded 

    Steps to download:

      1. Navigate to official site and download the VS code. https://code.visualstudio.com/download
      2. Once the exee for Visual studio is downloaded , double click and click on Next , Next button to complete the setup.
    Visual Studio code install

    3. Last screen click finish and launch Visual studio.

    Visual Studio code install complete

    4. First time when the Visual studio open the screen appears as below:

    Visual Studio first time window

    Create a new Project is Visual Studio with package.json

    The package. json file is the heart of any Node project. It records important metadata about a project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package

    Steps to create a new project in Visual studio: 1. Open the Visual studio terminal by clicking on left corner cross button. 2. Create an empty folder using mkdir command and navigate to the folder.

    Make directory visual studio code

    3. Now to create default package.json type the command npm init

    npm init

    and press enter till below:

    package json created

    4. Open folder created above in Visual Studio. By click on Open Folder on explorer.

    Folder with package json

    5. Folder opens and has package.json file in it.

    6. Now in the terminal type npm install cypress

    npm install cypress

      or npm install cypress –save-dev ( it will show the cypress version in package.json)

    npm install cypress

    7. Node_modules is displayed under the project folder.

    cypress node modules

    Now we are ready to start with UI automation using cypress .
    Read next tutorials to see how to open cypress and work with cypress Test Runner.

    Points to read:

    Npm is node package manager
    npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.

    About Author

  • 7. Node_modules is displayed under the project folder.

    Leave a Reply

    Your email address will not be published. Required fields are marked *