bibliogram/test/screenshot.js

const tap = require("tap")
const se = require("selenium-webdriver")
const firefox = require("selenium-webdriver/firefox")
const fs = require("fs").promises
const Jimp = require("jimp")
const commands = require("./screenshots/commands")
const child_process = require("child_process")
const constants = require("../src/lib/constants")

const browser = "firefox"

const port = 10407 + (+process.env.TAP_CHILD_ID)
constants.port = port
constants.request_backend = "saved" // predictable request results
const origin = `http://localhost:${port}`
constants.website_origin = origin

const dimensions = new Map([
	["firefox", {
		scrollbar: 12,
		heightDifference: 74,
		widthDifference: 0
	}],
	["chrome", {
		scrollbar: 15,
		heightDifference: 128,
		widthDifference: 8
	}]
])

const browserDimensions = dimensions.get(browser)

process.chdir("src/site")
const server = require("../src/site/server")

function exec(command) {
	return new Promise((resolve, reject) => {
		child_process.exec(command, (error, stdout, stderr) => {
			resolve({stdout, stderr})
		})
	})
}

;(async () => {
	await fs.mkdir("../../test/screenshots/diff", {recursive: true})
	await fs.mkdir("../../test/screenshots/staging", {recursive: true})

	const options = new firefox.Options()
	// options.addArguments("-headless")
	const [driver] = await Promise.all([
		new se.Builder().forBrowser(browser).setFirefoxOptions(options).build(),
		server.waitForFirstCompile()
	])

	server.muteLogsStartingWith("/") // we don't need webserver stuff in our test logs

	function setSize(size) {
		return driver.manage().window().setRect({
			width: size.width + browserDimensions.widthDifference + browserDimensions.scrollbar,
			height: size.height + browserDimensions.heightDifference
		})
	}

	await driver.get(origin)

	for (const command of commands) {
		await Promise.all(Object.keys(command.cookies).map(cookieName =>
			driver.manage().addCookie({
				name: cookieName,
				value: command.cookies[cookieName]
			})
		))

		await setSize(command.size) // complete this before driver.get so that srcset doesn't get confused
		await driver.get(origin + command.url)

		for (let scrollNumber = 1; scrollNumber <= command.scrolls; scrollNumber++) {
			const filenameWithScroll = `${command.filename}-${scrollNumber}`
			function screenPath(dir) {
				return `../../test/screenshots/${dir}/${filenameWithScroll}.png`
			}

			if (scrollNumber > 1) {
				await driver.executeScript(`window.scrollByPages(1)`)
			}

			const finalExists = await fs.access(screenPath("final")).then(() => true).catch(() => false)

			const screenshot = Buffer.from(await driver.takeScreenshot(), "base64")

			const message = `equal screens: ${filenameWithScroll}`
			tap.test(message, async childTest => {
				const image = await Jimp.read(screenshot)
				image.crop(0, 0, command.size.width, command.size.height) // crop out page scrollbar

				if (finalExists) {
					await image.writeAsync(screenPath("staging"))
					const message = `screen: ${filenameWithScroll}`
					const result = await exec(`compare -metric AE ${screenPath("staging")} ${screenPath("final")} ${screenPath("diff")}`)
					const diff = +result.stderr
					childTest.ok(diff === 0, message)
					if (diff === 0) { // it worked, so we don't need the files anymore
						fs.unlink(screenPath("staging"))
						fs.unlink(screenPath("diff"))
					}
				} else {
					image.writeAsync(screenPath("final"))
					console.log(`note: creating new screenshot ${filenameWithScroll}`)
				}
			})
		}
	}

	tap.teardown(() => {
		driver.close()
		server.shutdown()
	})
})()