Puppeteer E2E test: Show actual and difference screenshots (#25410)

* Puppeteer: Show actual and diff screenshots

* Semicolons

* Fix warning

.github/workflows/ci.yml

@@ -77,6 +77,12 @@ jobs:
 
       - name: === E2E testing ===
         run: npm run test-e2e
+      - name: Upload output screenshots
+        uses: actions/upload-artifact@v3
+        with:
+          name: Output screenshots
+          path: test/e2e/output-screenshots
+          if-no-files-found: ignore
 
   e2e-cov:
     name: "Examples ready for release"

.gitignore

@@ -13,5 +13,6 @@ test/treeshake/index.bundle.min.js
 test/treeshake/index-src.bundle.min.js
 test/treeshake/stats.html
 test/e2e/chromium
+test/e2e/output-screenshots
 
 **/node_modules

test/e2e/puppeteer.js

@@ -142,6 +142,11 @@ process.on( 'SIGINT', () => close() );
 
 async function main() {
 
+	/* Create output directories */
+
+	try { await fs.rm( 'test/e2e/output-screenshots', { recursive: true, force: true } ); } catch {}
+	try { await fs.mkdir( 'test/e2e/output-screenshots' ); } catch {}
+
 	/* Find files */
 
 	const isMakeScreenshot = process.argv[ 2 ] === '--make';
@@ -522,10 +527,11 @@ async function makeAttempt( pages, failedScreenshots, cleanPage, isMakeScreensho
 
 			try {
 
-				expected = await jimp.read( `examples/screenshots/${ file }.jpg` );
+				expected = ( await jimp.read( `examples/screenshots/${ file }.jpg` ) ).quality( jpgQuality );
 
 			} catch {
 
+				await screenshot.writeAsync( `test/e2e/output-screenshots/${ file }-actual.jpg` );
 				throw new Error( `Screenshot does not exist: ${ file }` );
 
 			}
@@ -544,6 +550,8 @@ async function makeAttempt( pages, failedScreenshots, cleanPage, isMakeScreensho
 
 			} catch {
 
+				await screenshot.writeAsync( `test/e2e/output-screenshots/${ file }-actual.jpg` );
+				await expected.writeAsync( `test/e2e/output-screenshots/${ file }-expected.jpg` );
 				throw new Error( `Image sizes does not match in file: ${ file }` );
 
 			}
@@ -558,6 +566,9 @@ async function makeAttempt( pages, failedScreenshots, cleanPage, isMakeScreensho
 
 			} else {
 
+				await screenshot.writeAsync( `test/e2e/output-screenshots/${ file }-actual.jpg` );
+				await expected.writeAsync( `test/e2e/output-screenshots/${ file }-expected.jpg` );
+				await diff.writeAsync( `test/e2e/output-screenshots/${ file }-diff.jpg` );
 				throw new Error( `Diff wrong in ${ differentPixels.toFixed( 1 ) }% of pixels in file: ${ file }` );
 
 			}