From 06ab4e36f8b35ff2c884e3c1cc6ee8f6350fdb45 Mon Sep 17 00:00:00 2001 From: Manuel Schiller Date: Sat, 24 Jan 2026 13:04:18 +0100 Subject: [PATCH] chore: stabilize tests --- e2e/react-start/css-modules/tests/css.spec.ts | 43 +++++++++++-------- e2e/solid-start/css-modules/tests/css.spec.ts | 43 +++++++++++-------- e2e/vue-start/css-modules/tests/css.spec.ts | 43 +++++++++++-------- 3 files changed, 72 insertions(+), 57 deletions(-) diff --git a/e2e/react-start/css-modules/tests/css.spec.ts b/e2e/react-start/css-modules/tests/css.spec.ts index 1df98767ab1..a823b5a693f 100644 --- a/e2e/react-start/css-modules/tests/css.spec.ts +++ b/e2e/react-start/css-modules/tests/css.spec.ts @@ -222,28 +222,31 @@ test.describe('CSS styles in SSR (dev mode)', () => { }) => { // Start from home await page.goto(buildUrl(baseURL!, '/')) - await page.waitForTimeout(1000) - // Verify initial styles + // Verify initial styles with retry to handle potential Vite dep optimization reload const globalElement = page.getByTestId('global-styled') - await expect(globalElement).toBeVisible() - let backgroundColor = await globalElement.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(59, 130, 246)') + await expect(async () => { + await expect(globalElement).toBeVisible() + const backgroundColor = await globalElement.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(59, 130, 246)') + }).toPass({ timeout: 10000 }) // Navigate to modules page await page.getByTestId('nav-modules').click() // Use glob pattern to match with or without basepath await page.waitForURL('**/modules') - // Verify CSS modules styles + // Verify CSS modules styles with retry to handle potential Vite dep optimization reload const card = page.getByTestId('module-card') - await expect(card).toBeVisible() - backgroundColor = await card.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(240, 253, 244)') + await expect(async () => { + await expect(card).toBeVisible() + const backgroundColor = await card.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(240, 253, 244)') + }).toPass({ timeout: 10000 }) // Navigate back to home await page.getByTestId('nav-home').click() @@ -251,11 +254,13 @@ test.describe('CSS styles in SSR (dev mode)', () => { // Matches: /, /?, /my-app, /my-app/, /my-app?foo=bar await page.waitForURL(/\/([^/]*)(\/)?($|\?)/) - // Verify global styles still work - await expect(globalElement).toBeVisible() - backgroundColor = await globalElement.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(59, 130, 246)') + // Verify global styles still work with retry + await expect(async () => { + await expect(globalElement).toBeVisible() + const backgroundColor = await globalElement.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(59, 130, 246)') + }).toPass({ timeout: 10000 }) }) }) diff --git a/e2e/solid-start/css-modules/tests/css.spec.ts b/e2e/solid-start/css-modules/tests/css.spec.ts index ba876cc2aee..0a83800fded 100644 --- a/e2e/solid-start/css-modules/tests/css.spec.ts +++ b/e2e/solid-start/css-modules/tests/css.spec.ts @@ -194,28 +194,31 @@ test.describe('CSS styles in SSR (dev mode)', () => { }) => { // Start from home await page.goto(buildUrl(baseURL!, '/')) - await page.waitForTimeout(1000) - // Verify initial styles + // Verify initial styles with retry to handle potential Vite dep optimization reload const globalElement = page.getByTestId('global-styled') - await expect(globalElement).toBeVisible() - let backgroundColor = await globalElement.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(59, 130, 246)') + await expect(async () => { + await expect(globalElement).toBeVisible() + const backgroundColor = await globalElement.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(59, 130, 246)') + }).toPass({ timeout: 10000 }) // Navigate to modules page await page.getByTestId('nav-modules').click() // Use glob pattern to match with or without basepath await page.waitForURL('**/modules') - // Verify CSS modules styles + // Verify CSS modules styles with retry to handle potential Vite dep optimization reload const card = page.getByTestId('module-card') - await expect(card).toBeVisible() - backgroundColor = await card.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(240, 253, 244)') + await expect(async () => { + await expect(card).toBeVisible() + const backgroundColor = await card.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(240, 253, 244)') + }).toPass({ timeout: 10000 }) // Navigate back to home await page.getByTestId('nav-home').click() @@ -223,11 +226,13 @@ test.describe('CSS styles in SSR (dev mode)', () => { // Matches: /, /?, /my-app, /my-app/, /my-app?foo=bar await page.waitForURL(/\/([^/]*)(\/)?($|\?)/) - // Verify global styles still work - await expect(globalElement).toBeVisible() - backgroundColor = await globalElement.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(59, 130, 246)') + // Verify global styles still work with retry + await expect(async () => { + await expect(globalElement).toBeVisible() + const backgroundColor = await globalElement.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(59, 130, 246)') + }).toPass({ timeout: 10000 }) }) }) diff --git a/e2e/vue-start/css-modules/tests/css.spec.ts b/e2e/vue-start/css-modules/tests/css.spec.ts index f15b4196c68..f3d06bcb1c0 100644 --- a/e2e/vue-start/css-modules/tests/css.spec.ts +++ b/e2e/vue-start/css-modules/tests/css.spec.ts @@ -196,28 +196,31 @@ test.describe('CSS styles in SSR (dev mode)', () => { }) => { // Start from home await page.goto(buildUrl(baseURL!, '/')) - await page.waitForTimeout(1000) - // Verify initial styles + // Verify initial styles with retry to handle potential Vite dep optimization reload const globalElement = page.getByTestId('global-styled') - await expect(globalElement).toBeVisible() - let backgroundColor = await globalElement.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(59, 130, 246)') + await expect(async () => { + await expect(globalElement).toBeVisible() + const backgroundColor = await globalElement.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(59, 130, 246)') + }).toPass({ timeout: 10000 }) // Navigate to modules page await page.getByTestId('nav-modules').click() // Use glob pattern to match with or without basepath await page.waitForURL('**/modules') - // Verify CSS modules styles + // Verify CSS modules styles with retry to handle potential Vite dep optimization reload const card = page.getByTestId('module-card') - await expect(card).toBeVisible() - backgroundColor = await card.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(240, 253, 244)') + await expect(async () => { + await expect(card).toBeVisible() + const backgroundColor = await card.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(240, 253, 244)') + }).toPass({ timeout: 10000 }) // Navigate back to home await page.getByTestId('nav-home').click() @@ -225,11 +228,13 @@ test.describe('CSS styles in SSR (dev mode)', () => { // Matches: /, /?, /my-app, /my-app/, /my-app?foo=bar await page.waitForURL(/\/([^/]*)(\/)?($|\?)/) - // Verify global styles still work - await expect(globalElement).toBeVisible() - backgroundColor = await globalElement.evaluate( - (el) => getComputedStyle(el).backgroundColor, - ) - expect(backgroundColor).toBe('rgb(59, 130, 246)') + // Verify global styles still work with retry + await expect(async () => { + await expect(globalElement).toBeVisible() + const backgroundColor = await globalElement.evaluate( + (el) => getComputedStyle(el).backgroundColor, + ) + expect(backgroundColor).toBe('rgb(59, 130, 246)') + }).toPass({ timeout: 10000 }) }) })