puppeteer-screenshot-tester

puppeteer-screenshot-tester

Small library that allows us to compare screenshots generated by puppeteer in our tests.

Instalation

yarn add --dev puppeteer-screenshot-tester

or

npm install --save-dev puppeteer-screenshot-tester

Usage

require tester library

const ScreenshotTester = require('puppeteer-screenshot-tester')

create test runner with optional config

constructor([threshold = 0.1][, includeAA = false])

• threshold <[number]> A threshold value <0,1> default set to 0.1, threshold is used to make comparision more precise.
• includeAA <[boolean]> should include anti aliasing?
• returns: <[function]> resolves to function

const tester = await ScreenshotTester()

create test runner with optional config

constructor(page[, name = 'test'])

• page <[BrowserPage]> BrowserPage returned by puppeteer when calling puppeteer.lunch().newPage()
• name <[string]> name of created screenshot 'test' by default
• returns: <[boolean]> true if images are the same or there is no image to compare (first run)

const result = tester(page)

Examples

const puppeteer = require( 'puppeteer')
const ScreenTest = require('puppeteer-screenshot-tester')

describe('google test', () => {
  let originalTimeout

  // extend default interval to 10s because some image processing might take some time
  // we can do it beforeEach or once per test suite it's up to you
  // if you're running that on fast computer/server probably won't need to do that
  beforeEach(function() {
    originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL
    jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
  })

  // set default interval timeout for jasmine
  afterEach(function() {
    jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout
  })

  it(`check if google exists`, async () => {
    // create ScreenshotTester with optional config
    const tester = await ScreenTest()

    // setting up puppeteer
    const browser = await puppeteer.launch()
    const page = await browser.newPage()
    await page.setViewport({width: 1920, height: 1080})
    await page.goto('https://www.google.com', { waitUntil: 'networkidle0' })
    await page.type('#lst-ib', 'Hello', { delay: 100 });

    // call our tester with browser page returned by puppeteer browser
    // second parameter is optional it's just a test name if provide that's filename
    const result = await tester(page, 'test2')
    await browser.close()

    // make assertion result is always boolean
    expect(result).toBe(true)

  })
})