kfranqueiro · September 11, 2020 16:16 · Aug 10, 2020 · Oct 2, 2019 · Oct 2, 2019 · Oct 2, 2019
diff --git a/README.md b/README.md
@@ -5,11 +5,11 @@ This gist documents the setup I originally used to run visual diffs on the MDC W
 # Setup
 
 1. Create a directory containing the js and txt files from this gist
-2. `npm i puppeteer blink-diff`
+2. `npm i`
 
 # Process
 
-1. In your code checkout, switch to the branch you want to compare against, e.g. master, and run the dev server
+1. In your code checkout, switch to the branch you want to compare against, e.g. main, and run the dev server
 2. If you've run these scripts before, run `rm -r ss-*` in the directory to clean out files from the previous run
 3. In the folder with these files, run `node puppeteer` which will produce a `ss` subdirectory
 4. `mv ss ss-old`

diff --git a/package.json b/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "screenshots",
+  "devDependencies": {
+    "blink-diff": "1.0.13",
+    "puppeteer": "1.19.0"
+  }
+}
diff --git a/puppeteer.js b/puppeteer.js
@@ -10,7 +10,7 @@ async function run() {
   }
 
   const urlsFile = process.argv[2] || 'urls.txt';
-  // Ignore lines beginning with "# " (don't ignore just # because the catalog is a hash-routed SPA...)
+  // Ignore lines beginning with "# " (don't ignore just # in case of hash-routed apps...)
   const lines = fs.readFileSync(path.join(__dirname, urlsFile), 'utf8').split(/[\r\n]+/).filter((url) => url && url.slice(0, 2) != '# ');
 
   let urlPrefix = 'http://localhost:8080/';

diff --git a/urls.txt b/urls.txt
@@ -1,5 +1,5 @@
 # Notes on this file's format:
-# You can #-prefix lines to have the scripts ignore them.
+# You can prefix lines with "# " (note the space) to have the scripts ignore them.
 # You can optionally include a base URL at the top of this file, which all other lines will be relative to.
 # You can optionally provide a comma-delimited list of widths to test after the filename (default is 800)
 # e.g. "button.html 375,552,728,904,1080,1440"

diff --git a/urls.txt b/urls.txt
@@ -1,12 +1,8 @@
 # Notes on this file's format:
-#
 # You can #-prefix lines to have the scripts ignore them.
-#
 # You can optionally include a base URL at the top of this file, which all other lines will be relative to.
-#
 # You can optionally provide a comma-delimited list of widths to test after the filename (default is 800)
 # e.g. "button.html 375,552,728,904,1080,1440"
-#
 button.html
 card.html
 checkbox.html

diff --git a/README.md b/README.md
@@ -1,28 +1,20 @@
 # Introduction
 
-This gist documents the setup I used to run visual diffs on the MDC Web demo pages for testing https://github.com/material-components/material-components-web/issues/1285.
-Currently it does nothing beyond take screenshots of the pages as they appear initially (i.e. it's probably
-not very useful for e.g. drawer demos).
-It should be feasible to do more on a per-case basis if we want.
-
-This process currently doesn't directly access files from a material-components-web checkout at all,
-so really this should be usable for testing other front-end projects as well (just change urls.txt).
-
-> Note: If navalia gives you issues and is unable to start Chrome, you can try the included `puppeteer.js` as an alternative (run `npm i puppeteer`). However, I've noticed what seems like entire-page vertical offset flakes with puppeteer.
+This gist documents the setup I originally used to run visual diffs on the MDC Web demo pages for testing https://github.com/material-components/material-components-web/issues/1285, but I have used it since then on other projects.
 
 # Setup
 
 1. Create a directory containing the js and txt files from this gist
-2. `npm i navalia blink-diff`
+2. `npm i puppeteer blink-diff`
 
 # Process
 
-1. In your MDC Web checkout, switch to the branch you want to compare against, e.g. master, and run the dev server
+1. In your code checkout, switch to the branch you want to compare against, e.g. master, and run the dev server
 2. If you've run these scripts before, run `rm -r ss-*` in the directory to clean out files from the previous run
-3. In the folder with these files, run `node navalia` which will produce a `ss` subdirectory
+3. In the folder with these files, run `node puppeteer` which will produce a `ss` subdirectory
 4. `mv ss ss-old`
-5. In your MDC Web checkout, switch to the branch with the changes to test. Depending on whether there are significant changes e.g. added files, you may want to shut down the dev server before switching branch and restart it after.
-6. In the folder with these files, run `node navalia` which will again produce a `ss` subdirectory
+5. In your code checkout, switch to the branch with the changes to test. Depending on whether there are significant changes e.g. added files, you may want to shut down the dev server before switching branch and restart it after.
+6. In the folder with these files, run `node puppeteer` which will again produce a `ss` subdirectory
 7. `mv ss ss-new`
 8. Run `node blinkdiff`, which will produce a `ss-diff` subdirectory and output results to stdout
 

diff --git a/navalia.js b/navalia.js
@@ -1,26 +0,0 @@
-const {Chrome} = require('navalia');
-const fs = require('fs');
-const path = require('path');
-
-const URL_PREFIX = 'http://localhost:8080/';
-const SCREENSHOT_DIR = path.join(__dirname, 'ss');
-
-async function run() {
-  const chrome = new Chrome();
-
-  if (!fs.existsSync(SCREENSHOT_DIR)) {
-    fs.mkdirSync(SCREENSHOT_DIR);
-  }
-
-  const urls = fs.readFileSync(path.join(__dirname, 'urls.txt'), 'utf8').split(/[\r\n]+/).filter((url) => url && url[0] != '#');
-  for (const url of urls) {
-    await chrome.goto(URL_PREFIX + url);
-    const data = await chrome.screenshot('body');
-    const buffer = new Buffer(data, 'base64');
-    fs.writeFileSync(path.join(SCREENSHOT_DIR, url.replace(/\//g, '-') + '.png'), buffer, 'base64');
-    console.log('[Done] ' + url);
-  }
-  chrome.done();
-}
-
-run().catch(console.error.bind(console));

diff --git a/puppeteer.js b/puppeteer.js
@@ -11,23 +11,27 @@ async function run() {
 
   const urlsFile = process.argv[2] || 'urls.txt';
   // Ignore lines beginning with "# " (don't ignore just # because the catalog is a hash-routed SPA...)
-  const urls = fs.readFileSync(path.join(__dirname, urlsFile), 'utf8').split(/[\r\n]+/).filter((url) => url && url.slice(0, 2) != '# ');
+  const lines = fs.readFileSync(path.join(__dirname, urlsFile), 'utf8').split(/[\r\n]+/).filter((url) => url && url.slice(0, 2) != '# ');
 
   let urlPrefix = 'http://localhost:8080/';
-  if (urls[0].indexOf('http') === 0) {
-    urlPrefix = urls.shift();
+  if (lines[0].indexOf('http') === 0) {
+    urlPrefix = lines.shift();
   }
 
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
-  for (let i = 0; i < urls.length; i++) {
-    const url = urls[i];
-    await page.goto(urlPrefix + url);
-    await page.screenshot({
-      fullPage: true,
-      path: path.join(SCREENSHOT_DIR, url.replace(/[\/#]/g, '-') + '.png')
-    });
-    console.log('[Done] ' + url);
+  for (let i = 0; i < lines.length; i++) {
+    const [url, width = '800'] = lines[i].split(/\s+/);
+    const widths = width.split(',');
+    for (let j = 0; j < widths.length; j++) {
+      await page.setViewport({width: +widths[j], height: 600});
+      await page.goto(urlPrefix + url);
+      await page.screenshot({
+        fullPage: true,
+        path: path.join(SCREENSHOT_DIR, `${url.replace(/[\/#]/g, '-')}-${widths[j]}.png`)
+      });
+      console.log(`[Done] ${url} @ ${widths[j]}`);
+    }
   }
 
   await browser.close();

diff --git a/urls.txt b/urls.txt
@@ -1,4 +1,12 @@
-# You can #-prefix lines to have the scripts ignore them
+# Notes on this file's format:
+#
+# You can #-prefix lines to have the scripts ignore them.
+#
+# You can optionally include a base URL at the top of this file, which all other lines will be relative to.
+#
+# You can optionally provide a comma-delimited list of widths to test after the filename (default is 800)
+# e.g. "button.html 375,552,728,904,1080,1440"
+#
 button.html
 card.html
 checkbox.html

diff --git a/README.md b/README.md
@@ -8,6 +8,8 @@ It should be feasible to do more on a per-case basis if we want.
 This process currently doesn't directly access files from a material-components-web checkout at all,
 so really this should be usable for testing other front-end projects as well (just change urls.txt).
 
+> Note: If navalia gives you issues and is unable to start Chrome, you can try the included `puppeteer.js` as an alternative (run `npm i puppeteer`). However, I've noticed what seems like entire-page vertical offset flakes with puppeteer.
+
 # Setup
 
 1. Create a directory containing the js and txt files from this gist
@@ -31,5 +33,3 @@ For any files with noted changes, you can look at `ss-diff/<filename>.png` to se
 (left = old, right = new, middle highlights what changed).
 
 You can see an example of what a diff looks like in https://github.com/material-components/material-components-web/issues/1286.
-
-> Note: If navalia gives you issues and is unable to start Chrome, you can try the included `puppeteer.js` as an alternative (run `npm i puppeteer`). However, I've noticed what seems like entire-page vertical offset flakes with puppeteer.
diff --git a/README.md b/README.md
@@ -32,4 +32,4 @@ For any files with noted changes, you can look at `ss-diff/<filename>.png` to se
 
 You can see an example of what a diff looks like in https://github.com/material-components/material-components-web/issues/1286.
 
-> Note: If navalia gives you issues and is unable to start Chrome, you can try the included `puppeteer.js` as an alternative. However, I've noticed what seems like entire-page vertical offset flakes with puppeteer.
+> Note: If navalia gives you issues and is unable to start Chrome, you can try the included `puppeteer.js` as an alternative (run `npm i puppeteer`). However, I've noticed what seems like entire-page vertical offset flakes with puppeteer.
diff --git a/README.md b/README.md
@@ -30,4 +30,6 @@ they're over or under threshold) first, followed by a list of the files that had
 For any files with noted changes, you can look at `ss-diff/<filename>.png` to see a visual diff
 (left = old, right = new, middle highlights what changed).
 
-You can see an example of what a diff looks like in https://github.com/material-components/material-components-web/issues/1286.
+You can see an example of what a diff looks like in https://github.com/material-components/material-components-web/issues/1286.
+
+> Note: If navalia gives you issues and is unable to start Chrome, you can try the included `puppeteer.js` as an alternative. However, I've noticed what seems like entire-page vertical offset flakes with puppeteer.
diff --git a/puppeteer.js b/puppeteer.js
@@ -0,0 +1,36 @@
+const puppeteer = require('puppeteer');
+const fs = require('fs');
+const path = require('path');
+
+const SCREENSHOT_DIR = path.join(__dirname, 'ss');
+
+async function run() {
+  if (!fs.existsSync(SCREENSHOT_DIR)) {
+    fs.mkdirSync(SCREENSHOT_DIR);
+  }
+
+  const urlsFile = process.argv[2] || 'urls.txt';
+  // Ignore lines beginning with "# " (don't ignore just # because the catalog is a hash-routed SPA...)
+  const urls = fs.readFileSync(path.join(__dirname, urlsFile), 'utf8').split(/[\r\n]+/).filter((url) => url && url.slice(0, 2) != '# ');
+
+  let urlPrefix = 'http://localhost:8080/';
+  if (urls[0].indexOf('http') === 0) {
+    urlPrefix = urls.shift();
+  }
+
+  const browser = await puppeteer.launch();
+  const page = await browser.newPage();
+  for (let i = 0; i < urls.length; i++) {
+    const url = urls[i];
+    await page.goto(urlPrefix + url);
+    await page.screenshot({
+      fullPage: true,
+      path: path.join(SCREENSHOT_DIR, url.replace(/[\/#]/g, '-') + '.png')
+    });
+    console.log('[Done] ' + url);
+  }
+
+  await browser.close();
+}
+
+run().catch(console.error.bind(console));
diff --git a/blinkdiff.js b/blinkdiff.js
@@ -1,20 +1,19 @@
 const BlinkDiff = require('blink-diff');
 const fs = require('fs');
 const path = require('path');
-const urls = fs.readFileSync(path.join(__dirname, 'urls.txt'), 'utf8').split(/[\r\n]+/).filter((url) => url && url[0] != '#');
+const images = fs.readdirSync(path.join(__dirname, 'ss-old'));
 const passedWithNoDiffs = [];
 
 const SCREENSHOT_DIFF_DIR = path.join(__dirname, 'ss-diff');
 
-console.log(`Comparing ${urls.length} pairs of images...`);
+console.log(`Comparing ${images.length} pairs of images...`);
 
 if (!fs.existsSync(SCREENSHOT_DIFF_DIR)) {
   fs.mkdirSync(SCREENSHOT_DIFF_DIR);
 }
 
 let ran = 0;
-for (const url of urls) {
-  const pngName = url.replace(/\//g, '-') + '.png';
+for (const pngName of images) {
   var diff = new BlinkDiff({
     imageAPath: path.join(__dirname, 'ss-old', pngName),
     imageBPath: path.join(__dirname, 'ss-new', pngName),
@@ -36,7 +35,7 @@ for (const url of urls) {
       }
     }
 
-    if (++ran === urls.length) {
+    if (++ran === images.length) {
       console.log('--- The following passed with 0 differences ---');
       passedWithNoDiffs.forEach((entry) => console.log(entry));
     }

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ Currently it does nothing beyond take screenshots of the pages as they appear in
 not very useful for e.g. drawer demos).
 It should be feasible to do more on a per-case basis if we want.
 
-This process currently doesn't depend on presence of a material-components-web checkout at all,
+This process currently doesn't directly access files from a material-components-web checkout at all,
 so really this should be usable for testing other front-end projects as well (just change urls.txt).
 
 # Setup

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Introduction
 
-This gist documents the setup I used to run visual diffs on the MDC Web demo pages for testing material-components/material-components-web#1285.
+This gist documents the setup I used to run visual diffs on the MDC Web demo pages for testing https://github.com/material-components/material-components-web/issues/1285.
 Currently it does nothing beyond take screenshots of the pages as they appear initially (i.e. it's probably
 not very useful for e.g. drawer demos).
 It should be feasible to do more on a per-case basis if we want.
@@ -30,4 +30,4 @@ they're over or under threshold) first, followed by a list of the files that had
 For any files with noted changes, you can look at `ss-diff/<filename>.png` to see a visual diff
 (left = old, right = new, middle highlights what changed).
 
-You can see an example of what a diff looks like in material-components/material-components-web/#1286.
+You can see an example of what a diff looks like in https://github.com/material-components/material-components-web/issues/1286.
diff --git a/README.md b/README.md
@@ -0,0 +1,33 @@
+# Introduction
+
+This gist documents the setup I used to run visual diffs on the MDC Web demo pages for testing material-components/material-components-web#1285.
+Currently it does nothing beyond take screenshots of the pages as they appear initially (i.e. it's probably
+not very useful for e.g. drawer demos).
+It should be feasible to do more on a per-case basis if we want.
+
+This process currently doesn't depend on presence of a material-components-web checkout at all,
+so really this should be usable for testing other front-end projects as well (just change urls.txt).
+
+# Setup
+
+1. Create a directory containing the js and txt files from this gist
+2. `npm i navalia blink-diff`
+
+# Process
+
+1. In your MDC Web checkout, switch to the branch you want to compare against, e.g. master, and run the dev server
+2. If you've run these scripts before, run `rm -r ss-*` in the directory to clean out files from the previous run
+3. In the folder with these files, run `node navalia` which will produce a `ss` subdirectory
+4. `mv ss ss-old`
+5. In your MDC Web checkout, switch to the branch with the changes to test. Depending on whether there are significant changes e.g. added files, you may want to shut down the dev server before switching branch and restart it after.
+6. In the folder with these files, run `node navalia` which will again produce a `ss` subdirectory
+7. `mv ss ss-new`
+8. Run `node blinkdiff`, which will produce a `ss-diff` subdirectory and output results to stdout
+
+The `blinkdiff.js` script will output any notable results (any pages with any changes, regardless of whether
+they're over or under threshold) first, followed by a list of the files that had no observed changes.
+
+For any files with noted changes, you can look at `ss-diff/<filename>.png` to see a visual diff
+(left = old, right = new, middle highlights what changed).
+
+You can see an example of what a diff looks like in material-components/material-components-web/#1286.
diff --git a/blinkdiff.js b/blinkdiff.js
@@ -0,0 +1,44 @@
+const BlinkDiff = require('blink-diff');
+const fs = require('fs');
+const path = require('path');
+const urls = fs.readFileSync(path.join(__dirname, 'urls.txt'), 'utf8').split(/[\r\n]+/).filter((url) => url && url[0] != '#');
+const passedWithNoDiffs = [];
+
+const SCREENSHOT_DIFF_DIR = path.join(__dirname, 'ss-diff');
+
+console.log(`Comparing ${urls.length} pairs of images...`);
+
+if (!fs.existsSync(SCREENSHOT_DIFF_DIR)) {
+  fs.mkdirSync(SCREENSHOT_DIFF_DIR);
+}
+
+let ran = 0;
+for (const url of urls) {
+  const pngName = url.replace(/\//g, '-') + '.png';
+  var diff = new BlinkDiff({
+    imageAPath: path.join(__dirname, 'ss-old', pngName),
+    imageBPath: path.join(__dirname, 'ss-new', pngName),
+
+    thresholdType: BlinkDiff.THRESHOLD_PERCENT,
+    threshold: 0.01, // 1% threshold
+
+    imageOutputPath: path.join(SCREENSHOT_DIFF_DIR, pngName)
+  });
+
+  diff.run(function (error, result) {
+    if (error) {
+      console.error('ERR', pngName, error);
+    } else {
+      if (diff.hasPassed(result.code) && !result.differences) {
+        passedWithNoDiffs.push(pngName);
+      } else {
+        console.log(pngName, diff.hasPassed(result.code) ? 'Passed' : 'Failed', `(${result.differences} differences)`);
+      }
+    }
+
+    if (++ran === urls.length) {
+      console.log('--- The following passed with 0 differences ---');
+      passedWithNoDiffs.forEach((entry) => console.log(entry));
+    }
+  });
+}
diff --git a/navalia.js b/navalia.js
@@ -0,0 +1,26 @@
+const {Chrome} = require('navalia');
+const fs = require('fs');
+const path = require('path');
+
+const URL_PREFIX = 'http://localhost:8080/';
+const SCREENSHOT_DIR = path.join(__dirname, 'ss');
+
+async function run() {
+  const chrome = new Chrome();
+
+  if (!fs.existsSync(SCREENSHOT_DIR)) {
+    fs.mkdirSync(SCREENSHOT_DIR);
+  }
+
+  const urls = fs.readFileSync(path.join(__dirname, 'urls.txt'), 'utf8').split(/[\r\n]+/).filter((url) => url && url[0] != '#');
+  for (const url of urls) {
+    await chrome.goto(URL_PREFIX + url);
+    const data = await chrome.screenshot('body');
+    const buffer = new Buffer(data, 'base64');
+    fs.writeFileSync(path.join(SCREENSHOT_DIR, url.replace(/\//g, '-') + '.png'), buffer, 'base64');
+    console.log('[Done] ' + url);
+  }
+  chrome.done();
+}
+
+run().catch(console.error.bind(console));
diff --git a/urls.txt b/urls.txt
@@ -0,0 +1,29 @@
+# You can #-prefix lines to have the scripts ignore them
+button.html
+card.html
+checkbox.html
+dialog.html
+drawer/permanent-drawer-above-toolbar.html
+drawer/permanent-drawer-below-toolbar.html
+drawer/persistent-drawer.html
+drawer/temporary-drawer.html
+elevation.html
+fab.html
+grid-list.html
+icon-toggle.html
+index.html
+layout-grid.html
+linear-progress.html
+list.html
+radio.html
+ripple.html
+select.html
+simple-menu.html
+slider.html
+snackbar.html
+switch.html
+tabs.html
+textfield.html
+theme.html
+typography.html
+toolbar/index.html
No results found