Загрузите веб-страницу в безголовую спецификацию Jasmine, работающую с PhantomJS.

Как прочитать страницу из 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() отсутствует. Это просто для иллюстрации функций, которые, как я считаю, необходимы.


person Dem Pilafian    schedule 17.11.2016    source источник
comment
Вы ищете метод PhantomJS page.open?   -  person Gerrit0    schedule 24.11.2016
comment
Если вы пытаетесь использовать Jasmine для навигации по ссылкам и перехода по ним, возможно, вам стоит подумать о переходе на вторичный фреймворк, такой как Zombie и/или Selenium.   -  person Bob_Gneu    schedule 24.11.2016
comment
@ Gerrit0 Да, я видел page.open, и он делает правильные вещи, но это модуль PhantomJS, и нет очевидного способа вызвать его из спецификации Jasmine. Если знаете как, расскажите.   -  person Dem Pilafian    schedule 24.11.2016
comment
@Bob_Gneu Selenium требует Java, так что он определенно отсутствует. Обычно считается, что PhantomJS может делать все, что может Zombie.js (но эмуляция браузера в Zombie.js должна быть быстрее, чем безголовый WebKit в PhantomJS).   -  person Dem Pilafian    schedule 24.11.2016
comment
webdriver.io — это селеновый драйвер для узла. Почти уверен, что вам не нужно беспокоиться о каком-либо Java-коде, чтобы это можно было использовать.   -  person Bob_Gneu    schedule 24.11.2016
comment
Из-за зависимости jasmine от браузера это будет сложно. Я обычно использую мокко и зомби, когда погружаюсь в автоматическое интеграционное тестирование. Таким образом, мне нужно только запустить сервер и перемещаться по нему. Делать это в конкурсе, где тесты уже запущены в браузере, не получится. Одним из преимуществ является то, что тесты jasmine можно запускать через cli. Это может дать вам некоторую свободу для загрузки внешних библиотек и заставить фантомы работать так, как вам нужно.   -  person Bob_Gneu    schedule 24.11.2016


Ответы (3)


Среды сквозного тестирования, такие как Selenium, WebdriverIO, Nightwatch.js, Protractor и т. д. больше подходят в таком случае.

Плагин gulp-jasmine-browser по-прежнему посвящен модульному тестированию в среде браузера. Невозможно перемещаться между страницами.

person Evgeniy Generalov    schedule 26.11.2016
comment
Я не пытаюсь перемещаться между страницами. - person Dem Pilafian; 27.11.2016
comment
Вам необходимо загрузить и проверить полные веб-страницы, обслуживаемые с локального хоста. Это тестирование e2e. Загрузка страницы — это навигация. Просто используйте соответствующие инструменты. - person Evgeniy Generalov; 28.11.2016

Я собрал следующий код, который работает. Не стесняйтесь проверить мой репозиторий и подтвердить в своей среде.

пакет.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());
    });
})();

тест/образецJasmine.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\StackOverflow\40646680
> npm test

> [email protected] test F:\Development\StackOverflow\40646680
> gulp jasmine

[21:56:44] Using gulpfile F:\Development\StackOverflow\40646680\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
person Bob_Gneu    schedule 24.11.2016
comment
Можете ли вы добавить объяснение того, как это решение отвечает на вопрос? - person Dem Pilafian; 24.11.2016
comment
Поскольку наше обсуждение выше развивалось, я не думаю, что оно касается более позднего аспекта. Пожалуйста, не обращайте на это внимания. Я могу изучить его позже на этих выходных, если у меня будет возможность, и сделать его более точным для аспекта интеграции. - person Bob_Gneu; 24.11.2016

jsdom в помощь!

Оказывается, довольно легко загрузить веб-страницу в безголовую спецификацию Jasmine... но вам нужно заменить PhantomJS на jsdom.

Стратегия:

  1. Используйте beforeAll() Jasmine для вызова функции, которая запустит JSDOM.fromURL() для запроса веб-страницы.
  2. Как только веб-страница будет загружена в DOM, выставьте window и jQuery для использования в ваших тестовых примерах.
  3. Наконец, вызовите done(), чтобы указать, что тесты теперь готовы к запуску.

Обязательно закройте window после выполнения тестов.

спец.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);
      });

   });


Тестовый вывод

screenshot
Примечание. Приведенный выше снимок экрана относится к аналогичной спецификации Mocha, поскольку Mocha имеет хороший репортер по умолчанию.

Проект

Он есть на GitHub, если вы хотите попробовать сами:
https://github.com/dnajs/load-web-page-jsdom-jasmine


ОТРЕДАКТИРОВАНО: Обновлено для jsdom 11

person Dem Pilafian    schedule 05.04.2017
comment
Если вам больше нравится мокко, посетите: github.com/dnajs/load- веб-страница-jsdom-мокко - person Dem Pilafian; 05.04.2017