[code-infra] Fix flaky dashboard screenshot - take 2 (#43937)

Signed-off-by: Jan Potoms <2109932+Janpot@users.noreply.github.com>

Author: Janpot

.circleci/config.yml

@@ -467,7 +467,7 @@ jobs:
           command: xvfb-run pnpm test:regressions
       - run:
           name: Build packages for fixtures
-          command: xvfb-run pnpm release:build
+          command: pnpm release:build
       - run:
           name: Run visual regression tests using Pigment CSS
           command: xvfb-run pnpm test:regressions-pigment-css

apps/pigment-css-vite-app/src/pages/fixtures/index.test.js

@@ -50,6 +50,13 @@ async function main() {
   routes = routes.map((route) => route.replace(baseUrl, ''));
 
   async function renderFixture(index) {
+    await page.evaluate(() => {
+      // 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. Disable the body overflow
+      // altogether to prevent this
+      window.document.body.style.overflow = 'hidden';
+    });
+
     // Use client-side routing which is much faster than full page navigation via page.goto().
     // Could become an issue with test isolation.
     // If tests are flaky due to global pollution switch to page.goto(route);

test/regressions/index.test.js

@@ -54,9 +54,14 @@ async function main() {
    * @param {string} route
    */
   async function renderFixture(route) {
-    // Use client-side routing which is much faster than full page navigation via page.goto().
     await page.evaluate((_route) => {
+      // Use client-side routing which is much faster than full page navigation via page.goto().
       window.muiFixture.navigate(`${_route}#no-dev`);
+
+      // 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. Disable the body overflow
+      // altogether to prevent this
+      window.document.body.style.overflow = 'hidden';
     }, route);
 
     // Move cursor offscreen to not trigger unwanted hover effects.

test/regressions/template.html

@@ -7,15 +7,6 @@
     <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>