chromascope - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

CHANGELOG.md

 # chromascope
 
+## 1.0.3
+
+### Patch Changes
+
+- d502d06: Add clearer instructions for usage
+
 ## 1.0.2
@@ -4,0 +10,0 @@

dist/index.js

 #!/usr/bin/env node
-var y="1.0.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)}},O=new w,c=O;import x from"ora";var B=x({spinner:"orangeBluePulse"}),u=()=>x({spinner:"orangeBluePulse"}),p=B;import{chromium as M,firefox as W,webkit as I}from"@playwright/test";import m from"fs";import j from"pixelmatch";import{PNG as d}from"pngjs";var v=async(e,t)=>{c.setOptions({verbose:t.options.verbose});let o=[N(e,t),K(e,t),U(e,t)],r=await Promise.allSettled(o),[s,i,n]=r,a=s.status==="fulfilled"?s.value:null,f=i.status==="fulfilled"?i.value:null,h=n.status==="fulfilled"?n.value:null,g=await S(a,f,"chromium-webkit",t),R=await S(a,h,"chromium-firefox",t);return t.options.saveDiff||(t.spinner.text="Cleaning up \u{1F9F9}",m.rmdirSync(t.runFolder,{recursive:!0}),m.readdirSync(t.options.folder).length===0&&m.rmdirSync(t.options.folder)),t.spinner.text="",[{...g,browserName:"\u{1F34E} WebKit"},{...R,browserName:"\u{1F98A} Firefox"}]},$=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 o=u().start("Capturing WebKit screenshot \u{1F4F7}"),r=await I.launch(),s=await b(e,r,t);return o.succeed("Captured WebKit screenshot \u{1F4F8}"),s},U=async(e,t)=>{let o=u().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=u().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.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})},S=async(e,t,o,r)=>{if(!e||!t)throw new Error("Screenshot buffer cannot be null");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=C(s,n),i=C(i,n));let a=new d({width:n.width,height:n.height}),f=j(s.data,i.data,a.data,n.width,n.height,{threshold:r.options.threshold}),h="";r.options.saveDiff&&(h=`${r.runFolder}/diff-${o}.png`,r.spinner.text=`Saving ${o} diff \u{1F5C4}\uFE0F`,m.writeFileSync(h,d.sync.write(a)));let g=f/(n.width*n.height)*100;return{pixelChange:f,pixelChangePercentage:g,diffPath:h}},C=(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}};function P(e,t){let o=L(),r=`${e.folder}/${o}`;return{runId:o,spinner:t,runFolder:r,options:e}}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 k=/^(?:(?:https?|ftp):\/\/)?(?:localhost|\S+(?:\.[^\s.]+)+|\[?[0-9a-fA-F:]+\]?)(?::\d+)?(?:\/[\w#!:.?+=&%@!\-\/]*)?(?:\?[\w&=]+)?$/i,D=e=>k.test(e);import V from"cac";var l=V("chromascope");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)=>{p.start("Starting \u2699\uFE0F"),(!e||!D(e))&&(p.fail(),console.error("Please provide a valid url"),process.exit(1));let o=P(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: ${o.runId}`);let r=await v(e,o);p.succeed("Diff complete \u{1F389}"),r.forEach($),process.exit(0)});l.help();l.version(y);(async()=>{try{l.parse(process.argv,{run:!1}),await l.runMatchedCommand()}catch(e){p.fail("Failed"),c.error("Error running command: ",e),process.exit(1)}})();
+var y="1.0.3";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 x from"ora";var B=x({spinner:"orangeBluePulse"}),u=()=>x({spinner:"orangeBluePulse"}),p=B;import{chromium as M,firefox as W,webkit as I}from"@playwright/test";import m from"fs";import j from"pixelmatch";import{PNG as d}from"pngjs";var v=async(e,t)=>{c.setOptions({verbose:t.options.verbose});let o=[N(e,t),K(e,t),U(e,t)],r=await Promise.allSettled(o),[s,i,n]=r,a=s.status==="fulfilled"?s.value:null,f=i.status==="fulfilled"?i.value:null,h=n.status==="fulfilled"?n.value:null,g=await S(a,f,"chromium-webkit",t),R=await S(a,h,"chromium-firefox",t);return t.options.saveDiff||(t.spinner.text="Cleaning up \u{1F9F9}",m.rmdirSync(t.runFolder,{recursive:!0}),m.readdirSync(t.options.folder).length===0&&m.rmdirSync(t.options.folder)),t.spinner.text="",[{...g,browserName:"\u{1F34E} WebKit"},{...R,browserName:"\u{1F98A} Firefox"}]},$=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 o=u().start("Capturing WebKit screenshot \u{1F4F7}"),r=await I.launch(),s=await b(e,r,t);return o.succeed("Captured WebKit screenshot \u{1F4F8}"),s},U=async(e,t)=>{let o=u().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=u().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.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})},S=async(e,t,o,r)=>{if(!e||!t)throw new Error("Screenshot buffer cannot be null");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=C(s,n),i=C(i,n));let a=new d({width:n.width,height:n.height}),f=j(s.data,i.data,a.data,n.width,n.height,{threshold:r.options.threshold}),h="";r.options.saveDiff&&(h=`${r.runFolder}/diff-${o}.png`,r.spinner.text=`Saving ${o} diff \u{1F5C4}\uFE0F`,m.writeFileSync(h,d.sync.write(a)));let g=f/(n.width*n.height)*100;return{pixelChange:f,pixelChangePercentage:g,diffPath:h}},C=(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}};function P(e,t){let o=L(),r=`${e.folder}/${o}`;return{runId:o,spinner:t,runFolder:r,options:e}}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 k=/^(?:(?:https?|ftp):\/\/)?(?:localhost|\S+(?:\.[^\s.]+)+|\[?[0-9a-fA-F:]+\]?)(?::\d+)?(?:\/[\w#!:.?+=&%@!\-\/]*)?(?:\?[\w&=]+)?$/i,D=e=>k.test(e);import V from"cac";var l=V("chromascope");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)=>{p.start("Starting \u2699\uFE0F"),(!e||!D(e))&&(p.fail(),console.error("Please provide a valid url"),process.exit(1));let o=P(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: ${o.runId}`);let r=await v(e,o);p.succeed("Diff complete \u{1F389}"),r.forEach($),process.exit(0)});l.help();l.version(y);(async()=>{try{l.parse(process.argv,{run:!1}),await l.runMatchedCommand()}catch(e){p.fail("Failed"),c.error("Error running command: ",e),process.exit(1)}})();

package.json

 {
   "name": "chromascope",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "author": "Stian Haga",
@@ -5,0 +5,0 @@ "license": "ISC",

README.md

@@ -11,7 +11,24 @@ # Chromascope
 
+Can be installed globally with pnpm|npm|yarn:
+
 ```bash
-$ npx chromascope --help
+pnpm add -g chromascope
+npm i -g chromascope
+yarn global add chromascope
+```
 
+or run it directly with npx:
+
+```bash
+npx chromascope <command> [options]
+```
+
+### Commands
+
+```bash
+$ chromascope --help
+chromascope/x.x.x
+
 Usage:
-  $ index.js <command> [options]
+  $ chromascope <command> [options]
 
@@ -22,3 +39,3 @@ Commands:
 For more info, run any command with the `--help` flag:
-  $ index.js diff --help
+  $ chromascope diff --help
 
@@ -30,11 +47,10 @@ Options:
 
-### Commands
-
 #### Diff
 
 ```bash
-$ npx chromascope diff --help
+$ chromascope diff --help
+chromascope/x.x.x
 
 Usage:
-  $ npx chromascope diff <url>
+  $ chromascope diff <url>
 
@@ -41,0 +57,0 @@ Options:

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

Total package byte prevSize

18058

increased by1.79%

Number of lines in readme file

63

increased by34.04%

No dependency changes