vue unit及e2e问题记录

为了快速上手vue项目，一般我们会使用脚手架vue-cli帮助我们创建项目模板。

 vue init webpack my-project  // 创建 my-project项目
 npm install   // 下载依赖包
 npm run dev   // 编译开发环境
 npm run unit  // 启动单元测试
 npm run e2e   // 启动端到端测试
 npm run build // 编译生成环境

一般dev 和build命令都可以正常执行，但是在unit和e2e环节会遇到一些比较奇怪的问题。

unit单元测试

运行单元测试时，可能出现的问题是PhantomJS（http://phantomjs.org/）下载失败，到是单元测试运行失败，可以多运行几次npm install，如果还是不行，自行手动下载。

PhantomJS是一个无界面的、可脚本编程的WebKit浏览器引擎。它原生支持多种Web标准：Dom操作、CSS选择器，JSON、Canvas以及SVG。

Karma 会自动加载karma-phantomjs-launcher来引导PhantomJS启动，我们不需要改动karma.conf.js的任何配置。

e2e端到端测试

运行e2e时报如下错误：

F:\learn\vue\my-project>npm run e2e

> [email protected] e2e F:\learn\vue\my-project
> node test/e2e/runner.js

> Starting dev server...
> Listening at http://localhost:8080

Starting selenium server... started - PID:  7760

[Test] Test Suite
=====================

Running:  default e2e tests

Error retrieving a new session from the selenium server

Connection refused! Is selenium server started?

{ value: 
   { stacktrace: 'org.openqa.selenium.SessionNotCreatedException: Unable to create new service: ChromeDriverService\nBuild info: version: \'3.7.1\', revision: \'8a0099a\', time: \'20
17-11-06T21:07:36.161Z\'\nSystem info: host: \'PC-20160906QJYJ\', ip: \'192.168.10.162\', os.name: \'Windows 7\', os.arch: \'amd64\', os.version: \'6.1\', java.version: \'9.0.1\'\nDr
iver info: driver.version: unknown\r\n\tat org.openqa.selenium.remote.server.ServicedSession$Factory.lambda$get$0(ServicedSession.java:194)\r\n\tat org.openqa.selenium.remote.server.
ServicedSession$Factory.apply(ServicedSession.java:204)\r\n\tat org.openqa.selenium.remote.server.ActiveSessionFactory.lambda$apply$11(ActiveSessionFactory.java:167)\r\n\tat java.bas
e/java.util.stream.........
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "e2e"
npm ERR! node v6.10.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] e2e: `node test/e2e/runner.js`
npm ERR! Exit status 1

尝试了很多方法，后来发现是npm 下载chromedriver的时候出现了问题，手动删除node_modules\chromedriver ，运行命令。

chromedriver是一个二进制运行库，供Nightwatch驱动Chrome浏览器，加载测试。

F:\learn\vue\my-project>npm install chromedriver --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver

> [email protected] install F:\learn\vue\my-project\node_modules\chromedriver
> node install.js

Downloading https://npm.taobao.org/mirrors/chromedriver/2.33/chromedriver_win32.zip
Saving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zip
Received 790K...
Received 1580K...
Received 2370K...
Received 3154K...
Received 3942K...
Received 4125K total.
Extracting zip contents
Copying to target path F:\learn\vue\my-project\node_modules\chromedriver\lib\chromedriver
Done. ChromeDriver binary available at F:\learn\vue\my-project\node_modules\chromedriver\lib\chromedriver\chromedriver.exe
[email protected] F:\learn\vue\my-project
`-- [email protected]

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

chromedriver 下载成功：）

重新运行npm run e2e，端到端测试已经可以成功运行。

F:\learn\vue\my-project>npm run e2e

> my-project@1.0.0 e2e F:\learn\vue\my-project
> node test/e2e/runner.js

> Starting dev server...
> Listening at http://localhost:8080

Starting selenium server... started - PID:  5300

[Test] Test Suite
=====================

Running:  default e2e tests
 √ Element <#app> was visible after 53 milliseconds.
 √ Testing if element <.hello> is present.
 √ Testing if element 
 contains text: "Welcome to Your Vue.js App".
 √ Testing if element  has count: 1

OK. 4 assertions passed. (3.284s)