Install Cypress
注明本文转载于：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
注明本文转载于：https://www.toolsqa.com/cypress/install-cypress/
Install Cypress相关推荐
- e2e测试框架之Cypress
谈起web自动化测试,大家首先想到的是Selenium!随着近几年前端技术的发展,出现了不少前端测试框架,这些测试框架大多并不依赖于Selenium,这一点跟后端测试框架有很大不同,如Robot Fr ...
- 动手开发第一个 Cypress 测试应用
命令行安装 Cypress: npm install cypress --save-dev npm init 编辑package.json,添加如下的 json 语句: "scripts&q ...
- cypress测试脚本_Cypress 自动化测试学习使用
安装 mkdir cypress-start npm install # 进入创建的项目目录 cd /your/project/path cd cypress-start npm install cy ...
- 从0开始学习自动化测试框架cypress(五)总结
一.下载环境: cypress.zip解压运行examples或npm install cypress 二.简单使用 1.常用文件夹 fixtures: 保存json文件 integration: 保 ...
- 从0开始学习自动化测试框架cypress(一)
安装cypress 前提是已经安装nodejs mkdir cypress cd cypress npm install cypress --save-dev --registry=https://r ...
- Mac系统下Cypress使用初体验
1.安装cypress 打开终端依次输入如下命令: mkdir CypressTest cd CypressTest npm install cypress --save-dev npm init - ...
- UI自动化工具Cypress测试案例、生成报告---windows版
一.提前环境准备 node.js chrome浏览器 二.拉取gitLad上的测试案例代码 例如:拉取下来的文件夹是 -\xbox_test\cypress–0.4 如图: 三.进入拉取代码的根目录 ...
- UI自动化工具Cypress测试案例、生成报告---Linux版
一.提前环境准备 node.js 必须 二.拉取gitLad上的测试案例代码 例如:拉取下来的文件夹是 -/xbox_test/cypress–0.4 如图:目录示范 三.进入拉取代码的根目录 例如: ...
- cypress 自动化测试
文章目录 前言 一.简介 二.原理 三.特性 四.优势 五.安装使用 1. npm install cypress --save-dev # 安装cypress 1.1 在项目根目录下增加配置文件cy ...
- Cypress入门-（一）如何安装Cypress
Cypress介绍和原理之类的就不说了,自己查查都能查到,直接上干货-安装教程 一.下载安装node.js 1.下载地址:https://nodejs.org/en/ 电脑是win10的话一般都下载最 ...
最新文章
- apache+jk+tomcat集群+session同步
- 【c++】4.std::shared_ptr、std::make_shared、 .get() 、.data()、void *p 的用法、裸指针
- linux下安装jira详细步骤
- Linux系统日常管理1
- 买了社保，再买农村医保是不是多余？
- python3.6---之f'{}'
- [渝粤教育] 浙江大学 2021 2022秋数码摄影技术 参考 资料
- 编程基础(三)——体系结构之二
- comsol 裂隙 耦合_使用COMSOL建立多重连续介质渗流模型
- vpp之node节点分析二: qs类型
- c++Windows怎样关机【详解】
- 【星辰傀儡线·命运环·卷一 血鸦】 8 伏击影袭
- 时差怎么理解_懂的人自然懂，不懂的人再多解释也有时差
- blowfish算法c语言,Blowfish 算法工具(Blowfish Tool)
- Elasticsearch _reindex Alias使用
- 小白也学得会！Python编程超简单方法算圆周率
- win10 引导系统损坏 和 bios设置
- 截取计算机全屏画面的方法有,电脑怎么截图全屏 详细方法介绍
- USB过压过流保护IC
- macOS微信客户端插件，支持免认证登录、多账号登录以及防撤回