dewf

Author: Janpot

test/regressions/index.test.js

@@ -7,15 +7,7 @@ async function main() {
   const screenshotDir = path.resolve(__dirname, './screenshots/chrome');
 
   const browser = await playwright.chromium.launch({
-    args: [
-      '--font-render-hinting=none',
-      // Playwright hides scrollbars when taking screenshots, this causes the width to slightly change
-      // for a brief moment. Some UI, such as responsive charts measure DOM elements in effects and
-      // update the UI based on the width. This causes a race condition where the screenshot is taken
-      // before the UI is updated. This makes the screenshot flaky. We can just always hide the scrollbar
-      // to prevent this.
-      '--hide-scrollbars',
-    ],
+    args: ['--font-render-hinting=none'],
     // otherwise the loaded google Roboto font isn't applied
     headless: false,
   });

test/regressions/template.html

@@ -7,6 +7,15 @@
     <style>
       body {
         background-color: white;
+        /* 
+        Hide scrollbars but keep scrollable. Playwright hides scrollbar when capturing a screenshot on an element
+        or with fullPage: true. When the body has a scrollbar, this causes a brief layout shift.
+        */
+        -ms-overflow-style: none; /* Internet Explorer 10+ */
+        scrollbar-width: none; /* Firefox */
+      }
+      body::-webkit-scrollbar {
+        display: none; /* Safari and Chrome */
       }
     </style>
   </head>