puppeteer-screenshot-tester - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

package.json

 {
   "name": "puppeteer-screenshot-tester",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Small library that allows us to compare screenshots generated by puppeteer in our tests",
@@ -19,3 +19,3 @@ "main": "src/index.js",
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=12.0.0"
   },
@@ -36,5 +36,6 @@ "author": "Kemal Erdem",
     "fs": "^0.0.1-security",
-    "nodejs-resemble": "^0.3.0",
+    "nodejs-resemble": "^0.4.1",
     "parent-module": "^2.0.0",
-    "path": "^0.12.7"
+    "path": "^0.12.7",
+    "sharp": "^0.29.2"
   },
@@ -44,4 +45,4 @@ "devDependencies": {
     "jest": "^26.6.3",
-    "puppeteer": "^8.0.0"
+    "puppeteer": "^11.0.0"
   }
 }

README.md

 puppeteer-screenshot-tester
 ---------------------------
 
-[![node](https://img.shields.io/badge/node-8+-brightgreen.svg)]()
-[![yarn](https://img.shields.io/badge/npm-orange.svg)](https://www.npmjs.com/package/puppeteer-screenshot-tester)
+<p align="center">
+<a href="https://nodejs.org/docs/latest-v12.x/api/index.html"><img src="https://img.shields.io/badge/node-12+-brightgreen.svg"></a>
+<a href="https://www.npmjs.com/package/puppeteer-screenshot-tester"><img src="https://img.shields.io/npm/v/puppeteer-screenshot-tester.svg"></a>
+</p>
 
@@ -39,3 +41,3 @@ Small library that allows us to compare screenshots generated by puppeteer in our tests.
 const tester = await ScreenshotTester(
-  [threshold = 0][, includeAA = false[, ignoreColors = false[, matchingBox = { ignoreRectangles = [], includeRectangle = [] } [, errorSettings = Object]]]]
+  [threshold = 0][, includeAA = false[, ignoreColors = false[, matchingBox = { ignoreRectangles = [], includeRectangle = [] } [, errorSettings = Object [, outputSettings = Object]]]]]
 )
@@ -62,2 +64,9 @@ ```
     ```
+- `outputSettings` <[Object]> change the output image settings:
+    ```
+    {
+      forceExt: 'jpeg' | 'png' | 'webp' | null,
+      compressionLevel: 8 // 0-9 for .png, 0-100 otherwise
+    }
+    ```
 - returns: <[function]> resolves to function
@@ -114,3 +123,3 @@
       transparency: 0.5
-    })
+    }, { compressionLevel: 8 })
 
@@ -117,0 +126,0 @@ // setting up puppeteer

src/index.js

@@ -5,3 +5,7 @@ const resemble = require('nodejs-resemble');
 const path = require('path');
+const sharp = require('sharp');
 
+const DEFAULT_COMPRESSION = 85;
+const DEFAULT_PNG_COMPRESSION = 8;
+
 // currying everywhere, that allows us to create one setup and then use tester without copying config each time
@@ -24,2 +28,6 @@ const ScreenTestFactory = function(
     transparency: 0.7
+  },
+  outputSettings = {
+    forceExt: null,
+    compressionLevel: null
   }) {
@@ -40,3 +48,3 @@ if(Array.isArray(matchingBox)) {
       let saveFolder = folderPath;
-      let ext = '.png';
+      let ext = screenshotOptions.type ? `.${screenshotOptions.type}` : '.png';
       if(screenshotOptions.path != null) {
@@ -84,9 +92,33 @@ const puppeteerExt = path.extname(screenshotOptions.path);
                 // save diff to test folder with '-diff' postfix
-                data.getDiffImage().pack().pipe(fs.createWriteStream(`${saveFolder}/${name}-diff${ext}`));
+                const storeExt = outputSettings.forceExt != null ? outputSettings.forceExt : ext.substring(ext.lastIndexOf(".")+1);
+                const extFormatter = {
+                  'jpeg': () => sharp().jpeg({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION }),
+                  'jpg': () => sharp().jpeg({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION }),
+                  'png': () => sharp().png({ compressionLevel: outputSettings.compressionLevel | DEFAULT_PNG_COMPRESSION }),
+                  'webp': () => sharp().webp({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION })
+                }
+                data.getDiffImage().pack()
+                  .pipe(extFormatter[storeExt]())
+                  .pipe(fs.createWriteStream(`${saveFolder}/${name}-diff${ext}`));
 
                 // optionally save the new image to the test directory
-                if (screenshotOptions.saveNewImageOnError) {
-                  fs.writeFileSync(`${saveFolder}/${name}-new${ext}`, screenShot);
-                } else if (screenshotOptions.overwriteImageOnChange) {
-                  fs.writeFileSync(`${saveFolder}/${name}${ext}`, screenShot);
+                if (screenshotOptions.saveNewImageOnError || screenshotOptions.overwriteImageOnChange) {
+                  const newFilePath = screenshotOptions.overwriteImageOnChange ? `${saveFolder}/${name}${ext}` : `${saveFolder}/${name}-new${ext}`;
+                  switch (storeExt) {
+                    case 'jpeg':
+                    case 'jpg':
+                      sharp(screenShot)
+                        .jpeg({quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION})
+                        .toFile(newFilePath);
+                      break;
+                    case 'webp':
+                      sharp(screenShot)
+                        .webp({quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION})
+                        .toFile(newFilePath);
+                      break;
+                    default:
+                      sharp(screenShot)
+                        .png({quality: outputSettings.compressionLevel || DEFAULT_PNG_COMPRESSION})
+                        .toFile(newFilePath);
+                  }
                 }
@@ -103,3 +135,21 @@
         // if there is no old image we cannot compare two images so just write existing screenshot as default image
-        fs.writeFileSync(`${saveFolder}/${name}${ext}`, screenShot);
+        // fs.writeFileSync(`${saveFolder}/${name}${ext}`, screenShot);
+        const storeExt = outputSettings.forceExt != null ? outputSettings.forceExt : ext.substring(ext.lastIndexOf(".")+1);
+        switch (storeExt) {
+          case 'jpeg':
+          case 'jpg':
+            await sharp(screenShot)
+              .jpeg({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION })
+              .toFile(`${saveFolder}/${name}${ext}`);
+            break;
+          case 'webp':
+            await sharp(screenShot)
+              .webp({ quality: outputSettings.compressionLevel || DEFAULT_COMPRESSION })
+              .toFile(`${saveFolder}/${name}${ext}`);
+            break;
+          default:
+            await sharp(screenShot)
+              .png({ quality: outputSettings.compressionLevel || DEFAULT_PNG_COMPRESSION })
+              .toFile(`${saveFolder}/${name}${ext}`);
+        }
         console.log('There was nothing to compare, current screens saved as default');
@@ -106,0 +156,0 @@ return true;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

167

increased by8.44%

Number of lines in readme file

182

increased by5.2%

Worsened metrics

Total package byte prevSize

264914

decreased by-78.46%

Dependency count

5

increased by25%

Number of package files

6

decreased by-40%

Dependency changes

• + Addedsharp@^0.29.2

• + Addedbase64-js@1.5.1(transitive)

• + Addedbl@4.1.0(transitive)

• + Addedbuffer@5.7.1(transitive)

• + Addedchownr@1.1.4(transitive)

• + Addedcolor@4.2.3(transitive)

• + Addedcolor-convert@2.0.1(transitive)

• + Addedcolor-name@1.1.4(transitive)

• + Addedcolor-string@1.9.1(transitive)

• + Addeddecompress-response@6.0.0(transitive)

• + Addeddeep-extend@0.6.0(transitive)

• + Addeddetect-libc@1.0.32.0.3(transitive)

• + Addedend-of-stream@1.4.4(transitive)

• + Addedexpand-template@2.0.3(transitive)

• + Addedfs-constants@1.0.0(transitive)

• + Addedgithub-from-package@0.0.0(transitive)

• + Addedieee754@1.2.1(transitive)

• + Addedinherits@2.0.4(transitive)

• + Addedini@1.3.8(transitive)

• + Addedis-arrayish@0.3.2(transitive)

• + Addedmimic-response@3.1.0(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp-classic@0.5.3(transitive)

• + Addednapi-build-utils@1.0.2(transitive)

• + Addednode-abi@3.67.0(transitive)

• + Addednode-addon-api@4.3.0(transitive)

• + Addednodejs-resemble@0.4.1(transitive)

• + Addedonce@1.4.0(transitive)

• + Addedprebuild-install@7.1.2(transitive)

• + Addedpump@3.0.2(transitive)

• + Addedrc@1.2.8(transitive)

• + Addedreadable-stream@3.6.2(transitive)

• + Addedsafe-buffer@5.2.1(transitive)

• + Addedsemver@7.6.3(transitive)

• + Addedsharp@0.29.3(transitive)

• + Addedsimple-concat@1.0.1(transitive)

• + Addedsimple-get@4.0.1(transitive)

• + Addedsimple-swizzle@0.2.2(transitive)

• + Addedstring_decoder@1.3.0(transitive)

• + Addedstrip-json-comments@2.0.1(transitive)

• + Addedtar-fs@2.1.1(transitive)

• + Addedtar-stream@2.2.0(transitive)

• + Addedtunnel-agent@0.6.0(transitive)

• + Addedutil-deprecate@1.0.2(transitive)

• + Addedwrappy@1.0.2(transitive)

• - Removednodejs-resemble@0.3.0(transitive)

• Updatednodejs-resemble@^0.4.1