diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png index 6550e5ccf27..a4b318dc73d 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png index 4a95b5f80e2..7cbe8e9fd95 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png index 32eb773774c..663e7e4d7ff 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png index 6550e5ccf27..a4b318dc73d 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png index 6550e5ccf27..a4b318dc73d 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png index 734e35e8b50..4a50975f641 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png index 5b3286f1491..db01c819bd9 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png index 734e35e8b50..4a50975f641 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png index 734e35e8b50..4a50975f641 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png differ diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts index 5dc3f29fc36..3f9069a3a7c 100644 --- a/e2e/components/SelectPanel.test.ts +++ b/e2e/components/SelectPanel.test.ts @@ -55,7 +55,6 @@ test.describe('SelectPanel', () => { if (scenario.story.visual !== false) { test(`${name} @vrt ${theme}`, async ({page}) => { await visit(page, {id: scenario.story.id, globals}) - await page.emulateMedia({reducedMotion: 'reduce'}) // Open select panel const isPanelOpen = await page.locator('[role="listbox"]').isVisible() @@ -95,7 +94,7 @@ test.describe('SelectPanel', () => { } // windows high contrast mode: light - await page.emulateMedia({forcedColors: 'active', colorScheme: 'light', reducedMotion: 'reduce'}) + await page.emulateMedia({forcedColors: 'active', colorScheme: 'light'}) await page.getByRole('listbox').waitFor({state: 'visible'}) await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(255, 255, 255)') @@ -104,7 +103,7 @@ test.describe('SelectPanel', () => { ) // windows high contrast mode: dark - await page.emulateMedia({forcedColors: 'active', colorScheme: 'dark', reducedMotion: 'reduce'}) + await page.emulateMedia({forcedColors: 'active', colorScheme: 'dark'}) await page.getByRole('listbox').waitFor({state: 'visible'}) await expect(page.locator('body')).toHaveCSS('background-color', 'rgb(0, 0, 0)') diff --git a/e2e/components/TooltipV2.test.ts b/e2e/components/TooltipV2.test.ts index e288d702e1e..0664f0564a4 100644 --- a/e2e/components/TooltipV2.test.ts +++ b/e2e/components/TooltipV2.test.ts @@ -49,7 +49,6 @@ test.describe('TooltipV2', () => { // Default state await page.keyboard.press('Tab') - await page.emulateMedia({reducedMotion: 'reduce'}) await expect(page).toHaveScreenshot(`TooltipV2.${story.title}.${theme}.png`) }) }) diff --git a/e2e/test-helpers/storybook.ts b/e2e/test-helpers/storybook.ts index 4ad1e629816..291b4dd3620 100644 --- a/e2e/test-helpers/storybook.ts +++ b/e2e/test-helpers/storybook.ts @@ -70,6 +70,9 @@ async function visit(page: Page, options: Options) { await page.goto(url.toString()) await page.waitForSelector('body.sb-show-main:not(.sb-show-preparing-story)') await page.waitForSelector('#storybook-root > *', {state: 'attached'}) + await page.evaluate(async () => { + await document.fonts.ready + }) await waitForImages(page) } diff --git a/playwright.config.ts b/playwright.config.ts index 5fc59f7fd22..f75c5afbc24 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -19,6 +19,9 @@ export default defineConfig({ forbidOnly: !!process.env.CI, retries: process.env.CI ? 2 : 0, use: { + contextOptions: { + reducedMotion: 'reduce', + }, screenshot: 'only-on-failure', viewport: { // Large breakpoint