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> my-project@1.0.0 e2e F:\learn\vue\my-project> node test/e2e/runner.js> Starting dev server...> Listening at http://localhost:8080Starting selenium server... started - PID:  7760[Test] Test Suite=====================Running:  default e2e testsError retrieving a new session from the selenium serverConnection 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: \'2017-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\'\nDriver 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.base/java.util.stream.........npm ERR! Windows_NT 6.1.7601npm 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.1npm ERR! npm  v3.10.10npm ERR! code ELIFECYCLEnpm ERR! my-project@1.0.0 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> chromedriver@2.33.2 install F:\learn\vue\my-project\node_modules\chromedriver> node install.jsDownloading https://npm.taobao.org/mirrors/chromedriver/2.33/chromedriver_win32.zipSaving to C:\Users\ADMINI~1\AppData\Local\Temp\chromedriver\chromedriver_win32.zipReceived 790K...Received 1580K...Received 2370K...Received 3154K...Received 3942K...Received 4125K total.Extracting zip contentsCopying to target path F:\learn\vue\my-project\node_modules\chromedriver\lib\chromedriverDone. ChromeDriver binary available at F:\learn\vue\my-project\node_modules\chromedriver\lib\chromedriver\chromedriver.exemy-project@1.0.0 F:\learn\vue\my-project`-- chromedriver@2.33.2npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: 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:8080Starting 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 <h1> contains text: "Welcome to Your Vue.js App". √ Testing if element <img> has count: 1OK. 4 assertions passed. (3.284s)