前端E2E測試框架 cypress瞭解一下

時間 2019-11-07

標籤前端 e2e 測試框架 cypress 瞭解一下简体版

原文原文鏈接

What is E2E?

所謂的E2E就是end-to-end。
假設咱們編寫的每一個功能程序都是一個黑匣子，最終用戶也只會看到這個黑匣子，那麼站在用戶的角度來看並不須要知道這個黑匣子內部是什麼東西也不須要知道怎麼實現的，我只管知道最終效果是否是咱們想要的。
那麼映射到前端這邊的話就是：我無論你邏輯使用什麼框架什麼邏輯寫的，我只想知道瀏覽器上我要的交互效果，ui展現效果是否是正確的，功能使用上是否是正確的，那麼這就叫E2E測試。javascript

What is cypress?

打開他Github一目瞭然. https://github.com/cypress-io...
簡單的來講。cypress是一款開箱即用,能夠跑在Chrome瀏覽器上的測試工具。
這種狀況下其實很適合開發時模擬各類場景，好比某些接口須要特定操做才能夠請求到，而且請求以後又要作不少ui操做，這個時候就能夠利用Cypress來模擬用戶操做了，一方面能夠測試代碼是否正確，而且還能看到ui相應變化是否符合預期。一樣，測試 fail 了也能夠直接調試。html

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腳本.vue

// 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界面。java

這個時候咱們的測試文件就能夠訪問了，點擊以後發現他須要咱們編寫測試用例，那麼接下來就手把手教你編寫基本的測試用例。node

舉個?

首先咱們將App.vue改形成這樣.webpack

<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界面中看到：ios