cypress 前端自动化测试实践一（安装配置）

一、安装

前提条件： 需要安装nodejs和npm，通过npm安装cypress

• 方式一：使用npm安装

  cd /your/project/path
  npm install cypress --save-dev

• 方式二：使用yarn安装

  cd /your/project/path
  yarn add cypress --dev

• 方式三：全局安装，方便以后其他项目快速安装

  npm i cypress -g

二、文件配置

在cypress.json文件中（没有这个文件的话就自己创建一个）可以配置一些cypress的基本设置，配置如下 ：

{
    "baseUrl": "http://localhost:8080", // 测试域名，这里可具体项目更改
    "integrationFolder": "cypress/integration", // 测试文件存放目录
    "testFiles": "**/*..spec.js", // 根据规则匹配具体测试文件，可根据喜好任意更改
    "video": false, // 是否使用录制功能 需要的话具体去看官方介绍就好，这边暂时用不上
    "viewportHeight": 800, // 测试浏览器视口高度
    "viewportWidth": 1600, // 测试浏览器视口宽度
    "env":{  // 设置环境常量，使用时直接 Cypress.env('xxx')就能得到 'yyy'
        "xxx":"yyy"
	}
}

详细配置项可参考：https://www.cnblogs.com/leozhanggg/p/11011110.html

三、启动

1.进入项目目录，在package.json下写入

"cypress:open": "cypress open",

linux系统可直接使用这个命令

./node_modules/.bin/cypress open

windows直接运行命令

npm run cypress:open2.在项目中的packasge.json中配置启动命令启动

"scripts": {
    "cypress": "cypress run --headless",
}

使用命令npm run cypress 运行测试, 这种方式启动为无浏览器启动，适用于管道中使用自动化测试命令

四、目录结构

- cypress // cypress目录
---- fixtures 测试数据配置文件，可以使用fixture方法读取
---- integration 测试脚本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件

安装完成后目录结构如下

完成