How do I access the Puppeteer object in my spec file while using Karma?

Question

I have a Gulp task

gulp.task('ui-test', (done) =>
  new karmaServer({
      configFile: __dirname + '/karma.conf.js',
      singleRun: true
  }, done).start()
)

A Karma configuration

process.env.CHROME_BIN = require('puppeteer').executablePath()

module.exports = function(config) {
  config.set({
    browsers: ['ChromeHeadless'],
    files: [
      {pattern: 'ui-testing/*.spec.js', included: false},
    ],
    // frameworks to use
    frameworks: ['mocha', 'chai'],
  })
}

and a spec that wishes to use Puppeteer:

puppeteer = require('puppeteer')    

describe('login test', function () {
  let page;

  before (async function () {
    const browser = await puppeteer.launch();
    page = await browser.newPage();
    await page.goto('http://google.com');
  });

  after (async function () {
    await page.close();
  })

  it('should load the google page', async function () {
    expect(await page.title()).to.eql('Google');
  });
});

Which of course produces the error:

06 07 2018 08:15:16.164:INFO [HeadlessChrome 0.0.0 (Mac OS X 10.13.5)]: Connected on socket F1USmhKrpR4Eau9aAAAA with id 26089338
HeadlessChrome 0.0.0 (Mac OS X 10.13.5) ERROR
  {
    "message": "Uncaught ReferenceError: require is not defined\nat ui-testing/login.spec.js:1:1\n\nReferenceError: require is not defined\n    at ui-testing/login.spec.js:1:1",
    "str": "Uncaught ReferenceError: require is not defined\nat ui-testing/login.spec.js:1:1\n\nReferenceError: require is not defined\n    at ui-testing/login.spec.js:1:1"
  }

So my question is. How do I make sure that the puppeteer object is available in my spec files?

See if this helps: https://stackoverflow.com/questions/19117092/jasmine-tests-in-karma-uncaught-referenceerror-require-is-not-defined#comment34681465_19117092 — Aankhen, Jul 06 '18 at 09:54
Why are you running Puppeteer with Karma? Karma is a JS test runner that is not needed for Puppeteer tests. — Alan Friedman, Jul 06 '18 at 13:52

score 0 · Accepted Answer · answered Jul 06 '18 at 14:29

0

Short answer is: you can't.

Karma is meant for running your tests code in browser (see here), while Puppeteer is a node library. There is a POC for running Puppeteer code in browser, see here, but this is only a POC.

answered Jul 06 '18 at 14:29

Yaniv Efraim

6,633
7
53
96

How do I access the Puppeteer object in my spec file while using Karma?

1 Answers1