vue-cli腳手架基于Nightwatch的示例分析

小編給大家分享一下vue-cli腳手架基于Nightwatch的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

不同公司和組織之間的測(cè)試效率迥異。在這個(gè)富交互和響應(yīng)式處理隨處可見(jiàn)的時(shí)代，很多組織都使用敏捷的方式來(lái)開(kāi)發(fā)應(yīng)用，因此測(cè)試自動(dòng)化也成為軟件項(xiàng)目的必備部分。測(cè)試自動(dòng)化意味著使用軟件工具來(lái)反復(fù)運(yùn)行項(xiàng)目中的測(cè)試，并為回歸測(cè)試提供反饋。

端到端測(cè)試又簡(jiǎn)稱(chēng)E2E（End-To-End test）測(cè)試，它不同于單元測(cè)試側(cè)重于檢驗(yàn)函數(shù)的輸出結(jié)果，端到端測(cè)試將盡可能從用戶(hù)的視角，對(duì)真實(shí)系統(tǒng)的訪問(wèn)行為進(jìn)行仿真。對(duì)于Web應(yīng)用來(lái)說(shuō)，這意味著需要打開(kāi)瀏覽器、加載頁(yè)面、運(yùn)行JavaScript，以及進(jìn)行與DOM交互等操作。簡(jiǎn)言之，單元測(cè)試的功能只能確保單個(gè)組件的質(zhì)量，無(wú)法測(cè)試具體的業(yè)務(wù)流程是否運(yùn)作正常，而E2E卻正好與之相反，它是一個(gè)更高層次的面對(duì)組件與組件之間、用戶(hù)與真實(shí)環(huán)境之間的一種集成性測(cè)試 。

E2E測(cè)試的意義在于可以通過(guò)程序固化和仿真用戶(hù)操作，對(duì)于開(kāi)發(fā)人員而言，基于E2E測(cè)試能極大地提高Web的開(kāi)發(fā)效能，節(jié)約開(kāi)發(fā)時(shí)間。

先來(lái)看看如果沒(méi)有E2E測(cè)試下的一次從開(kāi)發(fā)到手工測(cè)試成功的過(guò)程：

這個(gè)過(guò)程還屬于簡(jiǎn)化過(guò)的，還沒(méi)有包括在觀察結(jié)果時(shí)要打開(kāi)瀏覽器的調(diào)試窗口觀看某些內(nèi)部的運(yùn)行變量或者網(wǎng)頁(yè)代碼結(jié)構(gòu)。整個(gè)過(guò)程都是純?nèi)斯げ僮鳎斯げ僮髯畲蟮膯?wèn)題是一個(gè)程序可能要調(diào)試好幾次，同樣的操作就要重復(fù)數(shù)遍。即使有嚴(yán)格的規(guī)定，程序員們大多都還是隨便地做“通過(guò)”式操作，尤其在輸入樣本數(shù)據(jù)時(shí)，絕大多數(shù)的程序員幾乎都是亂輸，出現(xiàn)得最多的就是各種隨意的數(shù)字或者是“aaa”、“asd”、“aws”這樣毫無(wú)意義的字符。以這種方式開(kāi)發(fā)出來(lái)的程序在驗(yàn)收時(shí)產(chǎn)品經(jīng)理或者客戶(hù)會(huì)經(jīng)常說(shuō)一句話：“我上次試過(guò)是沒(méi)有問(wèn)題的！”這樣的失誤歸根結(jié)底不在程序員本身，因?yàn)檫@是一種人性！一個(gè)人如果重復(fù)多次自己都覺(jué)得毫無(wú)意義的動(dòng)作時(shí)，要不就逃避不做，如果不能逃避就會(huì)消極對(duì)待。

所以我們應(yīng)該用更高效、更能彌補(bǔ)人性化缺陷和更有意義的辦法來(lái)處理，這就是E2E測(cè)試，先來(lái)看看如果使用E2E測(cè)試后的開(kāi)發(fā)過(guò)程將會(huì)變成什么：

從運(yùn)行測(cè)試開(kāi)始，所有的一切都是自動(dòng)的！這就是最大的區(qū)別，還有更重要的一點(diǎn)是，當(dāng)我們要寫(xiě)出E2E測(cè)試時(shí)就需要對(duì)操作需求有深刻的理解，在這一過(guò)程中還有很大的機(jī)會(huì)對(duì)用戶(hù)的操作進(jìn)行優(yōu)化，從而提高用戶(hù)體驗(yàn)。

 Nightwatch

vue-cli的webpack模板也為我們準(zhǔn)備了一個(gè)當(dāng)下很流行的E2E測(cè)試框架——Nightwatch。

Nightwatch是一套新近問(wèn)世的基于Node.js的驗(yàn)收測(cè)試框架，使用Selenium WebDriver API以將Web應(yīng)用測(cè)試自動(dòng)化。它提供了簡(jiǎn)單的語(yǔ)法，支持使用JavaScript和CSS選擇器來(lái)編寫(xiě)運(yùn)行在Selenium服務(wù)器上的端到端測(cè)試。

這個(gè)框架在配置好后的具體工作流程如下圖所示。

Nightwatch采用Fluent interface模式（https://en.wikipedia.org/wiki/Fluent_interface）來(lái)簡(jiǎn)化端到端測(cè)試的編寫(xiě)，語(yǔ)法非常簡(jiǎn)潔易懂，正如以下代碼所示。

this.demoTestGoogle = function (browser) {
 browser
  .url('http://www.google.com')
  .waitForElementVisible('body', 1000)
  .setValue('input[type=text]', 'nightwatch')
  .waitForElementVisible('button[name=btnG]', 1000)
  .click('button[name=btnG]')
  .pause(1000)
  .assert.containsText('#main', 'The Night Watch')
  .end();
}

我們可以從Nightwatch網(wǎng)站找到當(dāng)前提供特性的列表：

●　簡(jiǎn)單但強(qiáng)大的語(yǔ)法。只需要使用JavaScript和CSS選擇器，開(kāi)發(fā)者就能夠非常迅捷地撰寫(xiě)測(cè)試。開(kāi)發(fā)者也不必初始化其他對(duì)象和類(lèi)，只需要編寫(xiě)測(cè)試規(guī)范即可。

●　內(nèi)建命令行測(cè)試運(yùn)行器，允許開(kāi)發(fā)者同時(shí)運(yùn)行全部測(cè)試——分組或單個(gè)運(yùn)行。

●　自動(dòng)管理Selenium服務(wù)器；如果Selenium運(yùn)行在另一臺(tái)機(jī)器上，那么也可以禁用此特性。

●　支持持續(xù)集成：內(nèi)建JUnit XML報(bào)表，因此開(kāi)發(fā)者可以在構(gòu)建過(guò)程中，將自己的測(cè)試與系統(tǒng)（例如Hudson或Teamcity等）集成。

●　使用CSS選擇器或Xpath，定位并驗(yàn)證頁(yè)面中的元素或是執(zhí)行命令。

●　易于擴(kuò)展，便于開(kāi)發(fā)者根據(jù)需要，實(shí)現(xiàn)與自己應(yīng)用相關(guān)的命令。

配置 Nightwatch

要了解Nightwatch的配置和用法，與前文介紹Mocha一樣，應(yīng)該先從工程結(jié)構(gòu)入手。

工程結(jié)構(gòu)

.
└── test
      └── e2e
            ├── custom-assertions     // 自定義斷言
            │    └── elementCount.js
            ├── page-objects          // 頁(yè)面對(duì)象文件夾
            ├── reports               // 輸出報(bào)表文件夾
            ├── screenshots           // 自動(dòng)截屏
            ├── nightwatch.conf.js    // nightwatch 運(yùn)行配置
            ├── runner.js             // 運(yùn)行器
            └── specs                 // 測(cè)試文件
                  └── test.spec.js

以上是vue-cli為我們自動(dòng)創(chuàng)建的Nightwatch工程結(jié)構(gòu)，specs是測(cè)試文件存放的文件夾，nightwatch.conf.js是Nightwatch的運(yùn)行配置文件。其他的目錄將會(huì)在具體的章節(jié)逐一地進(jìn)行講述。

基本配置

Nightwatch的配置項(xiàng)都集中在nightwatch.conf.js中，其實(shí)這個(gè)配置也可以是一個(gè)JSON格式，采用JSON格式只需要簡(jiǎn)單地對(duì)配置項(xiàng)寫(xiě)入一些常量即可。但使用模塊的方式進(jìn)行配置可以執(zhí)行一些額外的配置代碼，這樣則顯得更為靈活。以下是我調(diào)整過(guò)的nightwatch.conf.js文件內(nèi)容：

require('babel-register');
var config = require('../../config');
var seleniumServer = require('selenium-server');
var phantomjs = require('phantomjs-prebuilt');
module.exports = {
 "src_folders": ["test/e2e/specs"],
 "output_folder": "test/e2e/reports",
 "custom_assertions_path": ["test/e2e/custom-assertions"],
 "page_objects_path": "test/e2e/page-objects",
 "selenium": {
  "start_process": true,
  "server_path": seleniumServer.path,
  "port": 4444,
  "cli_args": {
   "webdriver.chrome.driver": require('chromedriver').path
  }
 },
 "test_settings": {
  "default": {
   "selenium_port": 4444,
   "selenium_host": "localhost",
   "silent": true,
   launch_url:"http://localhost:" + (process.env.PORT || config.dev.port),
   "globals": {
   }
  },
  "chrome": {
   "desiredCapabilities": {
    "browserName": "chrome",
    "javascriptEnabled": true,
    "acceptSslCerts": true
   }
  },
  "firefox": {
   "desiredCapabilities": {
    "browserName": "firefox",
    "javascriptEnabled": true,
    "acceptSslCerts": true
   }
  }
 }
}

Nightwatch的配置分為以下三類(lèi)：

●　基本配置；

●　Selenium配置；

●　測(cè)試環(huán)境配置。

在配置模塊中的所有根元素配置項(xiàng)都屬于基本配置，用于控制Nightwatch的全局性運(yùn)行的需要。下表為Nightwatch的基本配置項(xiàng)的詳細(xì)說(shuō)明。

Selenium 配置

Selenium是一組軟件工具集，每一個(gè)工具都有不同的方法來(lái)支持測(cè)試自動(dòng)化。大多數(shù)使用Selenium的QA工程師只關(guān)注一兩個(gè)最能滿(mǎn)足他們項(xiàng)目需求的工具。然而，學(xué)習(xí)所有的工具你將有更多選擇來(lái)解決不同類(lèi)型的測(cè)試自動(dòng)化問(wèn)題。這一整套工具具備豐富的測(cè)試功能，很好地契合了測(cè)試各種類(lèi)型的網(wǎng)站應(yīng)用的需要。這些操作非常靈活，有多種選擇來(lái)定位UI元素，同時(shí)將預(yù)期的測(cè)試結(jié)果和實(shí)際的行為進(jìn)行比較。Selenium一個(gè)最關(guān)鍵的特性是支持在多瀏覽器平臺(tái)上進(jìn)行測(cè)試。

Selenium誕生于2004年，當(dāng)在ThoughtWorks工作的Jason Huggins在測(cè)試一個(gè)內(nèi)部應(yīng) 用時(shí)，作為一個(gè)聰明的家伙，他意識(shí)到相對(duì)于每次改動(dòng)都需要手工進(jìn)行測(cè)試，他的時(shí)間應(yīng)該用得更有價(jià)值。他開(kāi)發(fā)了一個(gè)可以驅(qū)動(dòng)頁(yè)面進(jìn)行交互的JavaScript庫(kù)，能讓多瀏覽器自動(dòng)返回測(cè)試結(jié)果。那個(gè)庫(kù)最終變成了Selenium的核心，它是Selenium RC（遠(yuǎn)程控制）和Selenium IDE所有功能的基礎(chǔ)。Selenium RC是開(kāi)拓性的，因?yàn)闆](méi)有其他產(chǎn)品能讓你使用自己喜歡的語(yǔ)言來(lái)控制瀏覽器。

Selenium是一個(gè)龐大的工具，所以它也有自己的缺點(diǎn)。由于它使用了基于JavaScript的自動(dòng)化引擎，而瀏覽器對(duì)JavaScript又有很多安全限制，有些事情就難以實(shí)現(xiàn)。更糟糕的是，網(wǎng)站應(yīng)用正變得越來(lái)越強(qiáng)大，它們使用了新瀏覽器提供的各種特性，都使得這些限制讓人痛苦不堪。在2006年，一名Google的工程師Simon Stewart開(kāi)始基于這個(gè)項(xiàng)目進(jìn)行開(kāi)發(fā)，這個(gè)項(xiàng)目被命名為WebDriver。此時(shí)，Google早已是Selenium的重度用戶(hù)，但是測(cè)試工程師們不得不繞過(guò)它的限制。Simon需要一款能通過(guò)瀏覽器和操作系統(tǒng)的本地方法直接和瀏覽器進(jìn)行通話的測(cè)試工具，來(lái)解決JavaScript環(huán)境沙箱的問(wèn)題。WebDriver項(xiàng)目的目標(biāo)就是要解決Selenium的痛點(diǎn)。

Selenium 1 （又叫Selenium RC或Remote Control）在很長(zhǎng)一段時(shí)間內(nèi)，Selenium RC都是最主要的Selenium項(xiàng)目，直到WebDriver和Selenium合并而產(chǎn)生了最新且最強(qiáng)大的Selenium 2。Seleinum 1仍然被活躍地支持著（更多是維護(hù)），并且提供一些Selenium 2短時(shí)間內(nèi)可能不會(huì)支持的特性，包括對(duì)多種語(yǔ)言的支持（Java、JavaScript、Ruby、PHP、Python、Perl和C#）和對(duì)大多數(shù)瀏覽器的支持。

Selenium 2 （又叫Selenium WebDriver）代表了這個(gè)項(xiàng)目未來(lái)的方向，也是最新被添加到Selenium工具集中的。這個(gè)全新的自動(dòng)化工具提供了很多了不起的特性，包括更內(nèi)聚和面向?qū)ο蟮腁PI，并且解決了舊版本限制。Selenium和WebDriver的作者都贊同兩者各具優(yōu)勢(shì)，而兩者的合并使得這個(gè)自動(dòng)化工具更加強(qiáng)健。Selenium 2.0正是于此的產(chǎn)品。它支持WebDriver API及其底層技術(shù)，同時(shí)也在WebDriver API底下通過(guò)Selenium 1技術(shù)為移植測(cè)試代碼提供極大的靈活性。此外，為了向后兼容，Selenium 2仍然使用Selenium 1的Selenium RC接口。

你可以到http://selenium-release.storage.googleapis.com/index.html下載Selenium的各個(gè)穩(wěn)定版本。

在Vue項(xiàng)目中如果使用vue-cli，那么Nightwatch將不需要進(jìn)行任何的附加配置，否則你需要在命令行內(nèi)安裝Selenium的包裝類(lèi)庫(kù)：

$ npm i selenium-server -D

Nightwatch能引導(dǎo)Selenium的啟動(dòng)，實(shí)際上我們并沒(méi)有必要去修改Selenium服務(wù)器的默認(rèn)運(yùn)行配置，在nightwatch.conf.js配置文件中只需要聲明Selenium服務(wù)器的二進(jìn)制執(zhí)行 文件的具體路徑即可，這個(gè)可以從selenium-server包提供的Selenium包裝對(duì)象的path屬性中獲取，而無(wú)須
將本機(jī)的物理路徑寫(xiě)死到配置文件內(nèi)。

var seleniumServer = require('selenium-server');
module.exports= {
 "selenium": {    
  "start_process": true,
  "server_path": seleniumServer.path,
  "port": 4444,
  "cli_args": {
   "webdriver.chrome.driver": require('chromedriver').path
  }
 },
 // ... 省略
}

以下是Selenium的詳細(xì)配置項(xiàng)說(shuō)明：

 cli_args 的配置

●　webdriver.firefox.profile：Selenium默認(rèn)為每個(gè)會(huì)話創(chuàng)建一個(gè)獨(dú)立的Firefox配置方案。如果你希望使用新的驅(qū)動(dòng)配置可以在此進(jìn)行聲明。

●　webdriver.chrome.driver：Nightwatch同樣可以使用Chrome瀏覽器加載測(cè)試，當(dāng)然你要先下載一個(gè)ChromeDriver的二進(jìn)制運(yùn)行庫(kù)對(duì)此進(jìn)行支持。此配置項(xiàng)用于指明ChromeDriver的安裝位置。除此之外，還需要在test_settings配置內(nèi)使用desiredCapabilities對(duì)象為Chrome建立配置方案。

●　webdriver.ie.driver：Nightwatch也支持IE，其作用與用法與Chrome相同，此處則不過(guò)多贅述。

 測(cè)試環(huán)境配置

test_settings內(nèi)的項(xiàng)目將應(yīng)用于所有的測(cè)試實(shí)例，在E2E測(cè)試中我們可以通過(guò)Nightwatch提供的默認(rèn)實(shí)例對(duì)象browser獲取這些配置值，vue-cli為我們創(chuàng)建了default、firefox和chrome三個(gè)環(huán)境配置項(xiàng)，default配置是應(yīng)用于所有環(huán)境的基礎(chǔ)配置選項(xiàng)，其他的配置項(xiàng)會(huì)自動(dòng)覆蓋與default相同的配置值。

firefox和chrome這兩個(gè)配置項(xiàng)是對(duì)兩種瀏覽器的驅(qū)動(dòng)進(jìn)行描述和配置。對(duì)于其他語(yǔ)言或框架而言它們也是常客，但由于性能太低，在實(shí)戰(zhàn)中通常只是個(gè)擺設(shè)，下文中我將會(huì)介紹一種實(shí)戰(zhàn)效率更高的無(wú)頭瀏覽器PhantomJS，對(duì)其取而代之。

不要被vue-cli創(chuàng)建默認(rèn)配置所迷惑，test_settings并不單單只是對(duì)瀏覽器的一些基本運(yùn)行參數(shù)的配置，它正確的用法是對(duì)E2E測(cè)試環(huán)境的配置。單元測(cè)試只能運(yùn)行于開(kāi)發(fā)環(huán)境內(nèi)，而E2E卻可以運(yùn)行于本地環(huán)境與網(wǎng)絡(luò)環(huán)境，更準(zhǔn)確地說(shuō)是開(kāi)發(fā)環(huán)境與生產(chǎn)環(huán)境。所以這個(gè)配置項(xiàng)可以用以下的方式進(jìn)行設(shè)置：

"test_settings": {
  "default": {
   "selenium_port": 4444,
   "selenium_host": "localhost",
   "silent": true,
   launch_url:"http://localhost:" + (process.env.PORT || config.dev.port),
   "globals": {}
  },
  "dev": {
   "desiredCapabilities": {
    "browserName": "chrome",
    "javascriptEnabled": true,
    "acceptSslCerts": true
   }
  },
  "production": {
   "launch_url":"http://www.your-domain.com"
   "desiredCapabilities": {
    "browserName": "firefox",
    "javascriptEnabled": true,
    "acceptSslCerts": true
   }
  }
 }

雖然與原有的配置只是在用詞上做了一點(diǎn)點(diǎn)改變，但用詞的改變將會(huì)徹底地改變我們對(duì)其的認(rèn)知與思路！

下表是測(cè)試環(huán)境配置項(xiàng)的詳細(xì)說(shuō)明：

 執(zhí)行 E2E 測(cè)試

vue-cli已經(jīng)在package.json中配置了運(yùn)行測(cè)試的指令：

$ npm run e2e

這個(gè)指令是默認(rèn)啟用Chrome運(yùn)行環(huán)境的，如果指定運(yùn)行環(huán)境可使用--env選項(xiàng)：

$ npm run e2e --env

使用無(wú)頭瀏覽器 PhantomJS

vue-cli webpack腳手架模板非常好用，它將環(huán)境的復(fù)雜性降低了很多，但是卻沒(méi)有很好地詮釋它里面采用的每個(gè)模塊的理由和功能，以及它們的使用特點(diǎn)。這對(duì)于入門(mén)者來(lái)說(shuō)確實(shí)是將門(mén)檻降到最低點(diǎn)，但從工程化開(kāi)發(fā)的角度來(lái)說(shuō)，只知道有這些環(huán)境或者工具的存在是遠(yuǎn)遠(yuǎn)不夠的，在Nightwatch中就埋了一個(gè)這樣的坑。

我們的開(kāi)發(fā)環(huán)境在配置Mocha和Karma時(shí)就已經(jīng)安裝了PhantomJS，但如果你細(xì)讀Nightwatch的默認(rèn)配置會(huì)驚奇地發(fā)現(xiàn)根本沒(méi)有采用PhantomJS，只是配置了Chrome和Firefox!問(wèn)題何在？一個(gè)字：慢！

我曾用一臺(tái)2013年版標(biāo)準(zhǔn)配置（i5CPU、8GB內(nèi)存、1TB HDD硬盤(pán)）的iMac跑本書(shū)下一章中的示例程序，運(yùn)行一次的實(shí)際時(shí)間是15秒左右！僅僅一次就得15秒，那可以想象我們開(kāi)發(fā)一個(gè)場(chǎng)景最少要做多少次的運(yùn)行？Chrome的啟動(dòng)是很慢的，我們做E2E這種自動(dòng)化測(cè)試如果用真實(shí)瀏覽器的話

只能將性能拖下來(lái)，生命不能耗費(fèi)在毫無(wú)意義的等待中！所以我們才會(huì)選擇PhantomJS！沒(méi)有默認(rèn)配置PhantomJS作為主瀏覽器是這個(gè)環(huán)境的最大敗筆。

辦法總比問(wèn)題多，所以如果沒(méi)有，我們還可以自己動(dòng)手來(lái)配置，其實(shí)方法也很簡(jiǎn)單。打開(kāi)nightwatch.conf.js，在test_settings配置段的下方加入以下的內(nèi)容：

"test_settings": {
 "default": {
  // ...
 }
},
"phantom":{
 "desiredCapabilities": {
  "browserName": "phantomjs",
  "javascriptEnabled": true,
  "acceptSslCerts": true,
  "phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Macintosh; Intel MacOS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36",
  "phantomjs.binary.path":"node_modules/phantomjs-prebuilt/bin/phantomjs"
 }
}

Nightwatch是通過(guò)Selenium加載一個(gè)GhostDriver來(lái)引導(dǎo)PhantomJS瀏覽器的，上面的內(nèi)容就相當(dāng)于告訴Selenium加載一個(gè)GhostDriver，可執(zhí)行程序則指向npm上安裝的phantomjs-prebuilt包，再通過(guò)這個(gè)包來(lái)引導(dǎo)安裝在本機(jī)上的PhantomJS啟動(dòng)。

按上文這樣來(lái)引用PhantomJS的二進(jìn)制程序的地址非常難看，還有原生配置中的Selenium執(zhí)行程序地址也是一樣的，這里介紹一個(gè)更DRY的方法來(lái)處理這些路徑：

var seleniumServer = require('selenium-server');
 var phantomjs = require('phantomjs-prebuilt');
 module.exports = {
  // ...省略
  "selenium": {
   // ... 省略
   "server_path": seleniumServer.path,
  },
  "test_settings": {
   // ... 省略
   "phantom": {
    "desiredCapabilities": {
     // ... 省略
     "phantomjs.binary.path": phantomjs.path
    }
   }
   // ... 省略
  }
}

 做完這個(gè)簡(jiǎn)單的優(yōu)化后就可以打開(kāi)runner.js文件找到：

if (opts.indexOf('--env') === -1) {
 opts = opts.concat(['--env', 'chrome'])
}

　將chrome改為phantom就行了：

if (opts.indexOf('--env') === -1) {
 opts = opts.concat(['--env', 'phantom'])
}

重新加載測(cè)試程序，在同一臺(tái)iMac上的運(yùn)行速度直接降到了5秒，測(cè)試運(yùn)行速度提升了3倍！如果你有配置更好的機(jī)器，將硬盤(pán)換成SSD之后會(huì)有更驚人的速度。

Nightwatch 與 Cucumber

如果你正在開(kāi)發(fā)的項(xiàng)目的業(yè)務(wù)復(fù)雜性不大，可以直接使用Nightwatch推薦的鏈?zhǔn)秸{(diào)用寫(xiě)法。但是當(dāng)這種做法真正應(yīng)用在業(yè)務(wù)流程較多，或者業(yè)務(wù)操作相對(duì)復(fù)雜的應(yīng)用場(chǎng)景時(shí)，你會(huì)覺(jué)得總有寫(xiě)不完的E2E測(cè)試，因?yàn)檫@么做E2E測(cè)試是沒(méi)有辦法一次性覆蓋所有需求的！

E2E測(cè)試其實(shí)是行為式驅(qū)動(dòng)開(kāi)發(fā)的實(shí)現(xiàn)手法，如果跳過(guò)了行為式驅(qū)動(dòng)開(kāi)發(fā)的分析部分直接編寫(xiě)E2E，其結(jié)果只能是寫(xiě)出一堆嚴(yán)重碎片化的測(cè)試場(chǎng)景，甚至?xí)霈F(xiàn)很多根本不應(yīng)該出現(xiàn)的操作。

幸好Nightwatch具有很好的擴(kuò)展性與兼容性，能集成最正統(tǒng)的BDD測(cè)試框架Cucumber（https://cucumber.io/）。Cucumber是原生于Ruby世界的BDD框架，但它也有很多的語(yǔ)言實(shí)現(xiàn)版本，我們可以安裝一套專(zhuān)門(mén)為Nightwatch編寫(xiě)的Cucumber版本——nightwatch-cucumber（https://github.com/mucsi96/nightwatch-cucumber）。本章只介紹關(guān)于環(huán)境與工具的配置，而關(guān)于如何來(lái)應(yīng)用BDD，內(nèi)容已經(jīng)超出了本書(shū)的知識(shí)范圍，如果有興趣的話可以參考《攀登架構(gòu)之巔》一書(shū)中行為式驅(qū)動(dòng)開(kāi)發(fā)的章節(jié)內(nèi)容。

$ npm i nightwatch-cucumber -D

然后在~/test/e2e/nightwatch.conf.js文件中加入對(duì)Cucumber的配置：

// ... 省略
 require('babel-register');
 require('nightwatch-cucumber')({
 nightwatchClientAsParameter: true,
  featureFiles: ['test/e2e/features'],
  stepDefinitions: ['test/e2e/features/step_definitions'],   
  jsonReport: 'test/e2e/reports/cucumber.json',
  htmlReport: 'test/e2e/reports/cucumber.html',
  openReport: false
 });

以上是“vue-cli腳手架基于Nightwatch的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！