Fix Playwright VR test failures (#5135)

* Fix VR tests

* Add tapes to prevent provider image requests

frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

@@ -116,15 +116,15 @@ const clearFilters = () => {
           @click="close"
         />
       </template>
-      <VTabPanel id="content-settings">
+      <VTabPanel id="content-settings" class="border-overlay">
         <VSearchTypes
           size="medium"
           :use-links="useLinks"
           @select="$emit('select', $event)"
         />
       </VTabPanel>
       <!-- Horizontal padding removed to display divider. -->
-      <VTabPanel v-if="showFilters" id="filters" class="px-0">
+      <VTabPanel v-if="showFilters" id="filters" class="border-overlay px-0">
         <VSearchGridFilter
           class="px-6"
           :show-filter-header="false"

frontend/src/components/VHeader/VHeaderMobile/VShowResultsButton.vue

@@ -68,7 +68,10 @@ const width = computed(() => diameter * 3 + spacing * 2)
 
     <!-- To preserve the button width when state changes, this element is not
     removed from the DOM, only hidden and muted. -->
-    <span :class="{ 'opacity-0': isFetching }" :aria-hidden="isFetching">
+    <span
+      :class="{ 'opacity-0': isFetching }"
+      :aria-hidden="isFetching || undefined"
+    >
       {{ $t("header.seeResults") }}
     </span>
   </VButton>

frontend/src/components/VThemeSelect/VThemeSelect.vue

@@ -45,7 +45,11 @@ const darkMode = useDarkMode()
  * The icon always reflects the actual theme applied to the site.
  * Therefore, it must be based on the value of `effectiveColorMode`.
  */
-const currentThemeIcon: Ref<"sun" | "moon" | undefined> = ref(undefined)
+const currentThemeIcon: Ref<"sun" | "moon" | undefined> = ref(
+  darkMode.effectiveColorMode.value
+    ? THEME_ICON_NAME[darkMode.effectiveColorMode.value]
+    : undefined
+)
 
 /**
  * The choices are computed because the text for the color mode choice

frontend/src/styles/tailwind.css

@@ -232,6 +232,7 @@
       --color-border-secondary-hover: var(--color-gray-1);
       --color-border-tertiary: var(--color-gray-1);
       --color-border-transparent-hover: var(--color-gray-11);
+      --color-border-overlay: var(--color-gray-10);
       --color-border-focus: var(--color-yellow-4);
       --color-border-bg-ring: var(--color-gray-13);
       --color-border-disabled: var(--color-gray-8);

frontend/test/playwright/utils/components.ts

@@ -46,3 +46,9 @@ export const getHeaderSearchbar = (
   page: Page,
   dir: LanguageDirection = "ltr"
 ) => page.getByRole("combobox", { name: t("search.searchBarLabel", dir) })
+
+const themeSelectLabel = (dir: LanguageDirection) => t("theme.theme", dir)
+// In Storybook, the footer story has two theme switchers (one in the footer, and one
+// is from the story decorator), so we need to select a single one.
+export const getThemeSwitcher = (page: Page, dir: LanguageDirection) =>
+  page.getByLabel(themeSelectLabel(dir)).first()

frontend/test/playwright/utils/expect-snapshot.ts

@@ -4,6 +4,8 @@ import { type LanguageDirection, t } from "~~/test/playwright/utils/i18n"
 
 import { sleep } from "~~/test/playwright/utils/navigation"
 
+import { getThemeSwitcher } from "~~/test/playwright/utils/components"
+
 import type { Breakpoint } from "~/constants/screens"
 
 import type {
@@ -35,17 +37,11 @@ export type ExpectScreenshotAreaSnapshot = (
 ) => Promise<void>
 
 type EffectiveColorMode = "dark" | "light"
-const themeSelectLabel = (dir: LanguageDirection) => t("theme.theme", dir)
 const themeOption = (colorMode: EffectiveColorMode, dir: LanguageDirection) =>
   t(`theme.choices.${colorMode}`, dir)
 
 export const turnOnDarkMode = async (page: Page, dir: LanguageDirection) => {
-  // In Storybook, the footer story has two theme switchers (one in the footer, and one
-  // is from the story decorator), so we need to select a single one.
-  await page
-    .getByLabel(themeSelectLabel(dir))
-    .nth(0)
-    .selectOption(themeOption("dark", dir))
+  await getThemeSwitcher(page, dir).selectOption(themeOption("dark", dir))
 }
 
 type SnapshotNameOptions = {
@@ -96,7 +92,7 @@ export const expectSnapshot: ExpectSnapshot = async (
   await turnOnDarkMode(page, dir ?? "ltr")
 
   // Wait for the theme to change.
-  await sleep(200)
+  await sleep(100)
 
   expect(await screenshotAble.screenshot(screenshotOptions)).toMatchSnapshot(
     getSnapshotName(name, "dark"),

frontend/test/playwright/visual-regression/components/filters.spec.ts

@@ -34,47 +34,46 @@ const checkModalRendered = async (
     name: t("header.seeResults", dir),
   })
   await expect(seeResultsButton).toBeEnabled()
+  await expect(page.getByText(t("header.loading", dir))).toBeHidden()
 }
 
+const snapshotOptions = { maxDiffPixels: 2, maxDiffPixelRatio: undefined }
+
 for (const dir of languageDirections) {
   breakpoints.describeEachBreakpoint(["xs", "sm", "md", "lg"])(
     ({ breakpoint, expectSnapshot }) => {
       const isDesktop = breakpoint === "lg"
+      const filterLocator = isDesktop ? "complementary" : "dialog"
       test.beforeEach(async ({ page }) => {
         await preparePageForTests(page, breakpoint)
-        await goToSearchTerm(page, "birds", { dir })
-        await filters.open(page, dir)
       })
       test(`filters none selected - ${dir}`, async ({ page }) => {
+        await goToSearchTerm(page, "birds", { dir })
+        await filters.open(page, dir)
         await checkModalRendered(page, isDesktop, dir)
 
         await expectSnapshot(
           page,
           getFiltersName(breakpoint),
-          isDesktop ? page.locator(".sidebar") : page,
-          {
-            dir,
-            snapshotOptions: { maxDiffPixels: 2, maxDiffPixelRatio: undefined },
-          }
+          page.getByRole(filterLocator),
+          { dir, snapshotOptions }
         )
       })
 
       test(`filters 1 filter selected - ${dir}`, async ({ page }) => {
-        const firstFilter = page.getByRole("checkbox").first()
-        await firstFilter.check()
-        await checkModalRendered(page, isDesktop, dir)
+        await goToSearchTerm(page, "birds", {
+          dir,
+          query: "license_type=commercial",
+        })
+        await filters.open(page, dir)
 
-        const snapshotName = `${getFiltersName(breakpoint)}-checked`
+        await checkModalRendered(page, isDesktop, dir)
 
-        await firstFilter.hover()
         await expectSnapshot(
           page,
-          snapshotName,
-          isDesktop ? page.locator(".sidebar") : page,
-          {
-            dir,
-            snapshotOptions: { maxDiffPixels: 2, maxDiffPixelRatio: undefined },
-          }
+          `${getFiltersName(breakpoint)}-checked`,
+          page.getByRole(filterLocator),
+          { dir, snapshotOptions }
         )
       })
     }