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).