🏗 Visual diff updates and fixes (#35942)

* Update visual diff's Chrome version to 91.0.4472.0

* Remove page-preparation snippets that are now included in Percy's serializer library

* :%s/.percyCss/.percyCSS/

* Remove <noscript> elements from doc/iframes

* Restore <canvas> → <img> freezer

build-system/tasks/visual-diff/index.js

@@ -49,9 +49,9 @@ const percyCss = [
 // 3. Look up the full version at https://en.wikipedia.org/wiki/Google_Chrome_version_history
 // 4. Open https://omahaproxy.appspot.com in a browser
 // 5. Go to "Tools" -> "Version information"
-// 6. Paste the full version in the "Version" field and click "Lookup"
+// 6. Paste the full version (add ".0" at the end) in the "Version" field and click "Lookup"
 // 7. Copy the value next to "Branch Base Position" and update the line below
-const PUPPETEER_CHROMIUM_REVISION = '827102'; // 88.0.4324.0
+const PUPPETEER_CHROMIUM_REVISION = '870763'; // 91.0.4472.0
 
 const SNAPSHOT_SINGLE_BUILD_OPTIONS = {
   widths: [375],
@@ -76,15 +76,14 @@ const REMOVE_AMP_SCRIPTS_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/remove-amp-scripts.js'),
   'utf8'
 );
-const FREEZE_FORM_VALUE_SNIPPET = fs.readFileSync(
-  path.resolve(__dirname, 'snippets/freeze-form-values.js'),
-  'utf8'
-);
 const FREEZE_CANVAS_IMAGE_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/freeze-canvas-image.js'),
   'utf8'
 );
-
+const REMOVE_NO_SCRIPT_ELEMENT_SNIPPET = fs.readFileSync(
+  path.resolve(__dirname, 'snippets/remove-no-script.js'),
+  'utf8'
+);
 // HTML snippet to create an error page snapshot.
 const SNAPSHOT_ERROR_SNIPPET = fs.readFileSync(
   path.resolve(__dirname, 'snippets/snapshot-error.html'),
@@ -641,8 +640,8 @@ async function snapshotWebpages(browser, webpages) {
             // prepare it for snapshotting on Percy. See comments inside the
             // snippet files for description of each.
             await page.evaluate(REMOVE_AMP_SCRIPTS_SNIPPET);
-            await page.evaluate(FREEZE_FORM_VALUE_SNIPPET);
             await page.evaluate(FREEZE_CANVAS_IMAGE_SNIPPET);
+            await page.evaluate(REMOVE_NO_SCRIPT_ELEMENT_SNIPPET);
 
             // Create a default set of snapshot options for Percy and modify
             // them based on the test's configuration.
@@ -661,7 +660,7 @@ async function snapshotWebpages(browser, webpages) {
                   .replace(/__PERCY_CSS__/g, percyCss)
               );
             } else {
-              snapshotOptions.percyCss = percyCss;
+              snapshotOptions.percyCSS = percyCss;
             }
 
             // Finally, send the snapshot to percy.

build-system/tasks/visual-diff/snippets/remove-no-script.js

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview This file is executed via Puppeteer's page.evaluate on a
+ * document to remove all <noscript> tags, from the main document and iframes.
+ * This makes for cleaner diffs and prevents "double-execution" of AMP scripts
+ * when enableJavaScript=false.
+ */
+
+/**
+ * Removes <noscript> elements from doc and its iframes.
+ * @param {Document} doc document to operate on recursively.
+ */
+function removeNoscript(doc) {
+  doc.querySelectorAll('noscript').forEach((node) => node./*OK*/ remove());
+
+  doc.body.querySelectorAll('iframe').forEach((iframe) => {
+    if (iframe.contentDocument) {
+      removeNoscript(iframe.contentDocument);
+    }
+  });
+}
+
+removeNoscript(document);