Add screenshot tester

test/screenshot.js

@@ -0,0 +1,105 @@
+const tap = require("tap")
+const se = require("selenium-webdriver")
+const fs = require("fs").promises
+const Jimp = require("jimp")
+const commands = require("./screenshots/commands")
+const child_process = require("child_process")
+
+const browser = "firefox"
+
+const origin = "http://localhost:10407"
+
+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 [driver] = await Promise.all([
+		new se.Builder().forBrowser(browser).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) {
+		function screenPath(dir) {
+			return `../../test/screenshots/${dir}/${command.filename}.png`
+		}
+
+		await Promise.all(Object.keys(command.cookies).map(cookieName =>
+			driver.manage().addCookie({
+				name: cookieName,
+				value: command.cookies[cookieName]
+			})
+		))
+
+		await Promise.all([
+			setSize(command.size),
+			driver.get(origin + command.url)
+		])
+
+		const finalExists = await fs.access(screenPath("final")).then(() => true).catch(() => false)
+
+		const screenshot = Buffer.from(await driver.takeScreenshot(), "base64")
+
+		const message = `equal screens: ${command.filename}`
+		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: ${command.filename}`
+				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 ${command.filename}`)
+			}
+		})
+	}
+
+	tap.teardown(() => {
+		driver.close()
+		server.shutdown()
+	})
+})()

test/screenshots/commands.js

@@ -0,0 +1,37 @@
+const sizes = {
+	laptop: {
+		width: 1366,
+		height: 768
+	},
+	phone: {
+		width: 450,
+		height: 828
+	}
+}
+
+const cookies = {
+	default: {
+		settings: "d8f3967f153a5422ba8bd068da4dca5f"
+	},
+	ptc: {
+		settings: "a513b2b80db331a60f875bc2679ee35e"
+	}
+}
+
+function generateSetup(pageName, url, sizeName, cookiesName) {
+	return {
+		url: url,
+		filename: `${pageName}-${sizeName}-${cookiesName}`,
+		size: sizes[sizeName],
+		cookies: cookies[cookiesName]
+	}
+}
+
+module.exports = [
+	generateSetup("home", "/", "laptop", "default"),
+	generateSetup("settings", "/settings", "laptop", "default"),
+	generateSetup("home", "/", "phone", "default"),
+	generateSetup("home", "/", "laptop", "ptc"),
+	generateSetup("settings", "/settings", "laptop", "ptc"),
+	generateSetup("home", "/", "phone", "ptc"),
+]