improve screenshot diff stuff

full screen screenshots were sometimes just blank

Author: laduke

e2e/screenshot.spec.ts

@@ -22,7 +22,7 @@ function screenshotPathname(pathname: string) {
     await page.waitForFunction(waitForDocusaurusHydration);
     await page.addStyleTag({content: stylesheet});
     const spath = `./screenshots/${pathnameToArgosName(pathname)}.png`
-    await page.screenshot({ path: spath, fullPage: true });
+    await page.screenshot({ path: spath });
   });
 }
 

scripts/image-diff.ts

@@ -7,18 +7,29 @@ import fs from "node:fs"
 import os from "node:os"
 import path from "node:path"
 import { PNG } from "pngjs"
-import  pixelmatch  from "pixelmatch"
+import pixelmatch from "pixelmatch"
 import { asyncFolderWalker } from 'async-folder-walker'
 
-const basePath1 =  os.homedir() + '/Downloads/screenshots-main/'
-const basePath2 =  os.homedir() + '/Downloads/screenshots-3/'
+const basePath1 = '../screenshots-main'
+const basePath2 = "../screenshots/"
 
 iterateFiles()
 
-async function iterateFiles () {
+async function iterateFiles() {
   const walker = asyncFolderWalker([basePath1])
   let tmpdir = ''
 
+  try {
+    tmpdir = os.tmpdir()
+    console.log(tmpdir)
+    fs.mkdtempSync(tmpdir)
+    tmpdir = path.join(tmpdir, "diffs/")
+    fs.mkdirSync(tmpdir)
+  } catch (e) {
+    console.log(e.message)
+  }
+
+
   for await (const file of walker) {
     if (typeof file == 'string') {
       if (file.includes(".png")) {
@@ -27,19 +38,21 @@ async function iterateFiles () {
         const otherFile = file.replace(basePath1, basePath2)
         const img2 = PNG.sync.read(fs.readFileSync(otherFile));
 
-        const {width, height} = img1;
-        const diff = new PNG({width, height});
-        const result = pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1})
-        if (result > 0) {
-          console.log(result, file, otherFile)
-          if (!tmpdir) {
-            tmpdir = path.join(os.tmpdir(), 'diffs-')
-            fs.mkdtempSync(tmpdir)
+        const { width, height } = img1;
+        const diff = new PNG({ width, height });
+        try {
+          const result = pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.1 })
+          if (result > 0) {
+            console.log(result, file, otherFile)
+
+            const dest = tmpdir + path.parse(file).base
+            console.log("diff image saved to:")
+            console.log(dest)
+            fs.writeFileSync(dest, PNG.sync.write(diff));
           }
-
-          const dest = tmpdir + path.parse(file).base
-          console.log("diff image saved to:")
-          console.log(dest)
+        } catch (e) {
+          console.log(e.message, file)
+          const dest = tmpdir + "err-" + path.parse(file).base
           fs.writeFileSync(dest, PNG.sync.write(diff));
         }
       }