集成 maven/qunit/phantomjs 的更好方法？答案

【问题标题】：Better way to integrate maven/qunit/phantomjs?集成 maven/qunit/phantomjs 的更好方法？
【发布时间】：2011-12-15 19:10:03
【问题描述】：

我一直在研究在我们的 maven CI 环境中进行 JS 单元测试的最佳方法。我目前在我的 maven 项目中拼凑的内容如下：

qunit 资源（JS/CSS 文件）
qunit 测试 html 文件（每个被测文件一个），如果需要，使用 html 夹具
索引 html 文件，将测试 html 文件作为超链接的有序列表引用
PhantomJS 运行器文件，其中：
- 打开 index html 文件并解析出测试文件列表
- 打开每个测试文件
- 为每个文件截取 qunit 测试结果的屏幕截图
- 如果有任何失败，以“1”状态退出
- 如果没有失败，以“0”状态退出
如果 phantomjs 未安装，shell 文件将以“0”退出，如果已安装，将调用 phantomjs 测试

更改 pom.xml 以在构建的测试阶段运行 phantomjs 测试：

<plugins>
    <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <version>1.1</version>
        <executions>
            <execution>
                <id>PhantomJS Unit Testing</id>
                <phase>test</phase>
                <goals>
                    <goal>exec</goal>
                </goals>
            </execution>
        </executions>
        <configuration>
            <executable>${project.basedir}/src/main/webapp/unittest/phantomcheck</executable>
            <arguments>
                <argument>${project.basedir}/src/main/webapp/unittest/qunit-runner.js</argument>
                <argument>${project.basedir}/src/main/webapp/unittest/tests/index.html</argument>
                <argument>${project.build.directory}/surefire-reports</argument>
            </arguments>
        </configuration>
    </plugin>
</plugins>

所以，这很好用。它在我们的开发和构建机器上构建期间运行 qunit 测试（只要安装了 PhantomJS）。测试在无头浏览器环境中运行，对 qunit 测试没有任何限制。我见过的其他 maven/qunit 集成由于在 Rhino 或其他 JS 环境中运行测试而不足，这些环境对我们可以编写的测试类型施加了限制。另外，phantomjs 使我们能够获得测试运行的屏幕截图，这有助于解决任何故障。

我的方法的缺点是需要在构建/开发机器上安装 PhantomJS。我不知道如何将 phantomJS 捆绑到依赖项中，这样开发人员就不必担心安装 PhantomJS。谁能给我推动这个方向？我该如何开始？

【问题讨论】：

查看我的 Maven 插件 (phantomjs-qunit-runner)。 code.google.com/p/phantomjs-qunit-runner 此处使用详情：kennychua.net/blog/…
@KennyChua ：提问者想要一个工具来下载 PhantomJS 作为依赖项，而您的插件不这样做。 :-(
嗨。您提到您能够运行多个测试（您的声明是：“索引 html 文件，它将测试 html 文件作为超链接的有序列表引用”）。你是怎么做的？我尝试了几种方法，但都没有奏效。你能显示你的代码吗？也许我的测试跑步者和你的不一样；你用的是哪一个。提前致谢。

标签： maven qunit phantomjs

【解决方案1】：

phantomjs-maven-plugin 为安装 phantomjs 提供了一个 install 目标，因此您不需要预先安装它。安装 phantomjs 后，它会设置一个属性，其中包含其他插件可以使用的可执行文件的路径。它还有一个用于执行 phantomjs 脚本的exec 目标。完全披露：我编写了插件。

【讨论】：

感谢伟大的插件，我能够用它来为自己解决这个问题，并写了一个很好的答案。 :)
@Kyle 通过创建插件做得很好......@jonathan-benn 我正在以与 github 上描述的完全相同的方式使用您的插件，但无法让它工作...... ..请在这里检查问题并帮助我找出我的 pom.xml stackoverflow.com/q/32678881/2079692 中的问题
@Kyle 在构建过程中如何调用 phantomjs-maven-plugin 以及它在 java-ee 项目中的何处安装二进制文件？我可以将其设置为使用自定义位置吗？
@AnudeepSamaiya，您可以在文档中找到所有这些信息：kylelieber.com/phantomjs-maven-plugin/install-mojo.html
@Kyle 没有关于设置自定义位置的任何内容......我想在 tomcat 容器中运行我的测试......这就是为什么 loc 很重要

【解决方案2】：

基于Kyle 的回答，我能够找到解决此问题的可靠方法。谢谢凯尔！

解决方案是使用 phantomjs-maven-plugin Maven 插件。我将插件添加到我的 pom.xml 中（您需要将 Maven 升级到 v3.1 或更高版本才能使用该插件）：

<plugin>
    <groupId>com.github.klieber</groupId>
    <artifactId>phantomjs-maven-plugin</artifactId>
    <version>0.4</version>
    <executions>
        <execution>
            <goals>
                <goal>install</goal>
                <goal>exec</goal>
            </goals>
        </execution>
    </executions>
    <configuration>
        <version>1.9.7</version>
        <checkSystemPath>false</checkSystemPath>
        <script>src/test/qunit/run-qunit-testsuite.js</script>
        <arguments>
            <argument>src/test/qunit/testsuite.qunit.html</argument>
        </arguments>
    </configuration>
</plugin>

重要警告： 在上面的 pom.xml 代码中，请确保使用对文件的相对（而非绝对）引用，就像我所做的那样。在使用绝对引用（从${basedir} 开始）之后，我浪费了几个小时才发现它对 PhantomJS 的工作目录做了一些奇怪的事情。在 pom.xml 中使用相对引用将启用 HTML 文件中的相对引用（这将最大限度地提高代码可移植性）。

在上面的插件代码中，我引用了两个文件：run-qunit-testsuite.js 和testsuite.qunit.html。 HTML 文件只是执行所有测试的 QUnit 文件。 JS文件是PhantomJS的驱动；它接受一个参数：要加载的 HTML QUnit 测试文件。

要完成此解决方案，您可以从GMarik's GitHub Gist page 下载示例驱动程序和测试文件。您可以而且应该根据您的需要调整这些文件（尽管请注意 GMarik 的页面不包含开源许可，但您需要获得任何侵犯版权的使用许可）。

将此插件添加到您的 Maven 代码时，执行 Maven 构建后，您将看到如下输出（改编自 GMarik 的页面）：

[INFO] --- phantomjs-maven-plugin:0.4:exec (default) @ project.name ---
[INFO] Executing phantomjs command
'waitFor()' finished in 200ms.
Tests completed in 21 milliseconds.
5 tests of 5 passed, 0 failed.

如果测试通过，那么您的构建将通过。如果测试失败，那么您的构建将失败！

【讨论】：

嗨@乔纳森。我已按照您提出的所有步骤进行操作，但仍然不适合我。由于某种原因，我的 HTML 文件中的任何测试都没有执行
@ideate 您是否尝试过在常规浏览器中执行测试？测试是否在浏览器中执行？你在使用 QUnit 吗？我只用 QUnit 测试过这个。
是的，测试在浏览器中执行良好，并且正在使用 Quint。问题是我使用了 GMarik 的 github 页面中的示例驱动程序，我认为这对我不起作用。
@ideate 哦，好的。我记得 GMarik 的驱动程序为我开箱即用，但你可能需要摆弄它。此外，PhantomJS 并不完美，根据您在测试中所做的事情，它可能无法处理它们。例如。我发现它无法运行某些版本的 OpenUI5。如果我是你，我会从一个简单的 hello-world QUnit 测试开始，看看你是否可以运行它。然后一次添加一个更复杂的 QUnit 测试，看看哪个会破坏 PhantomJS。您也许可以通过这种方式隔离问题

【解决方案3】：

使用 Kyle 的答案和另一个插件，我能够获得一个完整的解决方案，它不需要任何东西，只需要预先安装 maven 并设置 phantomjs 和 qunit 以允许运行测试。我从一个 maven-grunt 插件 (github.com/eirslett/frontend-maven-plugin) 开始，然后按照本指南 (http://blog.trifork.com/2014/10/07/setting-up-maven-to-use-gruntnodejs/) 中的步骤进行设置。然后我尝试在 maven 中使用 qunit，遇到了 phantomjs 的麻烦，偶然发现了这篇文章，发现了 Kyle 的插件（github.com/klieber/phantomjs-maven-plugin）。我必须使用本指南中解释的自定义 qunit 源 (http://techblog.dorogin.com/2013/08/issues-with-grunt-contrib-qunit.html)。这允许我使用 kyles 插件安装 phantomjs，然后通过 grunt 选项将二进制文件链接到自定义 qunit。最后我的pom看起来像：

`    <plugin>
        <groupId>com.github.klieber</groupId>
        <artifactId>phantomjs-maven-plugin</artifactId>
        <version>0.4</version>
        <executions>
          <execution>
            <phase>generate-resources</phase>
            <goals>
              <goal>install</goal>
            </goals>
          </execution>
        </executions>
        <configuration>
          <version>1.9.8</version>
        </configuration>
      </plugin>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>0.0.20</version>
        <executions>
          <execution>
            <id>install node and npm</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>install-node-and-npm</goal>
            </goals>
            <configuration>
              <nodeVersion>v0.10.33</nodeVersion>
              <npmVersion>1.3.6</npmVersion>
            </configuration>
          </execution>
          <execution>
            <id>npm install</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>npm</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
          <execution>
            <id>grunt build</id>
            <phase>generate-resources</phase>
            <goals>
              <goal>grunt</goal>
            </goals>
            <configuration>
              <arguments>--phantomPath=${phantomjs.binary}</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
`

我的 Gruntfile.js 看起来像：

`    module.exports = function(grunt) {
      grunt.loadNpmTasks('grunt-croc-qunit');
      grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      qunit: {
        options: {
          'phantomPath': grunt.option('phantomPath')
        },
        all:['src/test/*.html']
      }
  });
  grunt.registerTask('default',['qunit']);
};`

我的 package.json 看起来像：

`    {
  "name":"reporting",
  "version":"0.0.1",
  "dependencies": {
    "grunt": "~0.4.5",
    "grunt-cli": "~0.1.13",
    "grunt-croc-qunit":"~0.3.0"
  },
  "devDependencies":{ }
}`

【讨论】：

对格式也很抱歉。这是我的第一篇文章

【解决方案4】：

我们只需将 phantomJS.exe 检入源代码控制。然后我们确定所有机器上都在使用相同版本的 phantomJS。

【讨论】：

通常，您希望避免将大型二进制文件签入源代码管理。这是 Maven 试图首先解决的问题之一，它提供了一个简单的框架来下载二进制依赖项。
CI 的一般规则是将构建和测试软件所需的一切置于源代码控制之下。因此，在新机器上，您只需获取所需的代码版本，然后构建它，而无需手动安装任何工具。我们使用 NuGet 包管理器来帮助处理一些框架依赖项，但并非所有工具都可用。通过在源代码控制中使用 phantonJS.exe，我们可以确保每个构建都使用相同的版本，并且作为额外的奖励，我们不依赖额外的存储库 - 只有我们自己的源代码控制系统需要可用。跨度>

【解决方案5】：

这是一个老问题，但我想我会链接到我的一个使用 PhantomJS 和 QUnit 与 TestNG 一起运行的项目：

该项目名为qunit-testng。我还有一个sample project，它显示了正在使用的库。

这是测试输出的截图：

【讨论】：