ui.test.js

'use strict'

// https://jestjs.io/docs/en/getting-started

const puppeteer = require('puppeteer')
const { configureToMatchImageSnapshot } = require('jest-image-snapshot')

const width = 800
const height = 600
const delayMS = 5

let browser
let page

const toMatchImageSnapshot = configureToMatchImageSnapshot({
  customDiffConfig: { threshold: 0 },
  noColors: true,
})
expect.extend({ toMatchImageSnapshot })

beforeAll(async () => {
	browser = await puppeteer.launch({ headless: false, slowMo: delayMS, args: [`--window-size=${width},${height}`] })
	page = await browser.newPage()
	await page.setViewport({ width, height })
})
afterAll( () => browser.close() )

describe('todo list', () => {
	test('adding one item', async done => {
		await page.waitFor(1000)
		await page.tracing.start({path: 'add_one_item.json',screenshots: true})
		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
		await page.screenshot({ path: 'screenshots/empty_list.png' })
		await page.type('input[name=item]', 'bread')
		await page.type('input[name=qty]', '42')
		await page.click('input[type=submit]')
		await page.waitForSelector('h1')
		const title = await page.title()
		expect(title).toBe('ToDo List')
		const heading = await page.$eval('h1', node => node.innerText)
		expect(heading).toBe('ToDo List')
		const data = await page.evaluate(() => Array.from(document.querySelectorAll('table tr td:first-child')).map(td => td.innerHTML) )
		expect(data.length).toBe(1)
		expect(data[0]).toBe('bread')
		const image = await page.screenshot()
    expect(image).toMatchImageSnapshot()
		await page.tracing.stop()
		done()
	}, 16000)
})