gulp-qunit Use chrome instead of PhantomJS

Hi, I am a maintainer of impress.js and I was looking for a way to run the 3D transform integration tests in Google Chrome. The problem is that gulp-qunit uses PhantomJS and it doesn't have support for 3D transform, see here for what I have tried so far.

Is there any chances this plugin can use Chrome instead of PhantomJS, assuming that Chrome has a proper 3D transform support? Is anyone aware of anything that blocks it from being done in this project?

Ping @jonkemp

May 21 '16 07:05 FagnerMartinsBrack

I'm interested in how this will work.

May 23 '16 14:05 jonkemp

@jonkemp

Would that make sense for this project though? The project's description is "Run QUnit unit tests in a headless PhantomJS instance.".

May 23 '16 14:05 FagnerMartinsBrack

I see your point. It is pretty tightly coupled with PhantomJS. I think if it could be spawned the same way as a child process like PhantomJS is, maybe you could have an option to use Chrome.

May 23 '16 14:05 jonkemp

Maybe should be easier now that chrome has headless mode (behind the flag so far): https://www.chromestatus.com/features/5678767817097216

Apr 21 '17 13:04 hun1ahpu

A basic example:

const puppeteer = require('puppeteer');
const DataURI = require('datauri');
const chalk = require('chalk');

const datauri = new DataURI();

// Create data URI of basic HTML page
// It contains a title element where we change the content via JS
datauri.format('.html', `<!doctype html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8"> 
  </head>
  <body>
    <h1>Original title</h1>

    <script>
      document.querySelector('h1').innerText = 'New title';
    </script>
  </body>
</html>`);

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.goto(datauri.content);

  // Load QUnit script
  await page.addScriptTag({
    url: 'https://cdnjs.cloudflare.com/ajax/libs/qunit/2.4.1/qunit.min.js'
  });

  // Run tests and return results
  const results = await page.evaluate(() => new Promise(function (resolve, reject) {
    var details = [];

    QUnit.test('Title text', (assert) => {
      assert.ok(document.querySelector('h1').innerText === 'New title', 'Title text equals "New title"');
    });

    QUnit.testDone((result) => details.push(result));

    QUnit.done((summary) => {
      resolve({
        details: details,
        summary: summary
      });
    });
  }));

  // Very basic reporter
  results.details.forEach((test) => {
    if (test.failed === 0) {
      console.log(chalk.green(`✓ ${test.name}`));
    } else {
      console.log(chalk.red(`× ${test.name}`));

      test.assertions.filter(function(assertion) {
        return !assertion.result;
      }).forEach(function(assertion) {
        console.log(chalk.red(`Failing assertion: ${assertion.message}`));
      });
    }
  });

  await browser.close();
});

Nov 26 '17 12:11 backflip

@backflip example of what?

Nov 27 '17 00:11 jonkemp

Sorry, good point. :) I was referring to your message from above:

I'm interested in how this will work.

Just in case you wondered what running QUnit tests in Puppeteer might look like.

Nov 27 '17 15:11 backflip

There now exists a node-qunit-puppeteer package, which the grunt-contrib-qunit package has since switched over to. Perhaps gulp-qunit could use this as well?

Bumping this because I have proposed to deprecate support for PhantomJS for the next release of QUnit, to drop sometime next year.

Nov 23 '20 06:11 Krinkle

gulp-qunit gulp-qunit copied to clipboard

Use chrome instead of PhantomJS

gulp-qunit
gulp-qunit copied to clipboard