前端E2E测试框架 cypress了解一下

What is E2E?

所谓的E2E就是end-to-end。
假设我们编写的每个功能程序都是一个黑匣子，最终用户也只会看到这个黑匣子，那么站在用户的角度来看并不需要知道这个黑匣子内部是什么东西也不需要知道怎么实现的，我只管知道最终效果是不是我们想要的。
那么映射到前端这边的话就是：我不管你逻辑使用什么框架什么逻辑写的，我只想知道浏览器上我要的交互效果，ui展示效果是不是正确的，功能使用上是不是正确的，那么这就叫E2E测试。

What is cypress?

打开他Github一目了然. https://github.com/cypress-io...
简单的来说。cypress是一款开箱即用,可以跑在Chrome浏览器上的测试工具。
这种情况下其实很适合开发时模拟各种场景，比如某些接口需要特定操作才可以请求到，并且请求之后又要做很多ui操作，这个时候就可以利用Cypress来模拟用户操作了，一方面可以测试代码是否正确，并且还能看到ui相应变化是否符合预期。同样，测试 fail 了也可以直接调试。

How to use it?

对于新工具的介绍我觉得所有不给出具体例子就直接抛下官方文档的行为都是耍流氓。
所以我这边给出基本使用案例，手把手教你如何做一些基本情况的测试，至于之后的进阶之路，就需要靠你自己啦！
这边为了简单起见我还是用vue-cli构建一个基本应用并在这个应用中教你怎么使用cypress。
系好安全带，老司机即将发车～

从0开始 环境搭建

1.项目初始化，安装依赖

// 首先，进入桌面，使用vue-cli创建vue项目，并安装相应依赖
vue init webpack vue-cypress-demo

// 进入项目目录
cd vue-cypress-demo

// 安装cypress
npm i cypress --save-dev

2.安装好依赖在项目根目录下创建cypress.json文件并编写配置信息

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

3.启动

说来你可能不信，我们已经搭建好了测试环境，那么接下来我们要来启动cypress。
由于没有装全局的cypress依赖命令行中无法识别我们的cypress命令。
故我们需要在package.json中添加scripts脚本.

// package.json
{
    "scripts": {
        "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
        "start": "npm run dev",
        "lint": "eslint --ext .js,.vue src",
        "build": "node build/build.js",
        "cypress": "cypress run",
        "cypress-gui": "cypress open"
    }
}

这时候打开命令行输入 npm run cypress-gui。
之后cypress会创建一个gui界面。
初次启动会帮你创建以下文件夹,点击ok.

之后我们会看到这个页面，这是因为还没匹配到对应的测试文件。 .

我们可以进入cypress/integration目录创建一个test.cypress.spec.js文件，再来看我们的gui界面。

这个时候我们的测试文件就可以访问了，点击之后发现他需要我们编写测试用例，那么接下来就手把手教你编写基本的测试用例。

举个?

首先我们将App.vue改造成这样.

<template>
  <div id="app">
    <h1>Hello cypress</h1>
    <div class="test">我是：{{user}}</div>
    <button class="btn" @click="test">{{btn}}</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data () {
    return {
      user: '',
      btn: '测试按钮'
    }
  },
  created () {
    axios.get('http://localhost:8080/api/user.json').then(res => {
      this.user = res.data.user
    })
  },
  methods: {
    test () {
        this.btn = '点击过'
    }
  }
}
</script>

编写测试用例

// cypress/integration/test.cypress.test.js
describe('测试', () => {
    // 测试用例触发前调用的函数钩子
    before(() => {
        // 进入测试页面
        cy.visit('/');
    });

    it('测试是否包含指定文案', () => {
        cy.contains('Hello cypress');
    });
    
    it('获取指定元素', () => {
        cy.get('.test').contains('我是');
    }); 
    
    it('代理本地请求并修改成任意数据', () => {
        cy.server();
        // 拦截/api/user请求并传入自定义数据
        cy.route('/api/user', {user: 'frank'}).as('user');
        cy.visit('/');
    });
    
    it('代理本地请求并使用mock数据', () => {
        cy.server();
        // 请求本地 cypress/fixtrues/user.json文件（需要先创建） then方法可修改成任意数据，若不需要修改可不写
        cy.fixture('/user.json').then(data => data).as('fix_user');
        // 拦截/api/user请求并传入mock数据
        cy.route('/api/user', '@fix_user').as('user');
        cy.visit('/');
    });
    
    it('测试点击事件', () => {
        cy.get('.btn').click();
    });
});

你会在GUI界面中看到：

以上这4种情况就是最基本的编写范例。
实际使用中肯定还会有很多种情况要判断，这边就做个简单的入门介绍，更多的api使用方式去官方文档查看即可。
官方文档： https://docs.cypress.io/api/i...