From 5baae5167d867c7cfe0cd9f453894c00f124d3dd Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Mon, 20 Jul 2020 19:15:58 +1200 Subject: [PATCH] Add screenshot tests for user, post, and gallery --- package.json | 4 +- src/lib/utils/saved_requests/manager.js | 4 +- test/screenshot.js | 75 ++++++++++++++----------- test/screenshots/commands.js | 23 +++++--- 4 files changed, 62 insertions(+), 44 deletions(-) diff --git a/package.json b/package.json index 7b07412..1226987 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ "start": "cd src/site && node server.js", "assistant": "cd src/site && node assistant.js", "build-lang": "cd src/lang/utils && node build_base.js", - "test": "tap" + "test": "tap", + "upload-test-files": "rsync -a src/lib/utils/saved_requests/files/ debib:meta/saved_requests; rsync -a test/screenshots/final/ debib:meta/screenshots", + "download-test-files": "bash -c 'mkdir -p test/screenshots/{diff,final,staging} && rm test/screenshots/final/* && wget -q -r -nd -np -P test/screenshots/final -R html -R tmp https://meta.bibliogram.art/screenshots/'" }, "keywords": [], "author": "", diff --git a/src/lib/utils/saved_requests/manager.js b/src/lib/utils/saved_requests/manager.js index 29e6b77..7cf78df 100644 --- a/src/lib/utils/saved_requests/manager.js +++ b/src/lib/utils/saved_requests/manager.js @@ -60,7 +60,7 @@ class SavedRequestManager { const base = pj(folder, row.path) try { fs.accessSync(base) - console.log("Found, using saved request for "+row.path) + // console.log("Found, using saved request for "+row.path) return new Saved(base) } catch (e) { console.log("Known, but not downloaded for "+row.path) @@ -85,7 +85,7 @@ class SavedRequestManager { } } else { const name = generateName() - console.log("Not found, saving now as "+name) + console.log(`Not found, saving now:\n ${this.url}\n -> ${name}`) const internalRequest = new NodeFetch(this.url) return new DelayedBackend( diff --git a/test/screenshot.js b/test/screenshot.js index 627b66c..7f1535c 100644 --- a/test/screenshot.js +++ b/test/screenshot.js @@ -1,5 +1,6 @@ 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") @@ -24,6 +25,9 @@ const dimensions = new Map([ const browserDimensions = dimensions.get(browser) +const constants = require("../src/lib/constants") +constants.request_backend = "saved" // predictable request results + process.chdir("src/site") const server = require("../src/site/server") @@ -39,8 +43,10 @@ function exec(command) { 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).build(), + new se.Builder().forBrowser(browser).setFirefoxOptions(options).build(), server.waitForFirstCompile() ]) @@ -56,10 +62,6 @@ function exec(command) { 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, @@ -67,35 +69,44 @@ function exec(command) { }) )) - await Promise.all([ - setSize(command.size), - driver.get(origin + command.url) - ]) + await setSize(command.size) // complete this before driver.get so that srcset doesn't get confused + await 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}`) + 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(() => { diff --git a/test/screenshots/commands.js b/test/screenshots/commands.js index 73b4c20..2eb95c4 100644 --- a/test/screenshots/commands.js +++ b/test/screenshots/commands.js @@ -18,7 +18,7 @@ const cookies = { } } -function generateSetup(pageName, url, sizeName, cookiesName, scrolls) { +function generateSetup(pageName, url, sizeName, cookiesName, scrolls = 1) { return { url: url, filename: `${pageName}-${sizeName}-${cookiesName}`, @@ -28,13 +28,18 @@ function generateSetup(pageName, url, sizeName, cookiesName, scrolls) { } } -module.exports = [ - generateSetup("home", "/", "laptop", "default"), - generateSetup("settings", "/settings", "laptop", "default"), - generateSetup("home", "/", "phone", "default"), - generateSetup("settings", "/settings", "phone", "default"), +function generateAllSetups(pageName, url, scrolls) { + return Object.keys(cookies).map(cookieKey => + Object.keys(sizes).map(sizeKey => + generateSetup(pageName, url, sizeKey, cookieKey, scrolls) + ) + ).flat() +} - generateSetup("home", "/", "laptop", "ptc"), - generateSetup("settings", "/settings", "laptop", "ptc"), - generateSetup("home", "/", "phone", "ptc"), +module.exports = [ + ...generateAllSetups("home", "/"), + ...generateAllSetups("settings", "/settings"), + ...generateAllSetups("anti__reality", "/u/anti__reality?page=3", 2), + ...generateAllSetups("post", "/p/CCyko7oJ-ta"), + ...generateAllSetups("gallery", "/p/CCbVsCMpizf", 2) ]