Cypress在项目中的使用

什么是cypress

cypress是一个基于js的端到端（end to end）的测试框架，可能大家有点对端到端的概念不太理解，就是能模拟用户的真实访问项目的操作，即：包含从请求地址到加载页面的所有流程。

cypress的优点

cypress可以模拟用户的真实操作，以及浏览器的不同分辨率的问题。同时可以录屏，将所有的操作进行的过程及结果都录下来作为将来的展示，或者演示示例，节省了每次新的项目完成之后，一遍一遍的录制操作视频的时间。更符合黑盒测试的定义。

cypress的弊端

cypress的优点之一是能模拟用户的操作，同时缺点也是因此而产生的，因为cypress能模拟用户的操作，也就意味着他要真的有一个已经提供服务的项目做为对应效果。cypress不能像Jest一样提供jsdom渲染器，导致对单独的组件测试的需求没有办法更好的实现。不适合做commit hook。

以下是自动化测试框架的横向比较

cypress的安装

//npm
npm install cypress --save-dev
//yarn
yarn add cypress --dev

cypress的运行调试

修改 package.json 文件，添加npm scripts。

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

也可以将上面的cypress open修改为：

npx cypress open

配置好这些就可以直接通过npm run cypress:open执行

当项目存在初次进入测试用例时，测试页面闪一下的问题可以通过在cypress.json文件中增加如下配置优化

{
  "baseUrl": "http://localhost:3000/", //主要这行起作用
  "reporterOptions": {
    "mochaFile": "results/test-[hash].xml",
    "toConsole": true
  },
  "watchForFileChanges": true,
  "experimentalSessionAndOrigin": true,
}