前端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...