test(small): Fix Playwright route mocking order for WorkoutTableHeader VRT (#9529)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
Co-authored-by: arii <342438+arii@users.noreply.github.com>

Author: arii

tests/playwright/lib/accessibility.ts

@@ -10,14 +10,19 @@ import { v4 as uuidv4 } from 'uuid'
  * @throws An error if any accessibility violations are found.
  */
 export async function checkAccessibility(target: Page | Locator) {
-  const page = 'page' in target ? target.page() : (target as Page)
+  // Safely extract the page object based on the target type
+  const page = 'page' in target ? (target as Locator).page() : (target as Page)
   const uniqueId = `axe-${uuidv4()}`
   let selector: string | undefined = undefined
 
   // If the target is a Locator, we need to add a temporary unique attribute
   // to it so we can scope the accessibility scan to that element.
   if ('page' in target) {
-    await target.evaluate((node, id) => node.setAttribute(id, ''), uniqueId)
+    await (target as Locator).waitFor({ state: 'attached' })
+    await (target as Locator).evaluate(
+      (node, id) => node.setAttribute(id, ''),
+      uniqueId
+    )
     selector = `[${uniqueId}]`
   }
 

tests/playwright/lib/index.ts

@@ -72,6 +72,7 @@ export {
   getDynamicContentMasks,
   getHrMasks,
   getTimerMasks,
+  getSpotifyMasks,
 } from './masks'
 
 // ============================================================================

tests/playwright/lib/masks.ts

@@ -21,6 +21,7 @@ export const VRT_MASK_SELECTORS = {
   timerCountdown: '[data-testid="timer-countdown"]',
   timerPhaseLabel: '[data-testid="timer-phase-label"]',
   hrTimeSeriesChart: '[data-testid="hr-time-series-chart"]',
+  spotifyCurrentTrack: '[data-testid="spotify-current-track-name"]',
 } as const
 
 /**
@@ -67,3 +68,7 @@ export function getTimerMasks(page: Page): Locator[] {
     page.locator(VRT_MASK_SELECTORS.timerPhaseLabel),
   ]
 }
+
+export function getSpotifyMasks(page: Page): Locator[] {
+  return [page.locator(VRT_MASK_SELECTORS.spotifyCurrentTrack)]
+}

tests/playwright/lib/setup.ts

@@ -127,6 +127,13 @@ export async function navigateAndWait(
     })
     .catch(() => console.warn('Test controls not found within timeout'))
 
+  // Trigger user interaction to unlock AudioContext (seen in logs preventing muted states)
+  try {
+    await page.mouse.click(0, 0)
+  } catch (e) {
+    console.warn(`[navigateAndWait] Failed to unlock AudioContext: ${e}`)
+  }
+
   // Stabilize VRT by disabling animations, transitions, and backdrop filters
   await page.addStyleTag({
     content: `
@@ -136,6 +143,13 @@ export async function navigateAndWait(
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
       }
+      body, html, * {
+        scrollbar-width: none !important;
+        -ms-overflow-style: none !important;
+      }
+      ::-webkit-scrollbar {
+        display: none !important;
+      }
       [data-testid="main-content-layout"] {
         opacity: 1 !important;
         transform: none !important;
@@ -162,6 +176,35 @@ export async function resetServerState(
   }
 }
 
+/**
+ * Comprehensive setup for visual regression tests.
+ * Creates a clean browser context, initializes all required pages,
+ * and prepares them for snapshot testing.
+ *
+ * @param browser - The Playwright Browser fixture
+ * @returns An object containing the context and all created pages.
+ */
+export async function mockSpotifyEnvironment(
+  contextOrPage: BrowserContext | Page
+) {
+  // Mock internal Auth API for Spotify VRT to prevent 401s and websocket reset loops
+  await contextOrPage.route('**/api/spotify/access-token', async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        accessToken: 'mock_token',
+        expiresAt: Date.now() + 3600000,
+      }),
+    })
+  })
+
+  // Block the real Spotify SDK from loading and erroring out
+  await contextOrPage.route('https://sdk.scdn.co/spotify-player.js', (route) =>
+    route.abort()
+  )
+}
+
 /**
  * Comprehensive setup for visual regression tests.
  * Creates a clean browser context, initializes all required pages,
@@ -195,6 +238,8 @@ export async function setupVisualRegressionTest(browser: Browser): Promise<{
     })
   })
 
+  await mockSpotifyEnvironment(context)
+
   // Create all pages in parallel for efficiency
   const [dashboardPage, controlPage, mockPage] = await Promise.all([
     context.newPage(),
@@ -250,6 +295,8 @@ export async function setupMinimalVisualRegressionTest(
     })
   })
 
+  await mockSpotifyEnvironment(page)
+
   // Mock the iframe for the root path before navigation
   if (path === '' || path === '/') {
     await mockGoogleDocIframe(page)

tests/playwright/lib/visual.ts

@@ -47,11 +47,15 @@ export async function takeScreenshot(
 ) {
   const { skipA11y = false, ...screenshotOptions } = options
 
+  // Force layout recalculation for tablet viewports without invalid casting
+  await target.evaluate(() => window.scrollTo(0, 0))
+
   if (!skipA11y) {
     await checkAccessibility(target)
   }
 
   await expect(target).toHaveScreenshot(snapshotName, {
+    scale: 'css', // Prevent high-DPI (Retina) scaling mismatches in CI
     ...SCREENSHOT_OPTIONS,
     ...screenshotOptions,
   })
@@ -146,7 +150,7 @@ export async function takeDashboardScreenshot(
       ...getHrMasks(page),
       page.getByTestId('calorie-count'),
       page.getByTestId('google-doc-viewer-iframe'),
-      page.getByTestId('workout-table-viewer'),
+      page.getByTestId('workout-table-header'),
       page.locator('.MUI-Charts-root'),
     ],
     maxDiffPixelRatio: 0.08, // Higher tolerance for font rendering in CI

tests/playwright/vrt-components.spec.ts

@@ -4,14 +4,17 @@ import {
   setupMinimalVisualRegressionTest,
   mockSpotifyPlaybackState,
   mockLoggedInSession,
+  resetServerState,
+  getSpotifyMasks,
 } from './lib'
 import { checkAccessibility } from './lib/accessibility'
 import { takeScreenshot } from './lib/visual'
 import { waitForPageReady } from './lib/waits'
 import { VRT_TIMEOUTS } from './lib/timeouts'
 
 test.describe('Component-Specific VRT', () => {
-  test.beforeEach(async ({ dashboardPage }) => {
+  test.beforeEach(async ({ dashboardPage, request }) => {
+    await resetServerState(request)
     await setupMinimalVisualRegressionTest(dashboardPage, '/')
   })
 
@@ -68,6 +71,15 @@ test.describe('Component-Specific VRT', () => {
   })
 
   test('WorkoutTableHeader rendering', async ({ dashboardPage }) => {
+    // Setup network interception first
+    await dashboardPage.route('/api/workout*', async (route) => {
+      await route.fulfill({
+        json: {
+          headers: ['Exercise', 'Sets', 'Reps'],
+        },
+      })
+    })
+
     // Ensure we are in native mode for this test
     await dashboardPage.goto('/?native=true')
     await waitForPageReady(dashboardPage)
@@ -128,15 +140,23 @@ test.describe('Component-Specific VRT', () => {
     })
     await selectorButton.click()
 
-    const menu = dashboardPage.getByTestId('spotify-device-selector-menu-paper')
+    const menu = dashboardPage
+      .locator('[data-testid="spotify-device-selector-menu-paper"]')
+      .last()
+
+    // Give the menu time to mount in the portal and stabilize before checking visibility
     await expect(menu).toBeVisible()
 
+    // Wait for the opacity transition to finish rendering
+    await expect(menu).toHaveCSS('opacity', '1')
+
     // Perform manual accessibility check on the specific menu element to ensure context validity
     await checkAccessibility(menu)
 
     await takeScreenshot(menu, 'spotify-device-selector-menu.png', {
       threshold: 0.2, // Tighter threshold for the Paper element
       skipA11y: true, // Accessibility checked manually above
+      mask: getSpotifyMasks(dashboardPage),
     })
   })