test(vrt): improve snapshot reliability

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)')
 

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`)
           })
         })

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)
 }

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