✅ Ensure that amp-video-docking visual tests lack a scrollbar (#32852)

Fixes #32846
ampproject · Feb 24, 2021 · d6ba94c · d6ba94c
1 parent bf0e1f3
commit d6ba94c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/examples/visual-tests/amp-video-docking/amp-video-docking.js b/examples/visual-tests/amp-video-docking/amp-video-docking.js
@@ -19,11 +19,26 @@ const {
   verifySelectorsVisible,
 } = require('../../../build-system/tasks/visual-diff/helpers');
 
+function toggleScrollable(page, toggle) {
+  return page.evaluate((toggle) => {
+    if (toggle) {
+      document.querySelector('html').style.removeProperty('overflow');
+    } else {
+      document.querySelector('html').style.overflow = 'hidden';
+    }
+  }, toggle);
+}
+
 async function scroll(page, _, target = 'bottom') {
+  await toggleScrollable(page, true);
+
   await page.tap(`#scroll-${target}-button`);
 
   // Scrolling takes 500ms as defined by the runtime, and leeway.
   await page.waitForTimeout(700);
+
+  // Ensures that scrollbar is hidden before capture.
+  await toggleScrollable(page, false);
 }
 
 async function dock(page, name) {

diff --git a/test/visual-diff/visual-tests b/test/visual-diff/visual-tests
@@ -798,21 +798,24 @@
       "name": "amp-video-docking (left-to-right)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
-      "loading_complete_selectors": [".i-amphtml-video-interface"]
+      "loading_complete_selectors": [".i-amphtml-video-interface"],
+      "no_base_test": true
     },
     {
       "url": "examples/visual-tests/amp-video-docking/rtl.html",
       "name": "amp-video-docking (right-to-left)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
-      "loading_complete_selectors": [".i-amphtml-video-interface"]
+      "loading_complete_selectors": [".i-amphtml-video-interface"],
+      "no_base_test": true
     },
     {
       "url": "examples/visual-tests/amp-video-docking/slot.html",
       "name": "amp-video-docking (slot)",
       "viewport": {"width": 800, "height": 600},
       "interactive_tests": "examples/visual-tests/amp-video-docking/amp-video-docking.js",
-      "loading_complete_selectors": [".i-amphtml-video-interface"]
+      "loading_complete_selectors": [".i-amphtml-video-interface"],
+      "no_base_test": true
     },
     {
       "url": "examples/visual-tests/amp-story-player/back-button.html",