将网页加载到无头 Jasmine 规范 运行 PhantomJS

Question

如何将 localhost 中的页面读入无头 Jasmine 规范，以便测试用例可以在 DOM 元素上工作？

我的 Gulp 任务已成功 运行 将 Jasmine 规范用于单元测试，现在我需要构建集成测试以验证从 localhost 提供的完整网页。我正在使用 gulp-jasmine-browser 插件到 运行 PhantomJS。

示例：

gulpfile.js

var gulp =           require('gulp');
var jasmineBrowser = require('gulp-jasmine-browser');

function specRunner() {
   gulp.src(['node_modules/jquery/dist/jquery.js', 'src/js/*.js', 'spec/*.js'])
      .pipe(jasmineBrowser.specRunner({ console: true }))
      .pipe(jasmineBrowser.headless());
   }

gulp.task('spec', specRunner);

spec/cart-spec.js

describe('Cart component', function() {

   it('displays on the gateway page', function() {
      var page = loadWebPage('http://localhost/');  //DOES NOT WORK
      var cart = page.find('#cart');
      expect(cart.length).toBe(1);
      });

   });

没有loadWebPage()函数。这只是为了说明我认为需要的功能。

Answer 1

我整理了以下似乎有效的代码。请随时查看 my repo 并在您自己的环境中进行确认。

package.json

{
  "name": "40646680",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "gulp jasmine"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-jasmine-browser": "^1.7.1",
    "jasmine": "^2.5.2",
    "phantomjs": "^2.1.7"
  }
}

gulpfile.js

(() => {
    "use strict";

    var gulp = require("gulp"),
        jasmineBrowser = require("gulp-jasmine-browser");

    gulp.task("jasmine", () => {
        return gulp.src("test/*.js")
            .pipe(jasmineBrowser.specRunner({
                console: true
            }))
            .pipe(jasmineBrowser.headless());
    });
})();

test/sampleJasmine.js

describe("A suite", function() {
    it("contains spec with an expectation", function() {
        expect(true).toBe(true);
    });
    it("contains failing spec with an expectation", function() {
        expect(true).toBe(false);
    });
});

执行

Bob Chatman@CHATBAG42 F:\Development\Whosebug646680
> npm test

> 40646680@1.0.0 test F:\Development\Whosebug646680
> gulp jasmine

[21:56:44] Using gulpfile F:\Development\Whosebug646680\gulpfile.js
[21:56:44] Starting 'jasmine'...
[21:56:44] Jasmine server listening on port 8000
.F
Failures:
1) A suite contains failing spec with an expectation
1.1) Expected true to be false.

2 specs, 1 failure
Finished in 0 seconds
[21:56:49] 'jasmine' errored after 4.26 s
[21:56:49] Error in plugin 'gulp-jasmine-browser'
Message:
    1 failure
npm ERR! Test failed.  See above for more details.

依赖关系

node 7.2
npm 3.9.3
jasmine 2.5.2
phantomjs 2.1.7 
gulp 3.9.1

Answer 2

像Selenium, WebdriverIO, Nightwatch.js, Protractor这样的端到端测试框架更适合这种情况。

gulp-jasmine-browser插件还是关于浏览器环境下的单元测试。无法在页面之间导航。

Answer 3

jsdom 来救援！

事实证明，将网页加载到无头 Jasmine 规范中非常容易...但是您需要将 PhantomJS 换成 jsdom。

策略：

1. 使用 Jasmine 的 beforeAll() 调用将 运行 JSDOM.fromURL() 请求网页的函数。
2. 将网页加载到 DOM 后，公开 window 和 jQuery 以便在您的测试用例中使用。
3. 最后，调用 done() 表示测试现在已准备好 运行。

确保在测试完成后关闭 window。运行。

spec.js

const url  = 'http://dnajs.org/';
const { JSDOM } = require('jsdom');
let window, $;
function loadWebPage(done) {
   function handleWebPage(dom) {
      function waitForScripts() {
         window = dom.window;
         $ = dom.window.jQuery;
         done();
         }
      dom.window.onload = waitForScripts;
      }
   const options = { resources: 'usable', runScripts: 'dangerously' };
   JSDOM.fromURL(url, options).then(handleWebPage);
   }
function closeWebPage() { window.close(); }

describe('The web page', () => {

   beforeAll(loadWebPage);
   afterAll(closeWebPage);

   it('has the correct URL', () => {
      expect(window.location.href).toBe(url);
      });

   it('has exactly one header, main, and footer', () => {
      const actual =   {
          header: $('body >header').length,
          main:   $('body >main').length,
          footer: $('body >footer').length
          };
      const expected = { header: 1, main: 1, footer: 1 };
      expect(actual).toEqual(expected);
      });

   });

测试输出

注意：上面的屏幕截图来自类似的 Mocha 规范，因为 Mocha 有一个很好的默认报告器。

项目

GitHub 如果您想亲自尝试一下：
https://github.com/dnajs/load-web-page-jsdom-jasmine

已编辑： 为 jsdom 11 更新