Prevent hovering in the external-sources VR test (#2666)

* Prevent hovering in the external-sources VR test

* Update snapshots

* Remove flakiness from filters tests

* Remove flakiness from filters tests

* Remove flakiness from filters tests

frontend/test/playwright/e2e/filters.spec.ts

@@ -5,6 +5,7 @@ import {
   goToSearchTerm,
   isPageDesktop,
   filters,
+  dismissAllBannersUsingCookies,
 } from "~~/test/playwright/utils/navigation"
 
 import { mockProviderApis } from "~~/test/playwright/utils/route"
@@ -43,8 +44,9 @@ const FILTER_COUNTS = {
 }
 
 breakpoints.describeMobileAndDesktop(() => {
-  test.beforeEach(async ({ context }) => {
+  test.beforeEach(async ({ context, page }) => {
     await mockProviderApis(context)
+    await dismissAllBannersUsingCookies(page)
   })
   for (const searchType of supportedSearchTypes) {
     test(`correct total number of filters is displayed for ${searchType}`, async ({
@@ -156,6 +158,7 @@ breakpoints.describeMobileAndDesktop(() => {
 
     // Enable the commercial use filter
     await page.locator('label:has-text("Use commercially")').click()
+    await page.waitForURL(/license_type=commercial/)
 
     await expect(
       page.getByRole("checkbox", { name: "Use commercially" })

frontend/test/playwright/visual-regression/components/external-sources-section.spec.ts

@@ -27,8 +27,10 @@ for (const dir of languageDirections) {
         await page
           .getByRole("contentinfo")
           .getByRole("link", { name: "Openverse" })
-          .hover()
+          .scrollIntoViewIfNeeded()
+
         await externalSourcesButton.click()
+        await page.mouse.move(0, 0)
 
         await expectSnapshot(
           `external-${searchType}-sources-popover-${dir}`,

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

@@ -1,53 +1,50 @@
-import { expect, Page, test } from "@playwright/test"
+import { test } from "@playwright/test"
 
 import {
-  goToSearchTerm,
+  dismissAllBannersUsingCookies,
+  filters,
   languageDirections,
+  pathWithDir,
+  setBreakpointCookie,
 } from "~~/test/playwright/utils/navigation"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
+import type { Breakpoint } from "~/constants/screens"
+
 test.describe.configure({ mode: "parallel" })
 
-const openFiltersTab = async (page: Page) => {
-  await page.locator("#content-settings-button").click()
-  await page.getByRole("tab").last().click()
-}
+const getFiltersName = (breakpoint: Breakpoint) =>
+  breakpoint === "lg" ? "filters-sidebar" : "filters-modal"
 
 for (const dir of languageDirections) {
-  breakpoints.describeEachDesktop(() => {
-    test(`Filters sidebar none selected - ${dir}`, async ({ page }) => {
-      await goToSearchTerm(page, "birds", { dir })
-
-      expect(await page.locator(".sidebar").screenshot()).toMatchSnapshot(
-        `filters-sidebar-${dir}.png`
-      )
-    })
-
-    test(`Filters sidebar 1 filter selected - ${dir}`, async ({ page }) => {
-      await goToSearchTerm(page, "birds", { dir })
-      await page.locator('input[type="checkbox"]').first().check()
-
-      expect(await page.locator(".sidebar").screenshot()).toMatchSnapshot(
-        `filters-sidebar-checked-${dir}.png`
-      )
-    })
-  })
-
-  breakpoints.describeEachMobile(({ expectSnapshot }) => {
-    test(`Filters modal none selected - ${dir}`, async ({ page }) => {
-      await goToSearchTerm(page, "birds", { dir })
-      await openFiltersTab(page)
-
-      await expectSnapshot(`filters-modal-${dir}.png`, page)
-    })
-
-    test(`Filters modal 1 filter selected - ${dir}`, async ({ page }) => {
-      await goToSearchTerm(page, "birds", { dir })
-      await openFiltersTab(page)
-
-      await page.locator('input[type="checkbox"]').first().check()
-
-      await expectSnapshot(`filters-modal-filters-selected-${dir}.png`, page)
-    })
-  })
+  breakpoints.describeEachBreakpoint(["xs", "sm", "md", "lg"])(
+    ({ breakpoint, expectSnapshot }) => {
+      const isDesktop = breakpoint === "lg"
+      test.beforeEach(async ({ page }) => {
+        await setBreakpointCookie(page, breakpoint)
+        await dismissAllBannersUsingCookies(page)
+        await page.goto(pathWithDir("/search/?q=birds", dir))
+        await filters.open(page, dir)
+      })
+      test(`Filters modal none selected - ${dir}`, async ({ page }) => {
+        const snapshotName = `${getFiltersName(breakpoint)}-${dir}`
+
+        await expectSnapshot(
+          snapshotName,
+          isDesktop ? page.locator(".sidebar") : page
+        )
+      })
+
+      test(`Filters modal 1 filter selected - ${dir}`, async ({ page }) => {
+        await page.locator('input[type="checkbox"]').first().check()
+
+        const snapshotName = `${getFiltersName(breakpoint)}-checked-${dir}`
+
+        await expectSnapshot(
+          snapshotName,
+          isDesktop ? page.locator(".sidebar") : page
+        )
+      })
+    }
+  )
 }