ui.test.js

'use strict'

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

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

let browser
let page
let har

// threshold is the difference in pixels before the snapshots dont match
const toMatchImageSnapshot = configureToMatchImageSnapshot({
	customDiffConfig: { threshold: 2 },
	noColors: true,
})
expect.extend({ toMatchImageSnapshot })

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

afterAll( () => browser.close() ) // https://github.com/GoogleChrome/puppeteer/issues/561

describe('todo list', () => {
	test('adding one item', async done => {
		// start generating a trace file
		await page.tracing.start({path: 'trace/add_one_item_har.json',screenshots: true})
		await har.start({ path: 'trace/add_one_item_trace.har' })
		// ARRANGE
		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
		await page.goto('http://localhost:8080', { timeout: 30000, waitUntil: 'load' })
		// take a screenshot and save to the file system
		await page.screenshot({ path: 'screenshots/empty_list.png' })

		// ACT
		// complete the form and click submit
		await page.type('input[name=item]', 'bread')
		await page.type('input[name=qty]', '42')
		await page.click('input[type=submit]')
		await page.waitForSelector('h1')
		// await page.waitFor(1000) // sometimes you need a second delay

		// ASSERT
		const title = await page.title()
		expect(title).toBe('ToDo List')

		// extracting the text inside the first H1 element on the page
		const heading = await page.evaluate( () => {
			const dom = document.querySelector('h1')
			return dom.innerText
		})
		expect(heading).toBe('ToDo List')

		// a more concise, single line version of the above
		expect( await page.evaluate( () => document.querySelector('h2').innerText ) ).toBe('My List')

		// extracting all the text from the first row of the table as an array
		const items = await page.evaluate( () => {
			const dom = document.querySelectorAll('table tr td:first-child')
			const arr = Array.from(dom)
			return arr.map(td => td.innerText)
		})
		const numRows = items.reduce( (acc, val) =>  (val === 'bread' ? acc += 1 : acc), 0)

		console.log(`numRows: ${numRows}`)

		// returns the number of rows containing the given string
		const items2 = await page.evaluate(() => Array
			.from(document.querySelectorAll('table tr td:first-child'))
			.map(td => td.innerHTML) 
			.reduce( (acc, val) =>  (val === 'bread' ? acc += 1 : acc), 0)
		)

		expect(items.length).toBe(1)
		expect(items[0]).toBe('bread')
		expect(numRows).toBe(1)

		// grab a screenshot
		const image = await page.screenshot()
		// compare to the screenshot from the previous test run
		expect(image).toMatchImageSnapshot()
		// stop logging to the trace files
		await page.tracing.stop()
		await har.stop()
		done()
	}, 16000)
})