✅ Restore amp-story visual diff tests, with fixes for flakiness (#17378)

* Remove flaky test bits and comments from amp-story tests

* Wait for the share pill to be rendered

* Hide the spinner on stories with videos

* Don't wait for share-pill in embedMode=1

* Use pill label selector instead of pill, since pill has 0 width

* Change CTA color to blue, so it doesn't look like a difference in Percy

* Wait for transitions to complete

build-system/tasks/visual-diff.js

@@ -455,6 +455,19 @@ async function snapshotWebpages(percy, page, webpages, config) {
     await verifyCssElements(page, url, webpage.forbidden_css,
         webpage.loading_incomplete_css, webpage.loading_complete_css);
 
+    if (webpage.loading_complete_delay_ms) {
+      if (typeof webpage.loading_complete_delay_ms !== 'number' &&
+          webpage.loading_complete_delay_ms > 0) {
+        log('verbose', 'Waiting',
+            colors.cyan(webpage.loading_complete_delay_ms + 'ms'),
+            'for loading to complete');
+        await sleep(webpage.loading_complete_delay_ms || 0);
+      } else {
+        log('warning', 'Skipping unknown delay',
+            webpage.loading_complete_delay_ms);
+      }
+    }
+
     if (webpage.enable_percy_javascript) {
       snapshotOptions.enableJavaScript = true;
       // Remove all scripts that have an external source, leaving only those

examples/visual-tests/amp-story/amp-story-bookend.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1.hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/amp-story-bookend.rtl.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1.hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/amp-story-consent.html

@@ -20,6 +20,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/amp-story-consent.rtl.html

@@ -20,6 +20,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/amp-story-cta-layer.html

@@ -17,7 +17,7 @@
       }
 
       button {
-        background-color: red;
+        background-color: blue;
         color: white;
         position: absolute;
         top: 50%;

examples/visual-tests/amp-story/basic.html

@@ -19,6 +19,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

examples/visual-tests/amp-story/basic.rtl.html

@@ -19,6 +19,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1.hello-world {
         color: white;
         text-shadow: 3px 3px rgba(0, 0, 0, 0.5);

examples/visual-tests/amp-story/embed-mode-1.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/embed-mode-2.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/info-dialog.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/info-dialog.rtl.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/share-menu.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;

examples/visual-tests/amp-story/share-menu.rtl.html

@@ -18,6 +18,11 @@
         font-family: sans-serif;
       }
 
+      .i-amphtml-story-spinner-container {
+        /* Hide the spinner for loading pages, since this causes flakes */
+        display: none;
+      }
+
       h1#hello-world {
         color: white;
         text-align: center;