karma + phantom + mocha + sion + chai + nightwatch + selenium2(webdriver) 測試框架學習

第三方的教程傳送門 

https://segmentfault.com/a/1190000004558796

  

karma

# github
https://github.com/karma-runner/karma
 # 安裝
http://karma-runner.github.io/1.0/intro/installation.html
 # 入門
http://karma-runner.github.io/1.0/intro/configuration.html

安裝

# 命令行工具
cnpm install -g karma-cli

# 核心
cnpm install karma --save-dev

# 其餘可能用到的插件
cnpm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev

使用<系統cmd>敲打如下命令；

使用<系統cmd>敲打如下命令；

使用<系統cmd>敲打如下命令；

# 新建一個test目錄
mkdir test

# 初始化karma配置. 文件名自定義，如my.conf.js也能夠，而後根據下圖個性化配置
karma init karma.conf.js

 

運行如下命令，查看驚豔的效果吧！

karma start karma.conf.js 

 

phantomjs

PhantomJS 是一個基於 WebKit 的服務器端 JavaScript API。它全面支持web而不需瀏覽器支持，其快速，原生支持各類Web標準： DOM 處理, CSS 選擇器, JSON, Canvas, 和 SVG。 PhantomJS 能夠用於 頁面自動化 ， 網絡監測 ， 網頁截屏 ，以及 無界面測試 等。

# 下載地址
http://phantomjs.org/download.html
 # 快速入門
http://phantomjs.org/quick-start.html

  

下載解壓以後，將 文件目錄/bin/phantomjs.exe 加入到全局環境中

  

新建一個hello.js文件，輸入如下代碼：

console.log('Hello, world!');
phantom.exit();

輸入命令行： 

phantom  hello.js 

能夠看到結果正常輸出了：  Hello, world!

 

再進一步看一個驚豔的效果，修改Js文件代碼：

/*
console.log('Hello, world!');
phantom.exit();
*/
var page = require('webpage').create();
page.open('http://www.baidu.com', function(status) {
  console.log("Status: " + status);
  if(status === "success") {
    page.render('example.png');
  }
  phantom.exit();
});

這段代碼的做用是打開baidu而且截圖。能夠在目錄下發現一個example.png圖片：

 

碉堡了有木有！！！ 

再來簡單學一下入參

var page = require('webpage').create(),
  system = require('system'),
  t, address;

if (system.args.length === 1) {
  console.log('Usage: loadspeed.js <some URL>');
  phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
  if (status !== 'success') {
    console.log('FAIL to load the address');
  } else {
    t = Date.now() - t;
    console.log('Loading ' + system.args[1]);
    console.log('Loading time ' + t + ' msec');
  }
  phantom.exit();
});

 

命令行中輸入：

 phantomjs hello.js http://www.baidu.com

 

返回結果：

Loading http://www.baidu.com
Loading time 4157 msec

 

dom操做

var page = require('webpage').create();
var url = 'http://www.baidu.com';
page.open(url, function(status) {
  var title = page.evaluate(function() {
    return document.title;
  });
  console.log('Page title is ' + title);
  phantom.exit();
});

 

監聽頁面的控制檯console輸出

var page = require('webpage').create();
var url = 'http://www.baidu.com';
page.onConsoleMessage = function(msg) {
  console.log('Page title is ' + msg);
};
page.open(url, function(status) {
  page.evaluate(function() {
    console.log(document.title);
  });
  phantom.exit();
});

  

mocha

等不及了部署了，直接經過vue-cli搭建測試框架學習

# 第三方學習資源
http://www.cnblogs.com/Leo_wl/p/5734889.html

# 阮一峯大神的mocha資料
http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html

再使用cnpm install進行安裝。而後就能夠開始測試了

查看目錄/test/unit/specs/Hello.spec.js。並加入一些學習代碼

import Vue from 'vue'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
  it('should render correct contents', () => {
    const Constructor = Vue.extend(Hello)
    const vm = new Constructor().$mount()
    expect(vm.$el.querySelector('.hello h1').textContent)
      .to.equal('Welcome to Your Vue.js App')
  })
})

describe('Array', () => {
  var expectTarget = []
  // it用於建立實際的測試，它在TDD中被成爲測試用例（Test-Case）.其第一個參數就是對該測試的描述，且該描述的語言應該是咱們的平常用於的句式（而非編程語言）。
  // 測試用例用it做爲函數名，其用意就是但願經過程序引導開發人員用書面的語言去描述測試喲用例的做用。
  // 如：'It should be done with ...' 或者 'It should be have some value'等。
  // 直接翻譯成中國話就是："這裏應該輸出XXX結果" 或者 '這裏應該完成XXX操做'這樣的句式
  // 這是偏向行爲式的描述方式
  it('這個數組的長度應該爲0', () => {
    var arr = []
    expect(arr).to.be.lengthOf(0)
  })

  // 單元測試的對象是某個特定的類或者模板，所以describe內才直接用類名進行描述，那麼it內最佳的方式應該是【方法名】或者【屬性名】
  it('#slice', () => {

  })

  it('#join', () => {

  })

  beforeEach(() => {
      expectTarget.push(1)
  });

  afterEach(() => {
    expectTarget = []
  })

  it('索引爲0的位置應該是一個值爲1的整數', () => {
      expect(expectTarget[0]).to.eqls(1)
  });

  it('能夠有多個期待值檢測', () => {
      expect(expectTarget[0]).to.eqls(1)
      expect(true).to.eqls(true)
  });
})

// 也就是說，
// 當測試用例用於測試指定的方法或屬性效果時，用「#+成員名」來方式命名
// 當測試用例的測試內容不能歸屬某個方法或者屬成員時，用「這裏應該輸出XXX結果」的句式陳述
// 當咱們但願跳過某個功能測試的時候，可使用Xdescribe或Xit來跳過。
// describe是能夠嵌套的
/**
 * beforeEach - 在每一個場景（describe）測試執行以前執行;
 * afterEach  - 在每一個場景 （describe）執行完成以後執行；
 * before     - 在全部場景執行以前執行（僅執行一次）；
 * after      - 在全部場景執行以後執行（僅執行一次）；
 */

執行測試代碼：npm run unit

 

編寫vue組件測試的正確姿式 ：

import Vue from 'vue'
import Hello from '@/components/Hello'
import MyComponent from './my-component.js'

describe('component', function() {
    it('測試組件', () => {
        let msgtext = '喵了個咪'
        // 製做組件
        Vue.component('MyComponent', MyComponent);
        const HtmlContainer = Vue.extend({
          data () {
            return {
              text: msgtext
            }
          }, 
          template: `<my-component :fuck='text'></my-component>`
        })
        const vm = new HtmlContainer({
            el: document.createElement('div'),
        })
        console.log(vm.$el)
        // expect(vm.$el.querySelector('span').textContent).to.be.eq(msgtext)
    })
});

 

nightwatch + selenium-standalone

# 優秀的第三方教程：搭建本身的前端自動化測試腳手架（一）
https://segmentfault.com/a/1190000005991670

# 該教程的資源github下載
https://github.com/LancerComet/Aniber

# selenium-standalone github地址
https://github.com/vvo/selenium-standalone

# nightwatch官網
http://nightwatchjs.org/

# nightwatch APIhttp://nightwatchjs.org/api#protocol