个人博客

# JavaScript与QA测试工程师

# why?

  • 正确性：测试可以验证代码的正确性，在上线前做到心里有底
  • 自动化：当然手工也可以测试，通过console可以打印出内部信息，但是这是一次性的事情，下次测试还需要从头来过，效率不能得到保证。通过编写测试用例，可以做到一次编写，多次运行
  • 解释性：测试用例用于测试接口、模块的重要性，那么在测试用例中就会涉及如何使用这些API。其他开发人员如果要使用这些API，那阅读测试用例是一种很好地途 径，有时比文档说明更清晰
  • 驱动开发，指导设计：代码被测试的前提是代码本身的可测试性，那么要保证代码的可测试性，就需要在开发中注意API的设计，TDD将测试前移就是起到这么一个作用
  • 保证重构：互联网行业产品迭代速度很快，迭代后必然存在代码重构的过程，那怎 么才能保证重构后代码的质量呢？有测试用例做后盾，就可以大胆的进行重构

# 单元测试

  • 目的：单元测试能够让开发者明确知道代码结果
  • 原则：单一职责、接口抽象、层次分离
  • 断言库：保证最小单元是否正常运行检测方法
  • 测试风格：测试驱动开发(Test-Driven Development,TDD)、(BehaviorDriven Development,BDD)行为驱动开发均是敏捷开发方法论。
    • TDD关注所有的功能是否被实现(每一个功能都必须有对应的测试用 例)，suite配合test利用assert('tobi' == user.name);
    • BDD关注整体行为是否符合整体预期,编写的每一行代码都有目的提 供一个全面的测试用例集。expect/should,describe配合it利用自然语 言expect(1).toEqual(fn())执行结果。

# 单元测试框架

  • better-assert(TDD断言库Github 190star 19fork)
  • should.js(BDD断言库Github 2295star 194fork)
  • expect.js(BDD断言库Github 1391star 162fork)
  • chai.js(TDD BDD双模Github 2823star 271fork)
  • Jasmine.js(BDD Github10723star1680fork)
  • Node.js本身集成 require(“assert”);
  • Intern 更是一个大而全的单元测试框架
  • QUnit 一个游离在jQuery左右的测试框架
  • Macaca 一套完整的自动化测试解决方案 国产神器来自阿里巴巴

# karma 集成 Jasmine 进行单元测试

karma是一个测试环境，Jasmine是一个Javascript的测试工具，在Karma上运行Jasmine可完成Javascript的自动化测试、生成覆盖率报告等。

# 步骤一.初始化 NPM

实现初始化 NPM 包管理，创建 package.json 项目管理文件。

使用参数 -y 直接按照默认值创建 packgae.json 项目管理文件

PS C:\study\mykarma> npm init -y
Wrote to C:\study\mykarma\package.json:

{
  "name": "mykarma",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 步骤二.安装 Karma
npm install karma --save-dev
1

（Karma安装完毕后）：

现在我们可以使用 node 来运行 karma 了

 > node ./node_modules/karma/bin/karma
1
# 步骤三.安装 karma-cli

为了能在命令行直接执行 karma 命令，我们再按着一个karma-cli.

-g 表示全局安装，这样可以在系统的任何文件夹中直接执行 karma 命令。

安装之后，可以直接使用 karma 来启动测试了，首先检查一下当前的版本。

PS C:\study\mykarma> karma --version
Karma version: 0.13.21
PS C:\study\mykarma>
1
2
3
# 步骤四：安装 Jasmine 和 chrome-launcher/phantomjs-launcher

我们使用 Karma 来驱动单元测试，只有 Karma 是不行的，还需要安装单元测试库以便运行测试脚本，安装测试库与 Karma 的适配器，还有各种浏览器的适配器。

这里我们安装 Jasmine 的测试支持和 chrome 浏览器的适配器。

对于 jasmine 来说，我们需要 Jasmine 的适配器，还必须有 jasmine-core 库。

karma-chrome-launcher 则提供了 karma 与 chrome 的适配器。

karma-phantomjs-launcher 则提供了 karma 与 无头浏览器 的适配器。

npm i -D jasmine-core karma-jasmine karma-chrome-launcher
1

# 步骤五：使用Karma进行测试

Karma 的命令

  • start [<configFile>] [<options>] 启动 Karma 持续执行，也可以执行单次的测试，然后直接收集测试结果.
  • init [<configFile>] 初始化配置文件.
  • run [<options>]`` [ -- <clientArgs>] Trigger a test run.

创建 karma 配置文件 执行命令init命令进行配置：

karma init
1

所有默认配置问题：

说明：

    1. 测试框架：我们当然选jasmine
    1. 是否添加Require.js插件
    1. 选择浏览器： 我们选Chrome
    1. 测试文件路径设置，文件可以使用通配符匹配，比如*.js匹配指定目录下所有的js文件（实际操作中发现该路径是karma.conf.js文件的相对路径，详见下面我给出的实际测试配置及说明）
    1. 在测试文件路径下，需要排除的文件
    1. 是否允许Karma监测文件，yes表示当测试路径下的文件变化时，Karma会自动测试

以下是karma.conf.js的完整内容

module.exports = function(config) {
  config.set({

    //将用于解析所有模式（如文件、排除）的基本路径
    // 基本路径，这个是决定从哪里找引用的文件和要排除的文件
    basePath: '',
    //生成报表的类型与文件夹位置
    coverageReporter: { 
      type: 'html',    
      dir: './docs/coverage/'
  },

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],//指定断言框架


    // 要在浏览器中加载的文件/模式列表
    files: [
      "./tests/unit/*.js",
      "./tests/unit/*.spec.js"
    ],//测试文件


    //要排除的文件/模式列表
    exclude: [
    ],


    // 在将匹配文件提供给浏览器之前对其进行预处理
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './tests/unit/**/*.js': ['coverage']
    },

    //插件，用到什么就写什么，不写会报错
    // plugins : [
    //   'karma-jasmine',
    //     'karma-requirejs'
    // ],
    // test results reporter to use
    //生成测试结果报告的类型
    // possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    // 启用/禁用输出中的颜色（测试结果和日志）
    colors: true,


    // level of logging
    // 日志的等级，就那几样看着选
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // 是否自动监控，如果是文件一改就自动跑测试用例，这边选择的是否
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['PhantomJS'],
    // 支持的浏览器，用来做兼容性测试，无头浏览器PhantomJS没人维护还是用的时候还是很多坑的。
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS   //大坑不能使用ES6的语法
    // - IE (only Windows)
    // client: {
    //   mocha: {
    //     // change Karma's debug.html to the mocha web reporter
    //     reporter: 'html',
 
    //     // require specific files after Mocha is initialized
    //     require: [require.resolve('bdd-lazy-var/bdd_lazy_var_global')],
 
    //     // custom ui, defined in required file above
    //     ui: 'bdd-lazy-var/global',
    //   }
    // },

    // true表示找到浏览器就自动运行test然后退出，默认就好。
    singleRun: false,
    // 浏览器超时时间，超过这个时间就kill掉了
    captureTimeout: 60000,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
# 步骤六：启动karma
karma start
1

由于这次加上了配置文件karma.conf.js，因此Karma会按照配置文件中指定的参数执行操作了，由于我们配置的是在Chrome中测试，因此Karma会自动启动Chrome实例，并运行测试用例：(如果在无头浏览器可以直接用PhantomJS，切记它不支持es6语法)

（如果我们点击上图中的debug按钮，进入debug.html并按F12打开开发者工具，选择Console窗口，我们将能看到jasmine的执行日志）：

在这个页面，我们可以在源码中设置断点，检查测试。

# 代码覆盖率检查

如果你还想查看测试的代码覆盖率，我们可以安装karma-coverage插件，安装命令为：

npm install karma-coverage
1

修改karma.conf.js，增加覆盖率的配置

// preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        '../TestFiles/test.js':'coverage'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress','coverage'],
    
    coverageReporter:{
        type:'html',
        dir:'../TestFiles/coverage/'
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这样就完成了karma 集成 Jasmine 进行单元测试已经生成覆盖率检查

# e2e测试

端对端的测试 需要人点，用程序代替

比如：

# rize

官方文档 (opens new window)

github源码地址 (opens new window)

更多api查看 (opens new window)

# NightWatch

  • Nightwatch.js是一个用于Web应用程序和网站的自动化测试框架，他是专门做端对端的

  • 使用Node.js编写并使用W3C WebDriver API（以前称为Selenium WebDriver）。

  • 它是一个完整的浏览器（端到端）测试解决方案，旨在简化设置持续集成和编写自动化测试的过程。

  • Nightwatch也可用于编写Node.js单元测试 官方文档 (opens new window)

入门教程

# 介绍

Write End-to-End tests in Node.js quickly and effortlessly that run against a Selenium/WebDriver server.（在node.js中快速、轻松地编写端到端测试，这些测试在Selenium/WebDriver服务器上运行。）

# 安装Nightwatch

  • 在当前项目中安装
npm i -D nightwatch
1
  • 全局安装
npm i -g nightwatch
1

# 安装webDriver

Nightwatch有两种方式去调起浏览器跑测试

  1. 通过Selenium，调各个浏览器的webDriver唤起浏览器。这个需要安装java、Selenium、webDriver(无头浏览器)

  2. 直接通过各家浏览器的webDriver调起对应的浏览器。

我选择了第二种，这里就需要去安装的chrome的webDriver，有个npm包帮我们做了这个事

npm i -D chromedriver
1

直接安装chromedriver会提示安装不成功，安装的时候可能会遇到'网络问题'，在根目录下新建一个.npmrc文件,需要手动指定镜像地址

chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
1

相当于

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D
1

# 配置文件nightwatch.json

Nightwatch启动的时候默认会去加载nightwatch.json配置文件，nightwatch.js 与 nightwatch.conf.js也行，这里贴上我的配置文件，并对一些常用的字段做一下说明，其余看文档就行

{
    "src_folders": ["./tests/nightwatch"],//指定测试用例的文件夹，里面所有的js文件测试的时候都会被执行
    "output_folder": "./docs/nightwatch",//指定产生报告存放的路径
    "custom_commands_path": "",
    "custom_assertions_path": "",
    "page_objects_path": "",
    "globals_path": "./webDriver.js",//全局模块路径，nightwatch启动时还会去加载这个路径下的模块，比如我们刚刚下载了Chromedriver，我们需要写个模块文件，简单包装一下暴露出来被nightwatch加载。 这是我根目录下的webDriver.js文件，这样的话，nightwatch就能通过这个文件调webdriver然后启动浏览器了
  
    "selenium": {
      "start_process": false
    },
  
    "test_settings": {
      "default": {
        "selenium_port": 9515,
        "selenium_host": "localhost",
        "default_path_prefix": "",
        "screenshots": {
                "enabled": true,//是否开启截图，若为false，截图不成功
                "path": ""
        },
        "desiredCapabilities": {
          "browserName": "chrome",//默认使用什么浏览器测试
          "chromeOptions": {
            "args": [
              "--no-sandbox",
              "user-data-dir=/Users/shenshuaijia/Library/Application Support/Google/Chrome"
            ]
          },
          "acceptSslCerts": true
        },
        "globals": {
          "domain": "http://xxx.com"
        }
      }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  • globals_path
const chromedriver = require('chromedriver')
    module.exports = {
      before: function(done) {
        chromedriver.start()
        done()
      },
      after: function(done) {
        chromedriver.stop()
        done()
      }
    }
1
2
3
4
5
6
7
8
9
10
11
  • selenium： selenium的配置，因为我选择了第二中安装方式，所以要禁用掉selenium;如果开启会有这些选项
"start_process": true,//是否自动开启selenium服务
        "server_path": "./selenium-server-standalone-3.7.1.jar",//selenium jar路径
        "log_path": "",
        "port": 4444,
        "cli_args": {
            "webdriver.chrome.driver": "./chromedriver",  //driver路径
            "webdriver.gecko.driver": "",
            "webdriver.edge.driver": ""
        }
1
2
3
4
5
6
7
8
9
  • test_settings：启动测试时的一些配置，每一个key对应一套配置，比如通过命令nightwatch --env default使用default那一套配置，也可以用nightwatch --env integration来运行integration那套配置，但需要事先在test_settings中有配置
  • desiredCapabilities：这个是对Chromdriver能力配置，具体的话，就需要查看Chromdriver的文档

这里我遇到了一个比较特殊的情况，我需要使用平时使用chrome留下的cookie，而不是完全的沙盒模式，所以，我这里需要启动chromedriver的时候，指定加载chrome用户数据的文件夹"user-data-dir=/Users/xxx/Library/Application Support/Google/Chrome"，这样所有的登录信息都能在测试的时候被使用。

  • globals： 在测试的时候，也可以定义一下全局变量，方便测试的时候使用,这里我定义了一个domain，写测试的时候可以在browser.globals.domain获取

# 编写测试

在test/ui文件夹下新建一个测试文件page.test.js

module.exports = {
    'Search by baidu': function (client) {
        // 定义页面元素
        const searchInput = '#kw';
        const searchBtn = '#su';
        const resultContainer = '#container';
        // 启动浏览器并打开www.baidu.com
        client.url('http://baidu.com').maximizeWindow()
            // 确保输入框可以使用.
            .waitForElementVisible(searchInput, 5000)
            // 输入"nightwatch"然后搜索.
            .setValue(searchInput, 'nightwatch')
            .click(searchBtn)
            .waitForElementVisible(resultContainer, 1000)
            // 截屏 
            .saveScreenshot('reports/answers.png')
            .end()
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

nightwatch拥有比较优雅的测试写法。这里就是简单打开一个谷歌页面，往输入框输入nightwatch然后点击按钮, 截屏。记住所有的测试完成后需要调end方法来退出浏览量。

nightwatch也可以定义一些钩子函数

module.exports = {
      before : function(browser) {
        console.log('Setting up...');
      },

      after : function(browser) {
        console.log('Closing down...');
      },

      beforeEach : function(browser) {

      },

      afterEach : function() {

      },

      'step one' : function (browser) {
        browser
         // ...
      },

      'step two' : function (browser) {
        browser
        // ...
          .end();
      }
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 运行测试

`

nightwatch
1

这里我遇到了一个奇怪的问题，可能是由于我指定了用户目录的关系，我需要先完全退出chrome，在跑测试，不然跑测试新打开的窗口不会按代码里写的测试去走

# 总结

这里我只是简单介绍一下nightwatch，更加详细具体的使用还是需要参考官方文档。有了ui自动化测试以后，我们可以简单的做一些回归测试，比如，改了某些代码以后，把所有的页面都跑一遍，看看控制台有没有报错，比点点点方便多了

# puppeteer

具体的操作可查看npm npm介绍 (opens new window)

# jest

# UI测试

参考文档：

{
  //测试用例id，用于BackstopJS管理和为文件命名
  "id": "backstop_prod_test",
  //测试视口，就是配置各种分辨率
  "viewports": [
    {
      "name": "phone",
      "width": 320,
      "height": 480
    }],
  //在执行所有脚本前、页面加载后执行的脚本。通过他我们可以执行用express做一个静态服务器
  "onBeforeScript": "onBefore.js",
  "onReadyScript": "onReady.js",
  //测试用例  可以配置多个测试用例
  /**
   *scenarios可以配置多个测试用例。
   *url指定了需要测试页面的地址；
   *selector指定要测试的区域，
   *如果整个页面都是测试区域可以直接给document或者是body。
  */
  "scenarios": [
    {
      //测试用例名称
      "label": "homepage",
      //测试的地址
      "url": "https://garris.github.io/BackstopJS/",
      //测试的区域，支持css选择器，然后BackstopJS会将选择器指定的地方截屏
      "selectors": [
        ".class",
        "#id"
      ],
      "selectorExpansion": true,
      "hideSelectors": [],
      "removeSelectors": [],
      "readyEvent": null,
      "delay": 500,
      "misMatchThreshold" : 0.1,
      //在各种的测试用例执行时、页面加载后前行,我们可以把我们对页面操作的模拟脚本放进onReady.js中
      "onBeforeScript": "onBefore.js",
      "onReadyScript": "onReady.js"
    }
  ],
  //测试图片的输出路径
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "casper_scripts": "backstop_data/casper_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  //测试用的浏览器或模拟器，这里用的是PhantomJS
  "engine": "phantomjs",
  //报告的形式，支持命令行和浏览器两种
  "report": ["browser"],
  //是否打印测试日志
  "debug": false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 阿里巴巴UIrecorder测试框架

他的整个安装流程

  • 安装uirecorder
  • 用工具（UI Recorder）录制测试脚本 uirecorder start
  • 测试脚本的回放（各个浏览器）
    • 启动java环境selenium-standalone start
    • 用mocha测试回放

UI Recorder 是一款零成本UI自动化录制工具，类似于Selenium IDE (opens new window).

UI Recorder 要比Selenium IDE更加强大!

UI Recorder 非常简单易用.

  1. 官方网站: http://uirecorder.com/ (opens new window)
  2. 语言切换: English (opens new window), 中文 (opens new window)
  3. 变更日志: CHANGE (opens new window)
  4. 视频教程：PC中文教程 (opens new window)

# 功能

  1. 支持所有用户行为: 键盘事件, 鼠标事件, alert, 文件上传, 拖放, svg, shadow dom
  2. 支持无线native app(Android, iOS)录制, 基于macaca实现: https://macacajs.com/ (opens new window)
  3. 无干扰录制: 和正常测试无任何区别，无需任何交互
  4. 录制用例存储在本地
  5. 支持丰富的断言类型: val,text,displayed,enabled,selected,attr,css,url,title,cookie,localStorage,sessionStorage
  6. 支持图片对比
  7. 支持强大的变量字符串
  8. 支持公共测试用例: 允许用例中动态调用另外一个
  9. 支持并发测试
  10. 支持多国语言: 英文, 简体中文, 繁体中文
  11. 支持单步截图
  12. 支持HTML报告和JUnit报告
  13. 全系统支持: Windows, Mac, Linux
  14. 基于Nodejs的测试用例: jWebDriver (opens new window)

# 安装uirecorder

说明：这里是基于win的安装。mac系统与之思路类似。

# 1、安装node.js（版本号 >= v7.x）

node官网：https://nodejs.org/en/download/

或者直接下载安装包：https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi

安装时一路next就行了。安装成功之后，验证一下安装是否成功：

打开cmd，输入node -v，然后回车

（看到版本号，就说明安装成功。这一步一般不会出问题。）

# 2、安装 chrome（谷歌浏览器）

chrome官网：https://www.google.com/chrome/ (opens new window)    （访问此地址需要‘帆樯’）

或者直接下载百度云上chrome安装包：https://pan.baidu.com/s/1RU76eGWOBPJD2EHfE64Bsw (opens new window)

# 3、安装 UI Recorder

npm install uirecorder mocha -g
1

备注：如果下载不成功，很大可能是因为数据包下载不下来（原因你懂得）。使用淘宝的npm镜像 (opens new window)下载：

使用cnpm命令代替npm：

`npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install uirecorder mocha -g`
1
2
3

# 4、检查浏览器与driver版本是否对应

下载成功之后，需要查看一下chromedirver的版本和chrom版本是否对应，如果版本不对应，是无法驱动器浏览器进行录制和回放的。

selenium之 chromedriver与chrome版本映射表 (opens new window)

a)查看chrome版本：chrome://settings/help (opens new window)

（我的chrome是68版本）

b)查看chromedierver的版本：

npm ls chromedriver -g
1

可以看到uirecorder是2.5.42版本，uirecorder依赖的chromedriver是2.41.0版本

c)根据selenium之 chromedriver与chrome版本映射表 (opens new window)，应该下载2.40.0版本的chromedriver：

备注：我自己的chrome是68版本的，所以要下载chromederiver@2.40.0版本的。在我自己的电脑上，68版本的chrome使用2.41.0版本的chromedriver，无法录制。换成2.40.0版本的chromedriver一切正常。_

打开C:\Users{userNmae}\AppData\Roaming\npm\node_modules\uirecorder\package.json

(把{userName}替换成你的用户名，就能找到这个文件了。)_

修改uirecorder依赖chromedriver的版本号：

然后在cmd执行：

cd C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\uirecorder

cnpm install
1
2
3

// 更新uirecorder依赖的chromedriver为2.40.0版本

npm ls chromedriver -g

// 查看chromedriver的版本

# 5、到此，如果都没有报错，说明安装成功了。

上一步的安装指定版本的chromedriver特别重要，因为不同版本的chrome需要相应版本的chromedriver才能驱动起来 (opens new window)。如果安装的版本不对应，录制或者回放的时候，一般都不会成功。

# 开始录制

# 1、初始化工程
`mkdir project_name                         // 创建工作目录

cd project_name                            // 进入到工作目录中,以下的命令都是在此工作目录中执行

uirecorder init                            // 初始化uirecorder`
1
2
3
4
5
6

备注：如果运行uirecorder init时报出如下格式的错误：

`C:\uirecorder_workspaces\project_name>uirecorder init
module.js:549
throw err;
^

Error: Cannot find module 'co-thread'
at Function.Module._resolveFilename (module.js:547:15)
at Function.Module._load (module.js:474:25)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\uirecorder\node_modules\_co-parallel@1.0.0@co-parallel\index.js:6:14)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)`

就执行cnpm install co-thread -g    这是因为在运行uirecorder init时，缺少了uirecorder依赖的co-thread包，所以用cnpm安装（install）一下co-thread。

（编者注：如果运行此命令时报错说找不到cnpm命令，请看【3、安装 UI Recorder】小节）

安装完之后，再执行uirecorder init，此时有可能还报类似的错误，就继续使用cnpm install [包名] -g安装报错的那个依赖包。知道uirecorder init执行成功为止。

（编者注：我在新的电脑安装uirecorder，大于缺失了10几个包，如此循环了十几次，是很正常的。）

# 2、开始录制测试用例

启动uirecorder录制，并且录制的脚本保存到工作目录下的sample/test.spec.js     （我这里的工作目录就是project_name）

`uirecorder start`

此时会打开两个chrome浏览器，一个用来校验的，一个用来录制脚本的：

我们去百度，搜索一下uirecorder。

1）在上面输入框中输入www.baidu.com,点击开始录制。

2）然后在百度上一顿操作，随便点。我请客。>_<，然后，不想玩了，就点击左下角的结束录制。

3）然后录制的浏览器会自动关闭，然后，cmd展示：

4）具体如何录制，如何使用断言，这些，官方提供了视频教程：视频教程：PC中文教程 (opens new window)

# 回放

回放，又叫运行测试用例。执行下面命令运行sample/test.spec.js测试用例（即回放刚才的一顿操作）

`run.bat sample/test.spec.js`

此时报错了：

原因：回放的时候，需要运行selenium-standalone，所以重新打开一个cmd，运行：

说明：下面前两个命令为安装selenium-standalone的，如果已经安装过selenium-standalone，就不用再运行前两个命令了。

`cnpm install selenium-standalone@latest -g
selenium-standalone install                    // 运行这个需要java，安装java自行百度。最低也要安装java8
selenium-standalone start`

安装好java8，看一下版本：

然后在运行之前的命令：selenium-standalone install，则报错：

或者去百度云下载：百度云盘地址 (opens new window)，下载之后，保存到指定位置。并且正确命名文件名称。

把文件下载下来，并放到指定的目录中，并重命名之后，执行selenium-standalone start    ，入股看到下图，Selenium started，就说明启动成功了。

如果报下面的错误，说明是下载的driver没有放到指定文件夹下，或者是文件命名不对。要该文件的名称的。

C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\bin\selenium-standalone:79
throw err;
^

Error: Missing C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\.selenium\chromedriver\2.40-x64-chromedriver      
//备注：像这个，需要把zip中的driver解压并重命名为2.40-x64-chromedriver（不要带.exe）
at C:\Users\AnXiaole\AppData\Roaming\npm\node_modules\selenium-standalone\lib\check-paths-existence.js:15:20
at FSReqWrap.cb [as oncomplete] (fs.js:312:19)
1
2
3
4
5
6
7
8

启动了selenium-standalone，在工作目录下运行：run.bat sample/test.spec.js

查看一下测试用例报告：使用浏览器打开，工作目录下的reports\index.html：

# 上传文件

UI Recorder仅支持Native文件上传, 不支持FLASH上传

直接点击“选择文件”按钮或点击“Upload file”, 占位按钮必需要用role或data-role标注为upload

上传的文件必需保存在/uploadfiles/文件夹中。

# 总结

到这里，uirecorder已经安装、录制、回放完毕。

遇到的坑在生成报表的时候一定要注意mocha的版本有时候会不执行mochawesome命令

但是大家如果要用这个工具，一定要明白，此工具的作用在哪里。是做接口测试还是web测试？是做性能测试还是做功能测试？是针对新需求做测试还是针对以往需求做测试？（编者注：这三个问题一定要想明白。）

有人说，用这个工具录制，很麻烦，还不如自己手动做功能测试呢。其实，是因为没有真正明白此工具到底的作用和价值在哪里，说到底，还是没有想明白或者是没有相关上面三个问题。

在这里，我也不做过多说明 ，我是做开发的，可能对测试了解也是皮毛，但是，我还是相信一句话：那些重复的，没有挑战性的工作，一定要想办法交给工具、自动化去完成！工作的意义就是接受挑战并提升自己。

# 录制中禁止如下操作！

1、禁止直接手动修改地址栏中的URL

2、禁止使用TAB切换焦点

3、不要使用双击, WebDriver兼容性不好

4、不要使用鼠标选择部分文本, WebDriver兼容性不好

5、不要手动切换至背景窗口

6、不要点击非关键区域, 仅录制关键步骤

# 参考

淘宝 NPM 镜像 (opens new window)

修改 下载仓库为淘宝镜像 (opens new window)

selenium-standalone (opens new window)

Macaca 自动化框架 [Python 系列] (opens new window)

UI Recorder 功能详解 (opens new window)

# service测试

# 总结

  • 单元测试
    • 小的函数与组件
  • 接口测试
    • 确保数据
  • e2e测试
    • 确保功能
  • ui测试
    • 确保样式
  • f2etest测试 (opens new window)
  • 冒烟测试
  • 黑盒测试
Last Updated: 4/15/2020, 5:02:25 PM

←