chromascope
Advanced tools
Comparing version 1.0.0 to 1.0.1
# chromascope | ||
## 1.0.1 | ||
### Patch Changes | ||
- 6b7c1e9: Fix outdated docs and more specific wording | ||
## 1.0.0 | ||
@@ -4,0 +10,0 @@ |
#!/usr/bin/env node | ||
import z from"cac";var F=/^(?:(?:https?|ftp):\/\/)?(?:localhost|\S+(?:\.[^\s.]+)+|\[?[0-9a-fA-F:]+\]?)(?::\d+)?(?:\/[\w#!:.?+=&%@!\-\/]*)?(?:\?[\w&=]+)?$/i,x=e=>F.test(e);import m from"fs";import{webkit as B,firefox as W,chromium as M}from"@playwright/test";import{PNG as u}from"pngjs";import I from"pixelmatch";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)}},O=new w,c=O;import y from"ora";var R=y({spinner:"orangeBluePulse"}),d=()=>y({spinner:"orangeBluePulse"}),f=R;var v=async(e,t)=>{c.setOptions({verbose:t.options.verbose});let o=[N(e,t),k(e,t),j(e,t)],r=await Promise.allSettled(o),[s,i,n]=r,a=s.status==="fulfilled"?s.value:null,p=i.status==="fulfilled"?i.value:null,h=n.status==="fulfilled"?n.value:null,g=await C(a,p,"chromium-webkit",t),D=await C(a,h,"chromium-firefox",t);return t.options.saveDiff||(t.spinner.text="Cleaning up \u{1F9F9}",m.rmdirSync(t.options.runFolder,{recursive:!0}),m.readdirSync(t.options.folder).length===0&&m.rmdirSync(t.options.folder)),t.spinner.text="",[{...g,browserName:"\u{1F34E} WebKit"},{...D,browserName:"\u{1F98A} Firefox"}]},k=async(e,t)=>{let o=d().start("Capturing WebKit screenshot \u{1F4F7}"),r=await B.launch(),s=await b(e,r,t);return o.succeed("Captured WebKit screenshot \u{1F4F8}"),s},j=async(e,t)=>{let o=d().start("Capturing Firefox screenshot \u{1F4F7}"),r=await W.launch(),s=await b(e,r,t);return o.succeed("Captured Firefox screenshot \u{1F4F8}"),s},N=async(e,t)=>{let o=d().start("Capturing Chromium screenshot \u{1F4F7}"),r=await M.launch(),s=await b(e,r,t);return o.succeed("Captured Chromium screenshot \u{1F4F8}"),s},b=async(e,t,o)=>{let r=await t.newContext(),i=t.browserType().name(),n=await r.newPage();await n.goto(e);let a=o.options.saveDiff?`${o.options.runFolder}/${i}.png`:void 0;return c.debug(`Saving ${i} screenshot to ${a}`),o.options.element?await n.locator(o.options.element).screenshot({path:a}):await n.screenshot({path:a,fullPage:o.options.fullPage})},C=async(e,t,o,r)=>{if(!e||!t)throw new Error("Screenshot buffer cannot be null");let s=u.sync.read(e),i=u.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(s,n),i=S(i,n));let a=new u({width:n.width,height:n.height}),p=I(s.data,i.data,a.data,n.width,n.height,{threshold:r.options.threshold}),h="";r.options.saveDiff&&(h=`${r.options.runFolder}/diff-${o}.png`,r.spinner.text=`Saving ${o} diff \u{1F5C4}\uFE0F`,m.writeFileSync(h,u.sync.write(a)));let g=p/(n.width*n.height)*100;return{pixelChange:p,pixelChangePercentage:g,diffPath:h}},S=(e,{width:t,height:o})=>{if(e.width===t&&e.height===o)return e;c.debug(`Resizing image to ${t}x${o}...`);let r=new Uint8Array(t*o*4);for(let s=0;s<o;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;r[n]=e.data[a],r[n+1]=e.data[a+1],r[n+2]=e.data[a+2],r[n+3]=e.data[a+3]}else r[n]=0,r[n+1]=0,r[n+2]=0,r[n+3]=0}return{data:Buffer.from(r),width:t,height:o}};var $="1.0.0";function P(e,t){let o=L();return{runId:o,spinner:t,options:{...e,runFolder:`${e.folder}/${o}`}}}var L=()=>{let e=new Date,t=e.getFullYear().toString(),o=(e.getMonth()+1).toString().padStart(2,"0"),r=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}${o}${r}${s}${i}${n}`};var l=z();l.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("-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)=>{f.start("Starting \u2699\uFE0F"),(!e||!x(e))&&(f.fail(),console.error("Please provide a valid url"),process.exit(1));let o=P(t,f);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: ${o.runId}`);let r=await v(e,o);f.succeed("Diff complete \u{1F389}"),r.forEach(A),process.exit(0)});var A=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}`)};l.help();l.version($);(async()=>{try{l.parse(process.argv,{run:!1}),await l.runMatchedCommand()}catch(e){f.fail("Failed"),c.error("Error running command: ",e),process.exit(1)}})(); | ||
import k from"cac";var F=/^(?:(?:https?|ftp):\/\/)?(?:localhost|\S+(?:\.[^\s.]+)+|\[?[0-9a-fA-F:]+\]?)(?::\d+)?(?:\/[\w#!:.?+=&%@!\-\/]*)?(?:\?[\w&=]+)?$/i,x=e=>F.test(e);import m from"fs";import{webkit as B,firefox as W,chromium as M}from"@playwright/test";import{PNG as u}from"pngjs";import I from"pixelmatch";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)}},O=new w,c=O;import y from"ora";var R=y({spinner:"orangeBluePulse"}),d=()=>y({spinner:"orangeBluePulse"}),f=R;var v=async(e,t)=>{c.setOptions({verbose:t.options.verbose});let o=[N(e,t),j(e,t),K(e,t)],r=await Promise.allSettled(o),[s,i,n]=r,a=s.status==="fulfilled"?s.value:null,p=i.status==="fulfilled"?i.value:null,h=n.status==="fulfilled"?n.value:null,g=await C(a,p,"chromium-webkit",t),D=await C(a,h,"chromium-firefox",t);return t.options.saveDiff||(t.spinner.text="Cleaning up \u{1F9F9}",m.rmdirSync(t.options.runFolder,{recursive:!0}),m.readdirSync(t.options.folder).length===0&&m.rmdirSync(t.options.folder)),t.spinner.text="",[{...g,browserName:"\u{1F34E} WebKit"},{...D,browserName:"\u{1F98A} Firefox"}]},j=async(e,t)=>{let o=d().start("Capturing WebKit screenshot \u{1F4F7}"),r=await B.launch(),s=await b(e,r,t);return o.succeed("Captured WebKit screenshot \u{1F4F8}"),s},K=async(e,t)=>{let o=d().start("Capturing Firefox screenshot \u{1F4F7}"),r=await W.launch(),s=await b(e,r,t);return o.succeed("Captured Firefox screenshot \u{1F4F8}"),s},N=async(e,t)=>{let o=d().start("Capturing Chromium screenshot \u{1F4F7}"),r=await M.launch(),s=await b(e,r,t);return o.succeed("Captured Chromium screenshot \u{1F4F8}"),s},b=async(e,t,o)=>{let r=await t.newContext(),i=t.browserType().name(),n=await r.newPage();await n.goto(e);let a=o.options.saveDiff?`${o.options.runFolder}/${i}.png`:void 0;return c.debug(`Saving ${i} screenshot to ${a}`),o.options.element?await n.locator(o.options.element).screenshot({path:a}):await n.screenshot({path:a,fullPage:o.options.fullPage})},C=async(e,t,o,r)=>{if(!e||!t)throw new Error("Screenshot buffer cannot be null");let s=u.sync.read(e),i=u.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(s,n),i=S(i,n));let a=new u({width:n.width,height:n.height}),p=I(s.data,i.data,a.data,n.width,n.height,{threshold:r.options.threshold}),h="";r.options.saveDiff&&(h=`${r.options.runFolder}/diff-${o}.png`,r.spinner.text=`Saving ${o} diff \u{1F5C4}\uFE0F`,m.writeFileSync(h,u.sync.write(a)));let g=p/(n.width*n.height)*100;return{pixelChange:p,pixelChangePercentage:g,diffPath:h}},S=(e,{width:t,height:o})=>{if(e.width===t&&e.height===o)return e;c.debug(`Resizing image to ${t}x${o}...`);let r=new Uint8Array(t*o*4);for(let s=0;s<o;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;r[n]=e.data[a],r[n+1]=e.data[a+1],r[n+2]=e.data[a+2],r[n+3]=e.data[a+3]}else r[n]=0,r[n+1]=0,r[n+2]=0,r[n+3]=0}return{data:Buffer.from(r),width:t,height:o}};var $="1.0.1";function P(e,t){let o=L();return{runId:o,spinner:t,options:{...e,runFolder:`${e.folder}/${o}`}}}var L=()=>{let e=new Date,t=e.getFullYear().toString(),o=(e.getMonth()+1).toString().padStart(2,"0"),r=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}${o}${r}${s}${i}${n}`};var l=k();l.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("-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)=>{f.start("Starting \u2699\uFE0F"),(!e||!x(e))&&(f.fail(),console.error("Please provide a valid url"),process.exit(1));let o=P(t,f);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: ${o.runId}`);let r=await v(e,o);f.succeed("Diff complete \u{1F389}"),r.forEach(z),process.exit(0)});var z=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}`)};l.help();l.version($);(async()=>{try{l.parse(process.argv,{run:!1}),await l.runMatchedCommand()}catch(e){f.fail("Failed"),c.error("Error running command: ",e),process.exit(1)}})(); |
{ | ||
"name": "chromascope", | ||
"version": "1.0.0", | ||
"version": "1.0.1", | ||
"description": "Diff the same page in different browsers", | ||
@@ -5,0 +5,0 @@ "main": "./dist/index.js", |
@@ -43,5 +43,5 @@ # Chromascope | ||
-s, --save-diff Save generated diff as png | ||
-t, --threshold <threshold> Set the threshold for the diff (default: 0.1) | ||
-t, --threshold <threshold> Set the threshold for the diff (default: 0.2) | ||
-f, --folder <folder> Set the base folder for chromascope runs (default: chromascope-runs) | ||
-h, --help Display this message | ||
``` |
Sorry, the diff of this file is not supported yet
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
17207
0