diff --git a/.circleci/config.yml b/.circleci/config.yml index 5eda3afeb7a589..1307411dff8739 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js b/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js index 374fb877080d44..499abcd74daa49 100644 --- a/apps/pigment-css-vite-app/src/pages/fixtures/index.test.js +++ b/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); diff --git a/test/regressions/index.test.js b/test/regressions/index.test.js index a612b7daca3929..4eb8657c904c32 100644 --- a/test/regressions/index.test.js +++ b/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. diff --git a/test/regressions/template.html b/test/regressions/template.html index 2db3991ae1f3aa..7320fbea9c6c2f 100644 --- a/test/regressions/template.html +++ b/test/regressions/template.html @@ -7,15 +7,6 @@