Cypress自动化环境搭建

一、Cypress 下载：

官网下载，下载后直接解压便可，解压后即可单机exe文件打开

Ps：直接打开exe是会报错找不到json文件的，因此还要安装依赖环境

运行cypress项目前，必须vue-cli建立项目，可是vue是基于node环境的，因此咱们还要先安装node.js

 

二、安装node.js

官网下载地址：https://nodejs.org/en/download/

安装步骤就不说了，傻瓜式一键继续安装

查看是否安装成功命令

node –v  ：查看node版本

npm –v ：查看npm版本

ps：新的node安装包已经包换了npm

 

2.一、node环境配置

这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之因此要配置，是由于之后在执行相似：npm install express [-g] （后面的可选参数-g，g表明global全局安装的意思）的安装语句时，会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中，占C盘空间

 

例如：我但愿将全模块所在路径和缓存路径放在我node.js安装的文件夹中，则在我安装的文件夹【D:\Develop\nodejs】下建立两个文件夹【node_global】及【node_cache】以下图：

 

建立完两个空文件夹以后，打开cmd命令窗口，输入

npm config set prefix "D:\Develop\nodejs\node_global"

npm config set cache "D:\Develop\nodejs\node_cache"

 

而后就是设置环境变量了

新建NODE_PATH  输入【D:\Develop\nodejs\node_global\node_modules】

而后将【用户变量】下的【Path】修改成【D:\Develop\nodejs\node_global】

Ps：是用户变量的path，不是全局的path

 

测试：

配置完后，安装个module测试下，咱们就安装最经常使用的express模块，打开cmd窗口，
输入以下命令进行模块的全局安装：

npm install express -g     # -g是全局安装的意思

 

Ps：当时安装的时候并未出现node_golbal路径，好像也并没有关系，反正已经安装好

参考文档：http://www.javashuo.com/article/p-mpdcimfc-hw.html

  

三、vue-cli建立项目

安装vue-cli

npm install -g vue-cli

以后能够经过vue list来查看可使用哪些模板

 

 

建立项目

vue init webpack <your project name>

ps：建立项目后会建立一堆文件

进入项目

cd project

经过npm安装依赖

npm install

npm i cypress –save-dev  （安装cypress依赖）

安装依赖后，在项目根目录建立cypress.json文件并添加如下配置信息

{

"baseUrl": "http://localhost:8080",  //测试域名

"integrationFolder": "cypress/integration",  //测试文件存放目录

"testFiles": "**/*.cypress.spec.js", //根据规则匹配具体测试文件，可修改

"vedio": false, //是否使用录制功能

"viewportHeight": 800, //浏览器高度

"viewportWidth": 1600 //浏览器宽度

}

 

Ps：具体配置的时候，把注释去掉，否则会报错

修改package.json文件，添加cypress配置信息，以下

"cypress": "cypress run",

"cypress-gui": "cypress open"

 

Ps:若是json报错，可用在线json格式化检测工具检测是否报错

 

四、启动cypress

到这里，配置就已经差很少了，cmd运行启动命令：npm run cypress-gui

没报错的话能够启动cypress了

以下图；

 

 

未找到测试文件，由于咱们还未建立而已，不是报错

下面咱们先编写js测试文件，先测试打开咱们的测试网站

在integration目录下建立测试文件test.cypress.spec.js

describe('My First Test', function() {

  it('Visits the Kitchen Sink', function() {

    cy.visit('https://sz.ichunt.com')

 

cy.contains('closemz').click()

  })

})

 

页面打开以下图；

Cypress配置参考地址：https://www.imooc.com/article/details/id/28054

脚本编写参考cypress官方文档：

https://docs.cypress.io/api/api/table-of-contents.html

https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Step-3-Click-an-element

 

同时控制台也会输出相应的操做日子

 

 

至此环境是已经搭建好了，可是具体使用的话，还要去深刻学习一下哦。。。