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][, includeAA = false[, ignoreColors = false[, ignoreRectangles = [] [, errorSettings = Object] ]]])

• threshold <[number]> A threshold value <0,1> default set to 0, max ratio of difference between images
• includeAA <[boolean]> should include anti aliasing?
• ignoreColors <[boolean]> should ignore colors?
• ignoreRectangles <[Array<Array[x, y, width, height]>]> should ignore rectangles? example: [[325,170,100,40], [10,10,200,200]]
• errorSettings <[Object]> change how to display errors (errorType: flat | movement | flatDifferenceIntensity | movementDifferenceIntensity | diffOnly):

{
  errorColor: {
    red: 255,
    green: 0,
    blue: 255
  },
  errorType: 'flat',
  transparency: 0.7
}

• returns: <[function]> resolves to function

const tester = await ScreenshotTester()

create test runner with optional config

constructor(page[, name = 'test'[, screenshotOptions = {}]])

• page <[BrowserPage]> BrowserPage returned by puppeteer when calling puppeteer.lunch().newPage()
• name <[string]> name of created screenshot 'test' by default
• screenshotOptions <[Object]> options passed to puppeteer's screenshot method https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagescreenshotoptions
• 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)

  })
})