註明本文轉載於：https://www.toolsqa.com/cypress/install-cypress/
Install Cypress
In the previous article, we understood the basics of Cypress and how it has created its unique place in the emerging software industry. Now, it’s the time for actual action! We will go step by step to understand installation and setup Cypress on a user’s machine. In this article, we will cover How to Install Cypress:
- How to create a new Node project?
- What is the package.json file?
- How to Install Cypress?
Pre-requisites
We have specific pre-requisites before we start Cypress Installation :
- Install Node JS: As we know that Node.js is a JavaScript runtime environment and Cypress being a Node-based application, the first step in the journey of Cypress will be to install and set up Node.js. So before we rush to Cypress, let’s follow step by step guidelines mentioned in the tutorial “Install Node JS and Setup NPM” to setup Node and NPM successfully on our system.
- Install Visual Studio Code: After having Node setup successfully, the next thing is to have IDE. In our tutorials, we will be using Visual Studio Code Editor, which is a lightweight but powerful source code editor and comes with inbuilt support for JavaScript. For having IDE setup and getting a brief introduction about the same, please follow step by step guidelines in the tutorial “Install Visual Studio Code Editor” to have a glimpse about the same.
So after getting both the pre-requisite done, please follow the below steps for the project setup.
How to Create a new Node project?
When we open Visual Studio Code editor, for the first time, it comes open with Welcome tab information. Our next step is to initiate and create a new node project, and for that, we need first to create our workspace.
As shown in the above figure, under the Start Label, you will see multiple options. Click on the “Add workspace folder” link to add/select a new folder, which will save all your future projects. Name the new folder as “CypressWorkshop.” After that, the Folder hierarchy will look in the left panel of the VS Code as below:
As you can see, it, by default, created a new workspace with “UNTITLED.” You can save the workspace with a proper name by clicking on the “File >> Save Workspace as” menu as shown below:
Note: You can keep the workspace folder as “UNTITLED” if you are just going to create only one project.
Give the workspace a name as “Cypress” and save it. It will create a file “Cypress.code-workspace.” You can add all the project folders under this Workspace, and it will make an entry of the path of the project folder in the “Cypress.code-workspace.” folder.
What is the package.json file?
All NPM packages contain a file; usually, in the project root, called package.json, this file holds various metadata and libraries relevant to the project. This file gives information to NPM that allows it to identify the project as well as handle the project’s dependencies. It is similar to pom.xml from Maven and build.gradle in Gradle. Assuming that you have already installed a node, we must first create a package.json file. The npm utility can help you with that.
Steps to Generate package.json
For generating the package.json file for our project, we will start with npm init either in Terminal of Visual Code or command prompt. It will initiate the npm and will ask us some details that need to be provided by the user before it generates the package.json file. Please follow the steps mentioned below:
Type below command on the terminal under your project directory:
|
1 |
npm init |
As soon as you type the command and press “Enter” key to execute the command, it will ask for a few details as shown in the following screenshot:
Where,
- package name: Name of the package created. The user needs to enter this details
- version: a version of your application/package. It can help in creating different versions of your package.
- description: additional detail that one needs to provide for the package. Users can leave this blank as well.
- entry point: What is the entry point for your application. It is pre-populated with index.js, so this needs no change.
- test command: command that needs to run for testing of the application. If you have created any command which runs your test, you can set it there.
- git repository: the path to git repository
- keywords: any keywords to uniquely identify your package.
- author: author of the repository which is generally the username
The console will show the path where package.json file is saved and will ask for a confirmation whether that is correct or not? as highlighted below.
So after entering all the project details as per your need, your package.json will look like below. Moreover, it will contain all the details entered at the time of npm init.
|
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "automation", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "AashishKhetarpal", "license": "ISC" } |
Below is the screenshot of how your project will look like after doing npm init. Here the package.json has the same information as we shared above.
The significance of these keys is already detailed above. Moreover, now we also know that how these details got saved in the package.json file. You can open the file in VS Code and view the content of the same. It completes the instantiation of the new Node project, which will use further for our test automation development using Cypress.
How to Install Cypress?
Till now, we have downloaded node and initialized npm, which sets up the initial base project. Now our next step is to install Cypress so that we can start writing our tests. We have below options to download Cypress:
- Direct Download: Cypress can be downloaded directly from the Cypress CDN (https://download.cypress.io/desktop). The direct download will always download the latest version for your platform. It will download a zip file, which can be extracted by the user.
- Download using npm: Use below command to download Cypress using the node package manager. Moreover, we have to execute this command in the same directory, which means inside the Project folder itself that we mentioned while doing npm init above.
|
1 |
npm install cypress --save-dev |
It will show a sample output as below:
It will install the latest version of Cypress for you and –save-dev saves the dependencies in package.json so that if you share this project with a colleague, he/she need not repeat the same activity. But if you are opening any Project folder and if package.json does not have cypress dependency in it, then we need to run above command again. Additionally, you can validate the same by opening the package.json file in the Visual Code, as shown below:
Note: It shows the cypress dependency, which adds to the package.json file. Currently, it is showing v3.6.0. But since this was the latest version while writing this tutorial, you will get the most updated version present at that time.
It shows a sample output if the user runs the “npm install cypress –save-dev” command directly from the VS Code terminal.
So, this completes our basic setup of a Node project and including the Cypress dependency in the same. Now, we are all geared up to kick off our journey for the development of an automation framework using Cypress.
Key Takeaways
- Node.js is the initial requirement for any Cypress based automation framework. Moreover, its installation is easy on all the supported platforms by using the corresponding installers.
- IDEs make the life of a developer very easy by providing various supports for language constructs. Additionally, Visual Studio Code is one of the most used IDEs for javascript based development. Subsequently, we will use the same for our tutorials.
- Cypress can be installed either as standalone or using Node’s package managers. We have used NPM (Node package manager) for our initial setup and installation of Cypress as an NPM dependency.
Conclusively, we are all set up with the basic configurations of Cypress. Let’s now move to the next article where we will write Cypress Test Case.
Category: CypressBy Aashish KhetarpalApril 4, 2020