How to use Puppeteer and Headless Chrome with Cucumber-js

I am trying to do BDD with cucumber-js and drive the browser testing with Headless Chrome and puppeteer.

Using the documentation from cucumber node example and headless chrome, I get the following errors, the entire code base is avaliable here: github repo.

Errors:

1. TypeError: this.browser.newPage is not a function
2. TypeError: this.browser.close is not a function

// features/support/world.js

const puppeteer = require('puppeteer');
var {defineSupportCode} = require('cucumber');

function CustomWorld() {
  this.browser = puppeteer.launch();  
}

defineSupportCode(function({setWorldConstructor}) {
  setWorldConstructor(CustomWorld)
})

// features/step_definitions/hooks.js

const puppeteer = require('puppeteer');
var {defineSupportCode} = require('cucumber');

defineSupportCode(function({After}) {
  After(function() {
    return this.browser.close();
  });
});

// features/step_definitions/browser_steps.js

const puppeteer = require('puppeteer');
var { defineSupportCode } = require('cucumber');

defineSupportCode(function ({ Given, When, Then }) {
    Given('I am on the Cucumber.js GitHub repository', function (callback) {
        const page = this.browser.newPage();
        return page.goto('https://github.com/cucumber/cucumber-js/tree/master');
    });

    When('I click on {string}', function (string, callback) {
        // Write code here that turns the phrase above into concrete actions
        callback(null, 'pending');
    });

    Then('I should see {string}', function (string, callback) {
        // Write code here that turns the phrase above into concrete actions
        callback(null, 'pending');
    });
});

Answer

We created puppeteer-cucumber-js to simplify working with Puppeteer and Cucumber:

1. Run npm install puppeteer-cucumber-js
2. Create a features folder in the root of your project
3. Add a feature-name.feature file with your Given, When, Then statements
4. Create a features/step-definitions folder
5. Add JavaScript steps to execute for each of your features steps
6. Run tests node ./node_modules/puppeteer-cucumber-js/index.js --headless

Source code with a working example on GitHub