简朴易操纵的跨浏览器 JavaScript 单元测试解决方案

2019年8月31日 292次阅读 来源: 唐朝的唐

关于单元测试

前端的单元测试也能够称为自动化测试，测试驱动开辟，单元测试关于前端模块化、框架和功用库的开辟黑白常有必要的，只需做好模块的解耦和功用分别，单元测试就能够愉快地举行。好的单元测试（周全的功用、抛错和边沿掩盖）能够成为项目开辟或修正完成后是不是能“平安上线”的重要推断依据之一。

引进跨平台测试

开辟和运转单元测试通常是在开辟人员的电脑上完成，而任何一台电脑上所能装置的浏览器是远远不能满足测试兼容性需求的，假如须要装备种种平台的电脑也黑白常糟蹋人力物力。那末有无东西能自动把当地的测试代码在一切平台上都跑一遍，而且追踪完全的测试历程，把 log 信息反应回当地？有！那就是云测试东西。

现在国内外的云测试东西和计划有许多，因为云测试的本质是运转长途假造机，须要大批的服务器和完全的装备，所以大多数都是收费的。这里引荐 SauceLabs，它虽然也是收费的，然则新注册的账号能够供应 8 个并发测试，免费 90 个小时的自动测试时长，而且操纵简朴，用户体验异常友爱，许多有名的前端框架比方 Vue 等也在运用它举行兼容性测试。

这篇文章就细致引见一下怎样应用 SauceLabs 这个云测试东西举行跨平台的 JavaScript 单元测试，让你的代码能够轻松的经由过程一切版本的 Windows IE, Mac Safari 以及种种挪动装备浏览器的测试评价，测试后还能够天生浏览器测试状况矩阵图：

《简朴易操纵的跨浏览器 JavaScript 单元测试解决方案》

主流的 JavaScript 测试框架在 SauceLabs 上都有文档和设置申明，个中 Karma 是设置最为简朴易懂的测试框架之一，下文就细致引见下 Karma + SauceLabs 举行跨平台单元测试的悉数流程，以及我本身在运用中碰到的一些题目和解决要领，假如你不必 Karma，能够在 这里 查找其他测试框架的设置要领。

以下步骤的条件是你已写好了测试用例，假如你还不晓得怎样编写和构造单元测试，能够参考 js-test-workflows 的简朴例子来最先进修 JavaScript 单元测试。

设置步骤

1. 装置 Karma

悉数 SauceLabs 测试都是基于 Karma 设置文件 karma.sauce.js 完成的，经由过程插件 karma-sauce-launcher 自动完成长途服务器的衔接和测试代码的提交。假如你的项目已装备好了 Karma 和断言库，能够疏忽此步骤。

  1. 装置测试框架 Karma

    npm install karma -g

  2. 装置测试断言库 jasmine (也能够挑选其他库如 assert, should 等)

    npm install karma-jasmine

2. 装置 karma-sauce-launcher

这个东西是让 Karma 和 SauceLabs 竖立衔接的桥梁，它的作用是把当地的测试代码提交到云端测试假造机上，通知 SauceLabs 要启动哪一个体系哪一个版本的浏览器来跑我们的测试代码，而且把测试效果、毛病信息和追踪栈返回到当地的终端，一旦测试不经由过程，能够依据返回的信息来调试失足的代码。

npm install karma-sauce-launcher --save-dev

3. 注册 SauceLabs 并猎取 accessKey

  1. SauceLabs 免费注册地点：https://saucelabs.com/signup/…

  2. 注册完成后，上岸账号，进入 Dashboard, 点击右下角的用户名，弹出菜单挑选 User Setting 进入用户设置：

  3. 找到 USERNAME 和 Access Key：《简朴易操纵的跨浏览器 JavaScript 单元测试解决方案》《简朴易操纵的跨浏览器 JavaScript 单元测试解决方案》

  4. 在项目目录下竖立一个 sauce.json 文件来纪录上面的 userName 和 accessKey，这两个字段的作用是衔接 SauceLabs 服务器的身份验证。

    {
    "username": "xxxx",
    "accesskey": "xxx"
}

4. 编写测试设置文件

在项目目录下增加测试设置文件 karma.sauce.js 该文件是悉数跨平台测试的重要文件，也是 Karma 的进口文件，设置内容以下：

var sauce = require('./sauce.json'); // 引进 userName 和 key

// 天生一个 SauceLabs 浏览器设置信息，能够指定运转的体系和浏览器版本
function createCustomLauncher (browser, platform, version) {
    return {
        base: 'SauceLabs',
        browserName: browser,
        platform: platform,
        version: version
    };
}

// 定义一切须要在云端测试的平台和浏览器
// 名字的定义是随便的，SauceLabs 只会依据设置内容来启动对应的浏览器
// 一切完全的平台装备列表：https://saucelabs.com/platforms
var customLaunchers = {
    // 主流浏览器
    sl_win_chrome: createCustomLauncher('chrome', 'Windows 7'),
    sl_mac_chrome: createCustomLauncher('chrome', 'OS X 10.10'),
    sl_win_firefox: createCustomLauncher('firefox', 'Windows 7'),
    sl_mac_firefox: createCustomLauncher('firefox', 'OS X 10.10'),
    sl_mac_safari: createCustomLauncher('safari', 'OS X 10.11'),

    // 挪动装备浏览器
    sl_ios_8_safari: createCustomLauncher('iphone', null, '8.4'),
    sl_ios_9_safari: createCustomLauncher('iphone', null, '9.3'),
    sl_android_4_2: createCustomLauncher('android', null, '4.2'),
    sl_android_5_1: createCustomLauncher('android', null, '5.1'),

    // Microsoft Edge
    sl_edge: createCustomLauncher('MicrosoftEdge', 'Windows 10'),

    // IE 浏览器
    sl_ie_9: createCustomLauncher('internet explorer', 'Windows 7', '9'),
    sl_ie_10: createCustomLauncher('internet explorer', 'Windows 8', '10'),
    sl_ie_11: createCustomLauncher('internet explorer', 'Windows 10', '11')
};

// Karma 设置参数
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (KarmaConfig) {
    // 将 SauceLabs 供应的 username 和 accesskey 放到环境变量中
    if (!process.env.SAUCE_USERNAME || !process.env.SAUCE_ACCESS_KEY) {
        process.env.SAUCE_USERNAME = sauce.username;
        process.env.SAUCE_ACCESS_KEY = sauce.accesskey;
    }
    
    // 设置测试的超时时候
    var maxExecuteTime = 5*60*1000;
    KarmaConfig.set({
        // 加载测试文件的根目录
        basePath: '',
        // 运用的断言库
        frameworks: ['jasmine'],
        // 通知 Karma 要将哪些 js 文件加载到浏览器运转测试
        files: [
            '../src/**/*.js',
            '../test/**/*.js'
        ],
        // SauceLabs 的设置，这里只须要设置几个重要的字段即可，完全的字段能够参考：
        // https://wiki.saucelabs.com/display/DOCS/Test+Configuration+Options
        sauceLabs: {
            // 测试效果是不是公然，假如愿望天生矩阵图，必需是 public
            public: 'public',
            // 是不是在测试历程纪录假造机的运转录相
            recordVideo: false,
            // 是不是在测试历程纪录假造机的图象
            recordScreenshots: false,
            // 测试称号
            testName: 'Cross browsers test',
            // 测试的纪录号，能够为恣意字符，假如愿望天生矩阵图，build 不能为空
            build: 'build-' + Date.now()
        },
        // 自定义运转测试的 SauceLabs 浏览器
        customLaunchers: customLaunchers,
        browsers: Object.keys(customLaunchers),
        // 测试处置惩罚的报告顺序
        reporters: ['progress', 'saucelabs'],
        // 最大超时时候
        captureTimeout: maxExecuteTime,
        browserNoActivityTimeout: maxExecuteTime
    });
}

5. 启动 SauceLabs 测试

在终端输入：

karma start karma.sauce.js

当地的测试代码就会在 SauceLabs 云端跑起来了，注重的一点是，虽然免费用户只要 8 个并发的测试衔接，但并不意味着一次只能测试 8 种浏览器，上面的 customLaunchers 一共定义了 13 中差别的浏览器，他们会先实行 8 个，余暇后再实行余下的，直至悉数运转终了。

云端测试终了后的信息以下：

Chrome 54.0.2840 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.365 secs / 1.176 secs)
IE 10.0.0 (Windows 8 0.0.0): Executed 143 of 143 SUCCESS (1.313 secs / 1.118 secs)
IE 9.0.0 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.312 secs / 1.113 secs)
Firefox 47.0.0 (Mac OS X 10.10.0): Executed 143 of 143 SUCCESS (2.016 secs / 2.058 secs)
Chrome 54.0.2840 (Mac OS X 10.10.5): Executed 143 of 143 SUCCESS (1.724 secs / 1.485 secs)
Chrome 54.0.2840 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.365 secs / 1.176 secs)
IE 10.0.0 (Windows 8 0.0.0): Executed 143 of 143 SUCCESS (1.313 secs / 1.118 secs)
IE 9.0.0 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (1.312 secs / 1.113 secs)
Firefox 47.0.0 (Mac OS X 10.10.0): Executed 143 of 143 SUCCESS (2.016 secs / 2.058 secs)
Chrome 54.0.2840 (Mac OS X 10.10.5): Executed 143 of 143 SUCCESS (1.724 secs / 1.485 secs)
IE 11.0.0 (Windows 10 0.0.0): Executed 143 of 143 SUCCESS (2.584 secs / 1.262 secs)
Firefox 49.0.0 (Windows 7 0.0.0): Executed 143 of 143 SUCCESS (2.3 secs / 1.25 secs)
Safari 9.1.2 (Mac OS X 10.11.6): Executed 143 of 143 SUCCESS (1.164 secs / 1.173 secs)
Edge 14.14393.0 (Windows 10 0.0.0): Executed 143 of 143 SUCCESS (1.441 secs / 1.301 secs)
Chrome Mobile 39.0.0 (Android 5.1.0): Executed 143 of 143 SUCCESS (1.815 secs / 1.52 secs)
Android 4.2.0 (Android 4.2.0): Executed 143 of 143 SUCCESS (1.727 secs / 1.153 secs)
Mobile Safari 9.0.0 (iOS 9.3.0): Executed 143 of 143 SUCCESS (2.328 secs / 1.061 secs)

6. 猎取测试状况和矩阵图

等一切浏览器都运转测试终了后 SauceLabs 会天生状况和矩阵 svg 轻易搜检和宣布代码测试状况，也能够在 https://saucelabs.com/u/YOUR_… 上检察状况效果。

  • 状况图标

    <a href="https://saucelabs.com/u/YOUR_SAUCE_USERNAME">
      <img src="https://saucelabs.com/buildstatus/YOUR_SAUCE_USERNAME" alt="Sauce Test Status"/>
</a>

  • 浏览器矩阵图

    <a href="https://saucelabs.com/u/YOUR_SAUCE_USERNAME">
      <img src="https://saucelabs.com/browser-matrix/YOUR_SAUCE_USERNAME.svg" alt="Sauce Test Status"/>
</a>

    然后能够把这两个状况图标放到项目的 README 中，让人一看就晓得现在项目的测试状况和浏览器兼容性了（SauceLabs 的 svg 的更新有点慢）：

《简朴易操纵的跨浏览器 JavaScript 单元测试解决方案》

总结

简朴总结下 SauceLabs 的长处：

  1. 供应几百种平台装备，基本上能够满足一切的兼容性测试需求；

  2. 合营 Karma 举行单元测试，操纵简朴易于布置；

  3. 供应测试、毛病信息的实时反应，便于查找毛病；

  4. 免费运用 90 个小时的测试时长！

别的，分享下我本身运用 SauceLabs 碰到的几个题目：

  1. 偶然碰到 Disconnect 和 Timeout 的状况，多是因为国内收集缘由，多试频频就好了。

  2. 设置参数内里的 captureTimeout 和 browserNoActivityTimeout 能够设得稍长些，有些衔接超时也是因为这两个的默许时长太小了，别的假如不须要纪录录相和图象，能够将 recordVideo 和 recordScreenshots 设为 false 能够收缩运转时候。

  3. 假如老是碰到 Disconnect 的状况，一个就是能够你的代码有题目（有些毛病正告在某些浏览器下是不会抛出的，比方 Safari）另有一个就是 Karma 的版本题目，v0.13.x 经常出现链接超时，升到最新版本即可。

  4. 关于毛病发生的 Disconnect 而且没有抛错的状况，能够装置 karma-spec-launcher 而且把 Karma 的测试处置惩罚报告顺序改成 reporters: ['spec', 'saucelabs'] 如许就能够在终端很清楚的看到运转到哪一个测试用例致使的 Disconnect，轻易排查失足的处所。

  5. 假如是开源项目，记得把 sauce.json 文件放到 .gitignore 中，不要暴露你的 AccessKey 到 git 提交中。

    原文作者：唐朝的唐
    原文地址: https://segmentfault.com/a/1190000007246561
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞