记录项目代码迁移后，UI测试框架的搭建（配置文件的修改、测试脚本试运行）

前文：记录一次项目代码迁移过程

上文代码迁移的目的就是为了新增vue脚手架自带的UI测试框架，工具有了，就需要实践运行在项目中了（修改配置文件、编写测试脚本等）。

一、单元测试

测试框架 karma + mocha + chai。

（1）修改配置文件“test/unit/index.js”:

      index.js 配置了哪些文件会被当成单测脚本，哪些文件可以被当成测试源文件（被测对象）。

      代码如下（暂时不用修改）：

import Vue from 'vue'

Vue.config.productionTip = false

// require all test files (files that ends with .spec.js)
// 单测脚本为'当前目录下的specs目录下的满足以 .spec后缀的文件'，即/test/unit/specs/*.spec.js
const testsContext = require.context('./specs', true, /.spec$/)
testsContext.keys().forEach(testsContext)

// require all src files except main.js for coverage.
// you can also change this to match only the subset of files that
// you want coverage for.
const srcContext = require.context('../../src', true, /^./(?!main(.js)?$)/)
srcContext.keys().forEach(srcContext)

　　

（2）修改配置文件“karma.conf.js”:

    未修改前：

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function karmaConfig (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['PhantomJS'],
    frameworks: ['mocha', 'sinon-chai', 'phantomjs-shim'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

　　修改后（修改了browsers 和frameworks）：

// This is a karma config file. For more details see
//   http://karma-runner.github.io/0.13/config/configuration-file.html
// we are also using it with karma-webpack
//   https://github.com/webpack/karma-webpack

var webpackConfig = require('../../build/webpack.test.conf')

module.exports = function karmaConfig (config) {
  config.set({
    // to run in additional browsers:
    // 1. install corresponding karma launcher
    //    http://karma-runner.github.io/0.13/config/browsers.html
    // 2. add it to the `browsers` array below.
    browsers: ['Chrome'],
    frameworks: ['mocha', 'sinon-chai'],
    reporters: ['spec', 'coverage'],
    files: ['./index.js'],
    preprocessors: {
      './index.js': ['webpack', 'sourcemap']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
      noInfo: true
    },
    coverageReporter: {
      dir: './coverage',
      reporters: [
        { type: 'lcov', subdir: '.' },
        { type: 'text-summary' }
      ]
    }
  })
}

   试运行：#npm run unit

   报错：   ERROR [launcher]: Cannot load browser "Chrome": it is not registered! Perhaps you are missing some plugin?

   原因：因为没有安装对应的 karma-chrome-launcher

   解决：#npm install karma-chrome-launcher --save-dev【之前写过博文 配置karma支持Chrome浏览器】

 （3）编写测试脚本并运行

     编写测试脚本略（TODO）

   【实际项目中，根据代码模板可以自动生成相应的界面单测脚本，把代码下载好后，复制到 test/unit/specs/ 目录下，运行即可】

    #npm run unit          // 会报错

    #karma start test/unit/karma.conf.js         // 能运行，但是有一个很大的问题——不能自动监控，即使在karma.conf.js中添加了 "autoWatch: true"也不行  （TODO 待解决，必须解决！）

     

 二、E2E测试

   （0）环境配置

         需要有 jdk 环境、

   （1）NightWatch配置（test/e2e/nightwatch.conf.js）

         采用默认的配置，加了一点注释，如下：

require('babel-register')
var config = require('../../config')

// http://nightwatchjs.org/gettingstarted#settings-file
module.exports = {
  // 1，基本配置：测试用例源路经、输出路径、基础指令路径、全局路径globals_path
  src_folders: ['test/e2e/specs'],
  output_folder: 'test/e2e/reports',
  custom_assertions_path: ['test/e2e/custom-assertions'],

  // 2，selenium配置：是否开启、路径、端口等
  selenium: {
    start_process: true,
    server_path: require('selenium-server').path,
    host: '127.0.0.1',
    port: 4444,
    cli_args: { // 指定将要运行的webdriver
      'webdriver.chrome.driver': require('chromedriver').path
    }
  },

  // 3，测试配置——制定测试时各个环境的设置，默认是default，通过--env加环境名可以指定配置的任意环境。
  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: 'localhost',
      silent: true,
      globals: {
        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
      }
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    },

    firefox: {
      desiredCapabilities: {
        browserName: 'firefox',
        javascriptEnabled: true,
        acceptSslCerts: true
      }
    }
  }
}

　　

   （2）运行器配置（test/e2e/runner.js）

       runner.js是E2E测试的文件入口，此处采用默认的配置，如下：   

// 1. start the dev server using production config
process.env.NODE_ENV = 'testing'

const webpack = require('webpack')
const DevServer = require('webpack-dev-server')

const webpackConfig = require('../../build/webpack.prod.conf')
const devConfigPromise = require('../../build/webpack.dev.conf')

let server

devConfigPromise.then(devConfig => {
  const devServerOptions = devConfig.devServer
  const compiler = webpack(webpackConfig)
  server = new DevServer(compiler, devServerOptions)
  const port = devServerOptions.port
  const host = devServerOptions.host
  return server.listen(port, host)
})
.then(() => {
  // 2. run the nightwatch test suite against it
  // to run in additional browsers:
  //    1. add an entry in test/e2e/nightwatch.conf.js under "test_settings"
  //    2. add it to the --env flag below
  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
  // For more information on Nightwatch's config file, see
  // http://nightwatchjs.org/guide#settings-file
  let opts = process.argv.slice(2)
  if (opts.indexOf('--config') === -1) {
    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
  }
  if (opts.indexOf('--env') === -1) {
    opts = opts.concat(['--env', 'chrome'])
  }

  const spawn = require('cross-spawn')
  const runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })

  runner.on('exit', function (code) {
    server.close()
    process.exit(code)
  })

  runner.on('error', function (err) {
    server.close()
    throw err
  })
})

　　

   （3） 测试运行，编写测试脚本

• 命令：#npm run e2e
• 报错：Error: Cannot find module 'webpack-dev-server'     

          >> 解决：#npm install webpack-dev-server --save-dev   

• 又报错：

  .../webAdmin-web/test/e2e/runner.js:12
  devConfigPromise.then(devConfig => {
                                ^

  TypeError: devConfigPromise.then is not a function

          >> 解决：//TODO

          暂时不能解决，不知道为什么。之前做的 e2e_demo 可以运行，记录一下：点击查看源码，可以对比着修改，先跳过。

三、脚本录制与回放

    E2E测试涉及到业务，手动编写测试case不仅费时，也不一定能写的全面。故而引入脚本录制工具——uirecorder。

    脚本的回放——？？？？？

  （1）安装 uirecorder

    #cd ${projectRootPath}          // 转到项目根目录

    #mkdir test/uirecorder            // 在“test”目录下新建文件夹“uirecorder”

    #cd test/uirecorder                 // 转到uirecorder目录

    #cnpm install uirecorder mocha -g   // 安装uirecorder 及 mocha

    #uirecorder --version    // 检查 uirecorder 安装成功与否

    出现如下所示的结果，即安装成功：

    

   #mocha --version   // 检查 mocha 版本

 （2）初始化 uirecorder 配置

    #cd ${projectRootPath}/test/uirecorder      // 转到项目中的uirecorder根目录

    #uirecorder init       // 初始化uirecorder配置

    一路回车即可，过程记录：    

[user1@localhost uirecorder]$ uirecorder init
    __  ______   ____                           __         
   / / / /  _/  / __ \___  _________  _________/ /__  _____
  / / / // /   / /_/ / _ / ___/ __ / ___/ __  / _ / ___/
 / /_/ // /   / _, _/  __/ /__/ /_/ / /  / /_/ /  __/ /    
 \____/___/  /_/ |_|\___/\___/\____/_/   \__,_/\___/_/    v2.5.37

Official Site: http://uirecorder.com
------------------------------------------------------------------

? Path扩展属性配置,除id,name,class之外 (data-id,data-name,type,data-type,role,da? Path扩展属性配置,除id,name,class之外 data-id,data-name,type,data-type,role,data-role,da
ta-value
? 属性值黑名单正则 
? class值黑名单正则 
? 断言前隐藏 
? WebDriver域名或IP 127.0.0.1
? WebDriver端口号 4444
? 需要同时测试的浏览器列表 chrome, ie 11

config.json 文件保存成功
package.json 文件创建成功
README.md 文件创建成功
screenshots 文件夹创建成功
commons 文件夹创建成功
uploadfiles 文件夹创建成功
.editorconfig 文件创建成功
.gitignore 文件创建成功
install.sh 文件创建成功
run.bat 文件创建成功
run.sh 文件创建成功
hosts 文件创建成功
.vscode/launch.json 文件创建成功

Start install project dependencies...
--------------------------------------------

✔ Installed 7 packages
✔ Linked 183 latest versions
✔ Run 0 scripts
deprecate mochawesome-uirecorder@1.5.22 › node-uuid@^1.4.1 Use uuid module instead
Recently updated (since 2018-02-28): 2 packages (detail see file /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/.recently_updates.txt)
✔ All packages installed (206 packages installed from npm registry, used 8s, speed 331.56kB/s, json 190(1.99MB), tarball 601.42kB)

Start install webdriver dependencies...
--------------------------------------------


> uirecorderTest@1.0.0 installdriver /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder
> selenium-standalone install --drivers.firefox.baseURL=http://npm.taobao.org/mirrors/geckodriver --baseURL=http://npm.taobao.org/mirrors/selenium --drivers.chrome.baseURL=http://npm.taobao.org/mirrors/chromedriver --drivers.ie.baseURL=http://npm.taobao.org/mirrors/selenium


----------
selenium-standalone installation starting
----------

---
selenium install:
from: http://npm.taobao.org/mirrors/selenium/3.7/selenium-server-standalone-3.7.1.jar
to: /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/_selenium-standalone@6.12.0@selenium-standalone/.selenium/selenium-server/3.7.1-server.jar
---
chrome install:
from: http://npm.taobao.org/mirrors/chromedriver/2.33/chromedriver_linux64.zip
to: /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/_selenium-standalone@6.12.0@selenium-standalone/.selenium/chromedriver/2.33-x64-chromedriver
---
firefox install:
from: http://npm.taobao.org/mirrors/geckodriver/v0.19.1/geckodriver-v0.19.1-linux64.tar.gz
to: /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder/node_modules/_selenium-standalone@6.12.0@selenium-standalone/.selenium/geckodriver/0.19.1-x64-geckodriver


-----
selenium-standalone installation finished
-----


------------------------------------------------------------------

  发现新版本: 2.5.37 → 2.5.40
  执行命令升级：npm i uirecorder -g

------------------------------------------------------------------

   >> 完成后，uirecorder在项目中的目录结构如下所示：

   

  >> 安装相关依赖：

 （3）PC录制脚本

  1、本地启动项目

       #npm run dev

  2、另开一个终端，启动webDriver服务器 Selenium standalone server

• 前提：

　　　　Selenium standalone server已安装【#npm install selenium-standalone -g】

• 命令：

　　　　 #selenium-standalone start 

　　　　或者 #npm run server 

            >> 出现  Selenium started 字样即成功！

• 注意：

　　 　  保持 Selenium standalone server 一直是打开状态，不要关闭该终端！    

  3、 开始录制脚本             

  #cd ${projectRootPath}/test/uirecorder         //  转到uirecorder根路径

  #uirecorder start specs/demo.spec.js           //  开始录制，脚本名为demo.spec.js，存放在当前目录（uirecorder根目录）下的specs目录下

  出现如下图所示的界面，输入“y”或“Y”即可：

在录制浏览器中输入要测试的URL，点击“开始录制”：

    然后就是在界面上各种手动点点点点，输入等.....，点击“结束录制”即完成了本次的录制，脚本“demo.spec.js”也生成完毕，去对应的目录下去查看吧！以下是在录制过程中记录的执行过程：
    

     

   4、测试脚本的回放

    转到项目中 uirecorder 根目录；

    #source run.sh specs/demo.spec.js     或者    mocha specs/demo.spec.js

    记录一下过程：   

[user1@localhost uirecorder]$ source run.sh specs/demo.spec.js 

> uirecorderTest@1.0.0 singletest /home/user1/workspace/git/code-move/webAdmin-web/test/uirecorder
> mocha --reporter mochawesome-uirecorder --bail "specs/demo.spec.js"

[mochawesome] Generating report files...

  specs/demo.spec : chrome
    ✓ url: http://localhost:8080 (2136ms)
    ✓ waitBody:  (684ms)
    ✓ click: password ( input[name="password"], 72, 27, 0 ) (776ms)
    ✓ sendKeys: 123456
    ✓ click: 登录 ( #app button, 117, 30, 0 ) (801ms)
    ✓ scrollElementTo: #app div:nth-child(3) > div.contract-trigger, 95, 14 (664ms)
    ✓ click: 系统管理 ( #app li[role="menuitem"]:nth-child(5) > div.el-submenu__title, 136, 29, 0 ) (736ms)
    ✓ scrollElementTo: #app ul.sidebar-container, 0, 209 (675ms)
    ✓ click: 系统管理 ( //span[text()="系统管理"], 53, 2, 0 ) (728ms)
    ✓ scrollElementTo: #app ul.sidebar-container, 0, 0 (657ms)
    ✓ click: 工作任务管理 ( //span[text()="工作任务管理"], 17, 5, 0 ) (816ms)
    ✓ scrollElementTo: #app span > div.el-select > div:nth-child(3) > div.contract-trigger, 95, 14 (668ms)
    ✓ click: div > div.el-select > div.el-input--suffix > input[type="text"].el-input__inner, 120, 30, 0 (800ms)
    1) scrollElementTo: div.el-zoom-in-top-enter-to > div.el-scrollbar > div.el-scrollbar__wrap > ul.el-select-dropdown__list > div.resize-triggers > div.expand-trigger, 16, 16


  13 passing (52s)
  1 failing

  1) specs/demo.spec : chrome scrollElementTo: div.el-zoom-in-top-enter-to > div.el-scrollbar > div.el-scrollbar__wrap > ul.el-select-dropdown__list > div.resize-triggers > div.expand-trigger, 16, 16:
     Error: the string "Wait element displayed timeout: div.el-zoom-in-top-enter-to > div.el-scrollbar > div.el-scrollbar__wrap > ul.el-select-dropdown__list > div.resize-triggers > div.expand-trigger ,30000ms" was thrown, throw an Error :)
      at Runner.fail (node_modules/_mocha@3.1.2@mocha/lib/runner.js:233:11)
      at node_modules/_mocha@3.1.2@mocha/lib/runner.js:566:18
      at done (node_modules/_mocha@3.1.2@mocha/lib/runnable.js:293:5)
      at node_modules/_mocha@3.1.2@mocha/lib/runnable.js:354:11
      at <anonymous>
      at process._tickCallback (internal/process/next_tick.js:160:7)


[mochawesome] Report saved to reports/index.html
[mochawesome] Report saved to reports/index.xml


[user1@localhost uirecorder]$ 

　注意点：

• 13个case passing，1个failing，导致后续的case都不再回放。
• 由 mochawesome 生成的测试报告为：

  reports/index.html       

     reports/index.xml

•  在浏览器中查看测试报告： 

reports/index.html：

reports/index.xml：