astro-better-generate-screenshots 0.4.2 → 0.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-better-generate-screenshots",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "CLI that generates screenshot PNGs for astro-better-declarative-screenshots",
   "repository": {
     "type": "git",

package/scripts/check-screenshots.mjs

@@ -10,7 +10,7 @@ import { loadConfig } from 'astro-better-declarative-screenshots';
 import { discoverScreenshots } from '../src/discover.mjs';
 import { startDocker, stopDocker } from '../src/docker.mjs';
 import { capturePage, createBrowserContext } from '../src/capture.mjs';
-import { addChrome } from '../src/chrome.mjs';
+import { applyChrome } from '../src/chrome.mjs';
 import { diffScreenshot } from '../src/diff.mjs';
 
 const projectRoot = process.cwd();
@@ -93,7 +93,7 @@ async function main() {
       });
 
       let newBuffer = rawBuffer;
-      if (config.chrome.style !== 'none') {
+      if (config.chrome.style !== 'none' && config.chrome.renderIn !== 'css') {
         newBuffer = await addChrome(rawBuffer, {
           url: fullUrl,
           dark: config.chrome.dark,
@@ -177,6 +177,7 @@ function parseArgs(argv) {
     if (argv[i].startsWith('--filter=')) args.filter = argv[i].slice(9);
     if (argv[i].startsWith('--diff-dir=')) args.diffDir = argv[i].slice(11);
     if (argv[i] === '--diff-dir' && argv[i + 1]) args.diffDir = argv[++i];
+    if (argv[i] === '--threshold' && argv[i + 1]) args.thresholdRatio = parseFloat(argv[++i]);
     if (argv[i].startsWith('--threshold=')) args.thresholdRatio = parseFloat(argv[i].slice(12));
   }
   return args;

package/scripts/take-screenshots.mjs

@@ -9,7 +9,7 @@ import { loadConfig } from 'astro-better-declarative-screenshots';
 import { discoverScreenshots } from '../src/discover.mjs';
 import { startDocker, stopDocker } from '../src/docker.mjs';
 import { capturePage, createBrowserContext } from '../src/capture.mjs';
-import { addChrome } from '../src/chrome.mjs';
+import { applyChrome } from '../src/chrome.mjs';
 import { generatePlaceholder } from '../src/placeholder.mjs';
 
 const projectRoot = process.cwd();
@@ -91,17 +91,7 @@ async function main() {
         context,
       });
 
-      let finalBuffer = rawBuffer;
-
-      if (config.chrome.style !== 'none' && config.chrome.renderIn !== 'css') {
-        finalBuffer = await addChrome(rawBuffer, {
-          url: fullUrl,
-          dark: config.chrome.theme === 'dark',
-          showUrl: config.chrome.showUrl,
-          shadowBlur: config.chrome.shadowBlur,
-          shadowPadding: config.chrome.shadowPadding,
-        });
-      }
+      const finalBuffer = await applyChrome(rawBuffer, config, fullUrl);
 
       writeFileSync(outputPath, finalBuffer);
       process.stdout.write('done\n');

package/src/chrome.mjs

@@ -15,6 +15,26 @@ const URL_BAR_X = 100;
 const URL_BAR_X_MARGIN_R = 20;
 const URL_BAR_RADIUS = 5;
 
+/**
+ * Applies the window chrome the config asks for, or returns the buffer untouched.
+ *
+ * Both CLIs must decide this identically. With renderIn: 'css' the Screenshot
+ * component already draws the frame inside the page, so compositing here would add a
+ * second frame and change the image's dimensions. check-screenshots used to miss that
+ * condition and reported every image as 100% changed against a correct reference.
+ */
+export async function applyChrome(screenshotBuffer, config, url) {
+  const { chrome } = config;
+  if (chrome.style === 'none' || chrome.renderIn === 'css') return screenshotBuffer;
+  return addChrome(screenshotBuffer, {
+    url,
+    dark: chrome.theme === 'dark',
+    showUrl: chrome.showUrl,
+    shadowBlur: chrome.shadowBlur,
+    shadowPadding: chrome.shadowPadding,
+  });
+}
+
 export async function addChrome(screenshotBuffer, opts = {}) {
   const {
     url = '',