一、简介

作为自动化之新星的Cypress，在某种程度上集合了接口测试（python+request）及UI测试（python+selenium），既适合测试童鞋做自动化测试，也适合开发童鞋进行代码自测。

Cypress官网地址：Why Cypress? | Cypress Documentation

二、环境搭建

环境搭建将分为两部分阐述：本地环境与项目环境，其中本地环境搭建适合测试童鞋进行自动化回归测试；项目环境适合开发童鞋自测。

备注：本章节的安装步骤基于windows10。

1.本地环境安装

1.1 安装node.js

1.官网下载：Node.js （如需在项目中使用，需和开发侧版本保持一致，避免后续报版本错误）

傻瓜式安装到Custom Setup这步，选择Add to PATH后再傻瓜式安装：

 2.查看环境变量命令：echo %PATH%

3.查看安装成功：node -v，最新版的默认同时安装npm，查看安装命令：npm -v

1.2 通过npm安装yarn（该步骤在本地环境可以跳过）

安装命令：npm install -g yarn

查看安装成功命令：yarn --version

1.3 创建一个文件夹:Cypress_test

1.4 初始化命令

后续命令可以通过cmd操作或者在Visual Studio Code（前端开发工具）操作,本人使用VSC操作。通过VSC打开该文件夹后打开终端，输入npm初始化命令：npm init -y（参数-y表示全部步骤强行yes），此时会多一个文件：package.json，表示初始化成功。

同样也可以执行yarn 命令（与npm使用一致）：yarn init -y

注意！！！VSC第一次使用Yarn命令会报权限禁止运行脚本错误，需开启权限

1.5 安装cypress：yarn add cypress -D 或者npm i cypress -S -D

1.6 在packasge.json配置开启快捷命令后保存文件:

"scripts": {

    "cypress: open": "cypress open"

  }

1.7 启动cypess：yarn cypress open 或者npx cypress open（注意是npx喔，不是npm喔）

 启动成功后，右边有cypress自带的demo，运行即进入自动化的大门啦~

2. 项目搭建

2.1 下载git

官网地址：Git - Downloads

安装完成后复制文件的绝对路径，拷贝到环境变量

F:toolgitGitcmd;F:toolgitGitmingw64libexecgit-core;（根据自己实际路径来拷贝），点击三个‘确定’按钮。

验证配置成功：

然后在开始菜单里找到“Git” ->‘Git Bash’，会弹出一个类似CMD的窗口，表示安装Git成功咯~

2.2 配置Git

因为Git是分布式版本控制系统，因此呢需要通过使用名字和邮件地址来自报家门

在‘Git-Bash’中输入以下两行命令：

$ git config --global user.name "Your Name"
$ git config --global user.email "[email protected]"

由于global是全局参数，因此本机的所有Git仓库都会使用这个暗号。

2.3 和本地环境一样，需下载node.js，安装npm和yarn

参考本地环境章节，不再赘述，已安装过的无需再装

2.4 拉取Git代码

1.在电脑创建一个文件夹：需确保所有路径为英文名，避免各种踩坑

2.检查C:UsersAdministrator 目录是否有 .ssh 文件夹，如没有，可通过命令生成，方便远程访问

命令：$ ssh-keygen -t rsa -C"输入你的邮箱"，一直enter

2.5 登录Git仓库配置ssh

 用记事本打开C:UsersAdministrator 目录里的.ssh文件夹里的id_rsa.pub文件，把里面的公共秘钥复制到SSH KEY

填写标题后点击‘添加秘钥’

 2.6 添加代码远程地址

在刚刚创建的文件夹，在文件夹名右键选择‘Git Bash Here’

输入命令：

git remote add origin "拷贝Git仓库地址"

2.7 拷贝代码到本地

git clone git@git.代码仓库地址.git 或者git config --global url."代码仓库地址".insteadOf git://

2.8 进入拷贝好的项目文件夹

cd 文件夹名称

2.9 安装yarn

输入yarn命令

里面有两个文件在外网，有时会安装失败，多装几次直到成功

 安装成功验证：

2.10 启动服务

yarn serve

 若报错，重新启动，验证成功：

浏览器会启动本地服务，恭喜你成功啦~~

2.11 安装、启动、配置Cypress

参考本地环境的该部分

Node.js