@ianwalter/puppeteer-helper NPM

@ianwalter/puppeteer-helper

An AVA helper that makes a Puppeteer page available to a test

About

This helper is based on a recipe that can be found in AVA's docs.

Installation

yarn add @ianwalter/puppeteer-helper --dev

Warning

This is meant for testing. You wouldn't want to run untrusted code as root with this since sandboxing is disabled.

Usage

JavaScript to evaluate in the browser (something.js):

import subpub from '@ianwalter/subpub'

// Run your evaluation inside of `window.run` which passes the resolve/reject
// functions from the returned promise and an arg if a second argument is passed
// to `t.evaluate`.
window.run((resolve, reject, args) => {
  // Subscribe to the 'alerts' topic and resolve the evaluation when a message
  // is received.
  subpub.sub('alerts', data => resolve(data.msg))

  // Send a test message to the 'alerts' topic.
  subpub.pub('alerts', { msg: 'Winter Snow Advisory!' })
})

Using the evaluation script in an AVA test:

import test from 'ava'
import puppeteerHelper from '@ianwalter/puppeteer-helper'

const withPage = puppeteerHelper() // You can pass Puppeteer options here.

test('message received', withPage, async (t, page) => {
  t.is(await t.evaluate('./something.js'), 'Winter Snow Advisory!')
})

API

t.evaluate(evaluationScriptPath, [frame]) - Runs the evaluation script (path is relative to process.cwd()) on the given frame (defaults to page). Arguments to the evaluate call can be supplied by adding them to t.context.args. A custom Webpack config can also be added to t.context.webpack.

Debugging

To aid in debugging tests, pass { devtools: true } to the puppeteerHelper call and then add debugger to the problem area in your evaluation script. This will stop the browser from automatically running in headless mode and pause execution where debugger is placed. This is helpful if you, for example, want to see/modify a snapshot of variables in the execution context within Chrome DevTools.