Puppeteer page object

Small wrapper on puppeteer allows to you use page object pattern with clean steps and incapsulated methods.

Installation

Install it with npm:

npm i --save-dev puppeteer-page-object

Or yarn:

yarn add -D puppeteer-page-object

Usage

Follow examples bellow for fast start.

You can also check some examples with cucumber here.

Base page object

About all properties you can here.

const PageObject = require('puppeteer-page-object')

const examplePageObject = new PageObject({
  scenarioName: 'example-scenario'
})
;async () => {
  await examplePageObject.init()
  await examplePageObject.open('https://example.com')
  await examplePageObject.screenshot()
  await examplePageObject.close()
}

Extending

You can create page object instances and use all power of build in methods and properties:

const PageObject = require('puppeteer-page-object')

class ExamplePage extends PageObject {
  async typeToInput(text) {
    await this.page.type('#input', text)
  }
}

const examplePageObject = new ExamplePage()
;async () => {
  await examplePageObject.init()
  await examplePageObject.open('https://example.com')
  await examplePageObject.screenshot()
  await examplePageObject.typeToInput('Hello world')
  await examplePageObject.close()
}

Properties

Name	Type	Default value	Description
`headless`	`boolean`	`true`	Headless mode.
`scenarioName`	`string`	`null`	Scenario name to creates better screenshots names.
`screenshotsPath`	`string`	`screenshots`	Path to save screenshots.
`args`	`string[]`	`['--no-sandbox', '--disable-setuid-sandbox']`	Args for puppeteer browser launch.

Methods

Name	Returns	Description
`.init()`	`Promise<void>`	Initialize page object, creates `browser` and `page` instance. Must be called before all actions with `browser` and `page` properties.
`.open(url: string)`	`Promise<void>`	Opens given `url`. Sugar for `this.page.goto`.
`.close()`	`Promise<void>`	Closes page. Sugar for `this.browser.close`.
`.screenshot(params?: object)`	`Promise<void>`	Capture screenshot and save it to dir defined by `this.screenshotsPath`. You can alse pass params-object. Sugar for `this.page.screenshot`
`.generateScreenshotName()`	`string`	Generates unique screenshot name with test date and scenario name (if it defined in class instance).

epszaw / puppeteer-page-object