Skip to Content

UI5 QUnit automation via headless PhantomJS browser/grunt-contrib-qunit does not work

Jan 09 at 02:34 PM


avatar image

Hi, I'm having trouble with QUnit testing automation of UI5 apps via CI/CD commandline interfaces.

When one takes best-practices example code from the Documentation SDK ("Explored App") eg #/sample...testing.16/preview

Download the source code zip and extract to a local folder eg c:\test.

Configure a simple package.json at the root (above /webapp)

  "name": "projectName",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-qunit": ">=0.2.1"

A grunt file (mygruntfile.js)

module.exports = function (grunt) {
    'use strict';
        qunit: {
            all: ['webapp/test/unit/unitTests.qunit.html']
    grunt.registerTask('default', ['qunit']);

Then in the command prompt at the root, install node dependencies

npm install

And run the grunt build

grunt --gruntfile mygruntfile.js --verbose --debug

You will see PhantomJS headless browser running into several errors.

I tried to make a proof with the same tech but on a stand-alone QUnit bootstrap page and test libary (ie no SAP/UI5 code whatsoever). Interestingly, I also found errors, which could be resolved if QUnit script tag was removed from the QUnit bootstrap html page.

I think this is due to grunt-contrib-qunit injecting its own version of QUnit, and it conflicts with the instance defined in the bootstrap page.

Below is one notable error that is common to both the SAP test script scenario, and my minimal-qunit test scenario (on about line 65 of error output):

[D] ["phantomjs","error.onError","ReferenceError: Can't find variable: QUnit",[{"file":"phantomjs://code/bridge.js","line":14,"function":""}]]

With my stand-alone test, I could easily remove the bootstrap reference to qunit.js; tests would run in headless phantomJS, but would fail in Chrome. Leave it in, it works in Chrome, fails in headless phantomJS.

In the UI5 best-practices QUnit test page, QUnit is wrapped up in SAP require libraries, I don't know how to remove it.

My question to the community is
1) Is there a successful commandline automated example of running UI5 QUnit and OPA5 tests? Either directly or via the testsuite.qunit.html page. or;

2) Could anyone suggest how to possibly remove or change the QUnit reference within the unitTests.qunit.html bootstrap page and UI5?

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Jason Badke Jan 18 at 12:50 PM

Hi, I'm happy to report answers to my own questions. A colleague Jan-Henrich Mattfeld solved the issue I originally posted about.

The answer to my question 1) is However it's worth noting that this example uses OPA5 tests defined for Component-based execution rather than iFrames - this requires a code change to unit tests and not just build config. This is because the example uses Karma + Istanbul code coverage reports, and Istanbul does not support iFrames for code coverage.

The answer to my question 2) is to dynamically write the QUnit js reference for non-PhantomJS browsers:

    if (!(/PhantomJS/.test(window.navigator.userAgent))) {
      console.log('Running standalone, non-headless!');
      document.write('<script src="lib/qunit-2.4.1.js"><\/script>');
10 |10000 characters needed characters left characters exceeded