You're Invited: Meet the Socket team at BSidesSF and RSAC - April 27 - May 1.RSVP

chromascope

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

chromascope - npm Package Compare versions

Comparing version

to
1.1.3

# chromascope
## 1.1.3
### Patch Changes
- c7b79be: Migrating from Rome to Biome
## 1.1.2

@@ -4,0 +10,0 @@

#!/usr/bin/env node
var b="1.1.2";var w=class{constructor(t=void 0){this.options={verbose:!1};this.setOptions(t)}setOptions(t){this.options={...this.options,...t}}log(...t){console.log(...t)}error(...t){console.error(...t)}debug(...t){this.options.verbose&&console.log(...t)}},R=new w,c=R;import x from"ora";var B=x({spinner:"orangeBluePulse"}),m=()=>x({spinner:"orangeBluePulse"}),p=B;var M=/^(?:(?:https?|ftp):\/\/)?(?:localhost|\S+(?:\.[^\s.]+)+|\[?[0-9a-fA-F:]+\]?)(?::\d+)?(?:\/[\w#!:.?+=&%@!\-\/]*)?(?:\?[\w&=]+)?$/i,C=e=>M.test(e),S=(e,t)=>{let r=[];return e.split(";").forEach(o=>{if(!o)return;let s=o.indexOf("="),i=o.slice(0,s),n=o.slice(s+1);r.push({name:i.trim(),value:n.trim(),url:t})}),r};import{chromium as I,firefox as W,webkit as j}from"@playwright/test";import f from"fs";import K from"pixelmatch";import{PNG as d}from"pngjs";var P=async(e,t)=>{c.setOptions({verbose:t.options.verbose});let r=[A(e,t),U(e,t),N(e,t)],o=await Promise.allSettled(r),[s,i,n]=o,a=s.status==="fulfilled"?s.value:null,l=i.status==="fulfilled"?i.value:null,h=n.status==="fulfilled"?n.value:null,g=await v(a,l,"chromium-webkit",t),k=await v(a,h,"chromium-firefox",t);return!t.options.saveDiff&&f.existsSync(t.options.folder)&&f.existsSync(t.runFolder)&&(t.spinner.text="Cleaning up \u{1F9F9}",f.rmdirSync(t.runFolder,{recursive:!0}),f.readdirSync(t.options.folder).length===0&&f.rmdirSync(t.options.folder)),t.spinner.text="",[{...g,browserName:"\u{1F34E} WebKit"},{...k,browserName:"\u{1F98A} Firefox"}]},D=e=>{c.log(`\u250C\u2500 ${e.browserName}`),c.log(`${e.diffPath?"\u251C\u2500":"\u2514\u2500"} \u{1F449} ${e.pixelChangePercentage.toFixed(2)}% pixel change compared to Chromium (${e.pixelChange}px)`),e.diffPath&&c.log(`\u2514\u2500 \u{1F449} Visual diff stored at ${e.diffPath}`)},U=async(e,t)=>{let r=m().start("Capturing WebKit screenshot \u{1F4F7}"),o=await j.launch(),s=await y(e,o,t);return r.succeed("Captured WebKit screenshot \u{1F4F8}"),s},N=async(e,t)=>{let r=m().start("Capturing Firefox screenshot \u{1F4F7}"),o=await W.launch(),s=await y(e,o,t);return r.succeed("Captured Firefox screenshot \u{1F4F8}"),s},A=async(e,t)=>{let r=m().start("Capturing Chromium screenshot \u{1F4F7}"),o=await I.launch(),s=await y(e,o,t);return r.succeed("Captured Chromium screenshot \u{1F4F8}"),s},y=async(e,t,r)=>{let o=await t.newContext();r.options.cookie&&await o.addCookies(S(r.options.cookie,e));let i=t.browserType().name(),n=await o.newPage();await n.goto(e);let a=r.options.saveDiff?`${r.runFolder}/${i}.png`:void 0;return c.debug(`Saving ${i} screenshot to ${a}`),r.options.element?await n.locator(r.options.element).screenshot({path:a}):await n.screenshot({path:a,fullPage:r.options.fullPage})},v=async(e,t,r,o)=>{if(!e||!t)throw new Error("One or more screenshot buffer is null. Make sure all browsers are installed by running `npx playwright install chromium webkit firefox`.");let s=d.sync.read(e),i=d.sync.read(t),n={width:Math.max(s.width,i.width),height:Math.max(s.height,i.height)};(s.width!==i.width||s.height!==i.height)&&(s=$(s,n),i=$(i,n));let a=new d({width:n.width,height:n.height}),l=K(s.data,i.data,a.data,n.width,n.height,{threshold:o.options.threshold}),h="";o.options.saveDiff&&(h=`${o.runFolder}/diff-${r}.png`,o.spinner.text=`Saving ${r} diff \u{1F5C4}\uFE0F`,f.writeFileSync(h,d.sync.write(a)));let g=l/(n.width*n.height)*100;return{pixelChange:l,pixelChangePercentage:g,diffPath:h}},$=(e,{width:t,height:r})=>{if(e.width===t&&e.height===r)return e;c.debug(`Resizing image to ${t}x${r}...`);let o=new Uint8Array(t*r*4);for(let s=0;s<r;s++)for(let i=0;i<t;i++){let n=(s*t+i)*4;if(s<e.height&&i<e.width){let a=(s*e.width+i)*4;o[n]=e.data[a],o[n+1]=e.data[a+1],o[n+2]=e.data[a+2],o[n+3]=e.data[a+3]}else o[n]=0,o[n+1]=0,o[n+2]=0,o[n+3]=0}return{data:Buffer.from(o),width:t,height:r}};function O(e,t){let r=L(),o=`${e.folder}/${r}`;return{runId:r,spinner:t,runFolder:o,options:e}}var L=()=>{let e=new Date,t=e.getFullYear().toString(),r=(e.getMonth()+1).toString().padStart(2,"0"),o=e.getDate().toString().padStart(2,"0"),s=e.getHours().toString().padStart(2,"0"),i=e.getMinutes().toString().padStart(2,"0"),n=e.getSeconds().toString().padStart(2,"0");return`${t}${r}${o}${s}${i}${n}`};import V from"cac";var u=V("chromascope");u.command("diff <url>","Diff the URL in chromium, firefox, and webkit. Using chromium as the base.").option("-e, --element <selector>","Diff only the element with the given selector").option("-f, --full-page","Take a full page screenshot").option("-v, --verbose","Show more output").option("-c, --cookie <cookie>","Add one or more cookies to the context. Format: key=value;key2=value2").option("-s, --save-diff","Save generated diff as png").option("-t, --threshold <threshold>","Set the threshold for the diff",{default:.2}).option("-f, --folder <folder>","Set the base folder for chromascope runs",{default:"chromascope-runs"}).action(async(e,t)=>{p.start("Starting \u2699\uFE0F"),(!e||!C(e))&&(p.fail(),console.error("Please provide a valid url"),process.exit(1));let r=O(t,p);c.setOptions({verbose:t.verbose}),c.debug(`Options provided: ${JSON.stringify(t)}`),e.startsWith("http")||(e=`https://${e}`),c.debug(`Diffing URL: ${e}`),c.debug(`Run ID: ${r.runId}`);let o=await P(e,r);p.succeed("Diff complete \u{1F389}"),o.forEach(D),process.exit(0)});u.help();u.version(b);(async()=>{try{u.parse(process.argv,{run:!1}),await u.runMatchedCommand()}catch(e){p.fail("Failed"),c.error(e),process.exit(1)}})();
import V from"cac";var y="1.1.3";import l from"fs";import{chromium as I,firefox as W,webkit as j}from"@playwright/test";import U from"pixelmatch";import{PNG as d}from"pngjs";var w=class{constructor(t=void 0){this.options={verbose:!1};this.setOptions(t)}setOptions(t){this.options={...this.options,...t}}log(...t){console.log(...t)}error(...t){console.error(...t)}debug(...t){this.options.verbose&&console.log(...t)}},R=new w,c=R;import x from"ora";var B=x({spinner:"orangeBluePulse"}),m=()=>x({spinner:"orangeBluePulse"}),p=B;var M=/^(?:(?:https?|ftp):\/\/)?(?:localhost|\S+(?:\.[^\s.]+)+|\[?[0-9a-fA-F:]+\]?)(?::\d+)?(?:\/[\w#!:.?+=&%@!\-\/]*)?(?:\?[\w&=]+)?$/i,C=e=>M.test(e),S=(e,t)=>{let r=[];return e.split(";").forEach(o=>{if(!o)return;let s=o.indexOf("="),i=o.slice(0,s),n=o.slice(s+1);r.push({name:i.trim(),value:n.trim(),url:t})}),r};var P=async(e,t)=>{c.setOptions({verbose:t.options.verbose});let r=[A(e,t),K(e,t),N(e,t)],o=await Promise.allSettled(r),[s,i,n]=o,a=s.status==="fulfilled"?s.value:null,f=i.status==="fulfilled"?i.value:null,h=n.status==="fulfilled"?n.value:null,g=await v(a,f,"chromium-webkit",t),k=await v(a,h,"chromium-firefox",t);return!t.options.saveDiff&&l.existsSync(t.options.folder)&&l.existsSync(t.runFolder)&&(t.spinner.text="Cleaning up \u{1F9F9}",l.rmdirSync(t.runFolder,{recursive:!0}),l.readdirSync(t.options.folder).length===0&&l.rmdirSync(t.options.folder)),t.spinner.text="",[{...g,browserName:"\u{1F34E} WebKit"},{...k,browserName:"\u{1F98A} Firefox"}]},O=e=>{c.log(`\u250C\u2500 ${e.browserName}`),c.log(`${e.diffPath?"\u251C\u2500":"\u2514\u2500"} \u{1F449} ${e.pixelChangePercentage.toFixed(2)}% pixel change compared to Chromium (${e.pixelChange}px)`),e.diffPath&&c.log(`\u2514\u2500 \u{1F449} Visual diff stored at ${e.diffPath}`)},K=async(e,t)=>{let r=m().start("Capturing WebKit screenshot \u{1F4F7}"),o=await j.launch(),s=await b(e,o,t);return r.succeed("Captured WebKit screenshot \u{1F4F8}"),s},N=async(e,t)=>{let r=m().start("Capturing Firefox screenshot \u{1F4F7}"),o=await W.launch(),s=await b(e,o,t);return r.succeed("Captured Firefox screenshot \u{1F4F8}"),s},A=async(e,t)=>{let r=m().start("Capturing Chromium screenshot \u{1F4F7}"),o=await I.launch(),s=await b(e,o,t);return r.succeed("Captured Chromium screenshot \u{1F4F8}"),s},b=async(e,t,r)=>{let o=await t.newContext();r.options.cookie&&await o.addCookies(S(r.options.cookie,e));let i=t.browserType().name(),n=await o.newPage();await n.goto(e);let a=r.options.saveDiff?`${r.runFolder}/${i}.png`:void 0;return c.debug(`Saving ${i} screenshot to ${a}`),r.options.element?await n.locator(r.options.element).screenshot({path:a}):await n.screenshot({path:a,fullPage:r.options.fullPage})},v=async(e,t,r,o)=>{if(!e||!t)throw new Error("One or more screenshot buffer is null. Make sure all browsers are installed by running `npx playwright install chromium webkit firefox`.");let s=d.sync.read(e),i=d.sync.read(t),n={width:Math.max(s.width,i.width),height:Math.max(s.height,i.height)};(s.width!==i.width||s.height!==i.height)&&(s=$(s,n),i=$(i,n));let a=new d({width:n.width,height:n.height}),f=U(s.data,i.data,a.data,n.width,n.height,{threshold:o.options.threshold}),h="";o.options.saveDiff&&(h=`${o.runFolder}/diff-${r}.png`,o.spinner.text=`Saving ${r} diff \u{1F5C4}\uFE0F`,l.writeFileSync(h,d.sync.write(a)));let g=f/(n.width*n.height)*100;return{pixelChange:f,pixelChangePercentage:g,diffPath:h}},$=(e,{width:t,height:r})=>{if(e.width===t&&e.height===r)return e;c.debug(`Resizing image to ${t}x${r}...`);let o=new Uint8Array(t*r*4);for(let s=0;s<r;s++)for(let i=0;i<t;i++){let n=(s*t+i)*4;if(s<e.height&&i<e.width){let a=(s*e.width+i)*4;o[n]=e.data[a],o[n+1]=e.data[a+1],o[n+2]=e.data[a+2],o[n+3]=e.data[a+3]}else o[n]=0,o[n+1]=0,o[n+2]=0,o[n+3]=0}return{data:Buffer.from(o),width:t,height:r}};function D(e,t){let r=L(),o=`${e.folder}/${r}`;return{runId:r,spinner:t,runFolder:o,options:e}}var L=()=>{let e=new Date,t=e.getFullYear().toString(),r=(e.getMonth()+1).toString().padStart(2,"0"),o=e.getDate().toString().padStart(2,"0"),s=e.getHours().toString().padStart(2,"0"),i=e.getMinutes().toString().padStart(2,"0"),n=e.getSeconds().toString().padStart(2,"0");return`${t}${r}${o}${s}${i}${n}`};var u=V("chromascope");u.command("diff <url>","Diff the URL in chromium, firefox, and webkit. Using chromium as the base.").option("-e, --element <selector>","Diff only the element with the given selector").option("-f, --full-page","Take a full page screenshot").option("-v, --verbose","Show more output").option("-c, --cookie <cookie>","Add one or more cookies to the context. Format: key=value;key2=value2").option("-s, --save-diff","Save generated diff as png").option("-t, --threshold <threshold>","Set the threshold for the diff",{default:.2}).option("-f, --folder <folder>","Set the base folder for chromascope runs",{default:"chromascope-runs"}).action(async(e,t)=>{p.start("Starting \u2699\uFE0F"),(!e||!C(e))&&(p.fail(),console.error("Please provide a valid url"),process.exit(1));let r=D(t,p);c.setOptions({verbose:t.verbose}),c.debug(`Options provided: ${JSON.stringify(t)}`);let o=e.startsWith("http")?e:`https://${e}`;c.debug(`Diffing URL: ${o}`),c.debug(`Run ID: ${r.runId}`);let s=await P(o,r);p.succeed("Diff complete \u{1F389}"),s.forEach(O),process.exit(0)});u.help();u.version(y);(async()=>{try{u.parse(process.argv,{run:!1}),await u.runMatchedCommand()}catch(e){p.fail("Failed"),c.error(e),process.exit(1)}})();
{
"name": "chromascope",
"version": "1.1.2",
"version": "1.1.3",
"author": "Stian Haga",

@@ -39,4 +39,4 @@ "license": "ISC",

"build": "tsup src/index.ts --format cjs,esm --minify",
"lint": "rome check ./src",
"format": "rome format ./src --write",
"lint": "biome check ./src",
"format": "biome format ./src --write",
"test": "vitest run",

@@ -51,2 +51,3 @@ "ci": "pnpm run lint && pnpm run test && pnpm run build",

"devDependencies": {
"@biomejs/biome": "1.2.2",
"@changesets/cli": "^2.26.1",

@@ -56,3 +57,2 @@ "@types/node": "^18.15.11",

"@types/pngjs": "^6.0.1",
"rome": "12.0.0",
"tsup": "^6.7.0",

@@ -59,0 +59,0 @@ "typescript": "^5.0.3",

Sorry, the diff of this file is not supported yet