自动化测试 编辑页面


英文原文:http://emberjs.com/guides/testing/test-runners/

当运行测试时,可以在很多种不同的方案里选取最适合工作流的方案。找到一种摩擦最低的运行测试的方案非常重要,因为测试是一项经常要做的事情。

浏览器

运行测试的最简单的方法是直接在浏览器中打开页面。下面将展示如何加入一个qunit的测试harness给应用,并可以针对其运行测试:

首先,从这里获取一份qunit(包括Javascript和CSS)。

然后,创建一个HTML文件来包含qunit,如下例所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  <script src="qunit.js"></script>
  <script src="your_ember_code_here.js"></script>
  <script src="your_test_code_here.js"></script>
</body>
</html>

最后,使用选定的浏览器打开上面的文件。

这样就完成了所有的工作,并且运行了测试。不需要安装和配置其他任何工具,或者运行一个其他的进程。在添加或者修改了测试或者代码后,重载页面即可重新运行测试。

如果这已经满足了需求,那么不需要继续往下读了。但是,如果希望能有一种更加自动化的运行测试的方法,那么请继续往下读。

不停的手动的打开和刷新浏览器,很显然是一件非常乏味的工作。当知道代码可以在所有的浏览器中得到运行,这样能得到更多的利益,不过依然需要在修改代码后手动的启动和刷新来测试。消除重复的劳动本来就是使用计算机的原因之一,因此这里就是一个需要解决的问题。

幸运地是有工具能帮助我们完成这些工作。这些工具可以在实际的浏览器中运行测试(是浏览器 - 同一时间运行多个),并将测试结果通过一个综合的视图呈现。这些工具都是在命令行中执行的,并且也能在文件发送改变的时候自动重新运行测试。不过相比创建一个简单的HTML文件,这种方法需要进行一些额外的配置,不过从长远来说这也是能节约时间的。

Testem运行期

Testem是一个配置和使用都非常简单的工具。简单地说,其将收集所有应用代码、测试代码、选择的测试框架,并自动创建一个测试"harness"。然后启动每个浏览器(指定的)来运行测试,并将结果返回。Testem有非常好的基于终端的用于显示每个浏览器测试结果的用户接口。testem内置了非常多的特性,目前还没有任何第三方的插件或者扩展。

为了使用testem,需要在node.js中安装testem模块。假设已经安装了node,那么只需要运行如下命令即可:

1
npm install -g --save-dev testem

现在完成一个简单的配置,就可以使用Testem来运行测试了。

1
2
3
4
5
6
7
8
9
10
// testem.json
{
    "framework": "qunit",
    "src_files": [
      "your_ember_code_here.js",
      "your_test_code_here.js"
    ],
    "launch_in_dev": ["PhantomJS"],
    "launch_in_ci": ["PhantomJS"]
}

以上就是需要安装和配置的全部内容。现在再详细的回顾一下配置。

  • framework
    • 表示将使用的测试框架是什么。这里使用的是QUnitTestem会完成对QUnit库的加载,因此不需要担心QUnit的加载问题。
  • src_files
    • 表示需要testem在运行测试是需要加载的源文件(包括产品代码和测试代码)。
  • launch_in_dev
    • 这里可以配置需要启动用来测试的浏览器。合理可以设置一个或多个浏览器。当设置了多个浏览器时,测试时会并发启动这些浏览器来进行测试。
  • launch_in_ci
    • 这里可以配置哪个浏览器将用来做持续集成的测试。这里特指headless持续集成环境。

除以上配置外,testem还提供了更多的参数,如果愿意的话可以进行更详细的配置。可以在testem文档中找到所有可用的配置项的详细说明。

执行下述命令来运行testem

1
testem

这将启动testem,并且启动所有在launch_in_dev配置的所有浏览器。可以看到一个基于标签的视图,每个标签对应一个浏览器,通过箭头按键可以查看每个浏览器的执行结果。此外还有一些其他的命令,运行testem -h可以查看能在标签视图中使用的所有命令。当src_files指定的文件发生改变时,Testem将持续的运行或者重新运行测试。

launch_in_ci设置在采用如下命令执行testem时生效:

1
testem ci

与运行不带参数的testem非常相似,除了其会使用launch_in_ci取代launch_in_dev设置的浏览器列表外,ci选项会使用相同的配置。ci选项同样会采用testem运行一遍所有的测试,并将测试结果输出到终端。

Karma测试运行器

Karma是另一个易于配置和使用的工具。与testem相似,karma也会收集所有应用代码,测试代码,选用的测试框架,并自动的创建一个测试"harness"。之后也会启动指定的每一个浏览器,运行测试,并生成测试结果报告。其终端用户接口不像testem那么好,不过其会为每一个浏览器生成有颜色的测试结果输出。Karma的插件拥有许多非常有用的特性。如果想了解更多关于编写karma插件的文档可以访问这里。在karma_runner可以获取一些可用的karma插件。

为了开始使用karma,需要安装一些node模块。下面是一个package.json示例文件,其包含了所有karma运行需要的模块。

1
2
3
4
5
6
7
8
9
10
// package.json
{
  "name": "your_project_name",
  "version": "0.1.0",
  "devDependencies": {
    "karma-qunit": "0.1.1",
    "karma-phantomjs-launcher": "0.1.2",
    "karma": "0.12.1"
  }
}

这三个依赖都是karma自己,karma-qunit包含了需要运行qunit测试需要的一切,而karma-phantomjs-launcherkarma测试运行器用来启动一个无头的PhantomJS浏览器来运行测试的模块。还有许多不同的插件用来启动不同的浏览器,包括Google Chrome,Firefox,Safari,IE,甚至Sauce Labs。在Karma Github有一个完整的可用启动器的列表。

现在有了一个包含所有运行karma所需的一切的package.json文件,那么可以运行下面的命令(在package.json文件所在的目录下)来安装这些模块。

1
npm install

现在karma连同所有需要用来开始运行测试的东西都准备就绪了。不过还需要进行一点点额外的配置。如果只需要生成缺省的karma配置,可以执行karma init,这将会在当前目录创建一个名为karma.conf.js的配置文件。配置有许多选项,这里给出一个精简版本的配置:karma需要用来运行测试的最小配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
// karma.conf.js
module.exports = function(config) {
  config.set({
    frameworks: ['qunit'],
    files: [
      "your_ember_code_here.js",
      "your_test_code_here.js"
    ],
    autoWatch: true,
    singleRun: true,
    browsers: ['PhantomJS']
  });
};

最后还有一样需要安装:Karma命令行接口。

1
npm install -g karma-cli

这就是所有需要安装和配置的全部内容。下面来仔细看看这些配置。

  • frameworks
    • 这代表将要采用的测试框架。本例中使用QUnitkarma会自动加载QUnit库。
  • files
    • 这代表哪些源文件(包括产品和测试代码)需要karma在运行测试时加载。
  • autoWatch
    • singleRun的值为false时,如果autoWatch值为true表示karma将观察所有files的修改,并重新运行测试。
  • singleRun
    • 如果值为true表示将只运行所有测试一次就关闭,如果值为false将运行所有测试一次,当有文件发生改变时,会再次运行所有测试。
  • browsers
    • 本选项用来配置使用哪些浏览器来加载和运行测试。可以是一个或多个浏览器。当指定了多个浏览器时,测试讲并发的在所有的浏览器中运行。

除以上配置以外,还有大量的配置项可以用来配置karma。查看karma文档可以看到所有的配置项,除了手动创建karma.conf.js外,还可以运行下面的命令来生成:

1
karma init

启动karma运行:

1
karma start

至于是运行完测试后退出,还是等待文件改变来重新运行测试,取决于配置。

构建集成

testemkarma都可以与大的构建过程进行集成。例如,项目中可能使用了CoffeeScriptES6或者其他需要转换源代码到Javascript的某些技术。如果使用了grunt,那么可以为testem使用grunt-contrib-testem,为karma选择grunt-karma来集成到构建过程里。testemkarma都有预处理配置选项。更多关于配置项的信息请查看karmatestem的文档。

生成报告

通常获取测试结果的不同格式的输出是非常有用的。例如,采用了Jenkins作为持续集成服务器,那么可能就希望获取到XM格式的测试结果,以便Jenkins能够为测试结构生成报表图。此外,也可能希望使用Jenkins一直跟踪测试覆盖率。使用这些测试运行器,可以根据测试结果生成不同格式的报告,对于测试覆盖率的信息也是一样。

Testem XML测试结果

为了使testem生成junit xml,只需在运行testem的时候添加一个标志,将输出定向到一个文件即可。

1
testem ci -R xunit > test-results.xml

现在就可以在其他的工具中使用test-results.xml了。

Karma XML测试结果

为了使karma生成junit xml,需要安装一个node.js模块。通过下面的命令可以完成模块的安装。

1
npm install --save-dev karma-junit-reporter

当安装上模块后,需要修改karma配置文件来包含下面的配置。

1
2
3
4
5
6
7
module.exports = function(config) {
  config.set({
    /* snip */
    reporters: ['progress', 'junit'],
    /* snip */
  });
};

reporters选项决定了测试结果如何返回。progress报告将会显示如下信息。

1
PhantomJS 1.9.7 (Mac OS X): Executed 2 of 2 SUCCESS (0.008 secs / 0.002 secs)

junit报告会在当前目录下生成一个test-results.xml文件,文件中包含了可以用作其他工具的输入的junit xml。文件可以重命名为其他任意的名字。更多的信息请查看karma junit reporter文档。

Testem测试覆盖率

使用testem生成测试覆盖率报告,目前需要更多的关注,尽管可以实现。更多的信息请查看testem文档

Karma测试覆盖率

使用karma来生成代码测试覆盖率需要安装另外一个node.js模块,通过下面的命令可以完成模块的安装。

1
npm install --save-dev karma-coverage

安装完模块后,需要在karma的配置中添加下面的配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = function(config) {
  config.set({
    /* snip */
    reporters: ['progress', 'coverage'],
    preprocessors: {
      "your_ember_code_here.js": "coverage",
      "your_test_code_here.js": "coverage"
    },
    coverageReporter: {
        type: "text",
    }
    /* snip */
  });
};

现在如同往常一样运行karma就能在终端中看到测试覆盖率信息的输出了。coverageReporter.type选项可以被设置为不同的值。示例中得值为text,将显示在控制台中。其他的值包括:lcovhtmlcobertura,这些的输出可以用作其他工具的输入。karma更多关于测试覆盖率的配置项,可以查看karma文档