puppeteer-screenshot-tester

puppeteer-screenshot-tester

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

Warning

This library is under hevy rewrite to give you more controll over image comparsion, i'll try to make API as similar as it is right now but new version will have some breaking changes :(

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)

  })
})