Update Playwright to use a custom test fixture with global mocks

documentation/frontend/reference/playwright_tests.md

@@ -67,7 +67,7 @@ just frontend/run test:playwright visual-regression -u
 The above will run only test files with `visual-regression` in the path and will
 update any snapshot tests due to the `-u` flag.
 
-## Visual Regression tests
+## Writing Visual Regression tests
 
 When writing visual regression tests, it is good practice to write tests for
 each relevant breakpoint. There is a series of helpers in

frontend/.remake/component-storybook-test/remake-fileName.spec.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test"
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 

frontend/test/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["plugin:jest/recommended"],
+}

frontend/test/playwright/e2e/all-results-keyboard.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import audio from "~~/test/playwright/utils/audio"
 
@@ -59,7 +61,7 @@ test.describe("all results grid keyboard accessibility test", () => {
     )
   })
 
-  test.only("should open audio results as links", async ({ page }) => {
+  test("should open audio results as links", async ({ page }) => {
     await walkToType("audio", page)
     await page.keyboard.press("Enter")
     await page.waitForURL(
@@ -76,15 +78,20 @@ test.describe("all results grid keyboard accessibility test", () => {
     )
   })
 
-  test("should allow toggling audio playback via play/pause click", async ({
+  test.only("should allow toggling audio playback via play/pause click", async ({
     page,
   }) => {
     await walkToType("audio", page)
     const focusedResult = await locateFocusedResult(page)
     const playButton = await audio.getInactive(focusedResult)
     await playButton.click()
+
+    // Get the path for comparison purposes
+    const url = new URL(page.url())
+    const path = url.pathname + url.search
+
     // should not navigate
-    expect(page.url()).toMatch(/\/search\?q=birds$/)
+    expect(path).toMatch(/\/search\/?\?q=birds$/)
 
     const pauseButton = await audio.getActive(focusedResult)
     pauseButton.click()

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

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { turnOnAnalytics } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/audio-detail.spec.ts

@@ -1,6 +1,6 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
 
-import { mockProviderApis } from "~~/test/playwright/utils/route"
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 const goToCustomAudioPage = async (page: Page) => {
   // Test in a custom audio detail page, it should apply the same for any audio.
@@ -15,10 +15,6 @@ const showsErrorPage = async (page: Page) => {
 
 test.describe.configure({ mode: "parallel" })
 
-test.beforeEach(async ({ context }) => {
-  await mockProviderApis(context)
-})
-
 test("shows the data that is only available in single result, not search response", async ({
   page,
 }) => {

frontend/test/playwright/e2e/external-sources.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { goToSearchTerm, setCookies } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/filters-sidebar-keyboard.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   LanguageDirection,

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

@@ -1,4 +1,6 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   assertCheckboxStatus,
@@ -8,8 +10,6 @@ import {
   filters,
 } from "~~/test/playwright/utils/navigation"
 
-import { mockProviderApis } from "~~/test/playwright/utils/route"
-
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import {
@@ -42,9 +42,6 @@ const FILTER_COUNTS = {
 }
 
 breakpoints.describeMobileAndDesktop(() => {
-  test.beforeEach(async ({ context }) => {
-    await mockProviderApis(context)
-  })
   for (const searchType of supportedSearchTypes) {
     test(`correct total number of filters is displayed for ${searchType}`, async ({
       page,

frontend/test/playwright/e2e/global-audio.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { sleep, t } from "~~/test/playwright/utils/navigation"
 import breakpoints from "~~/test/playwright/utils/breakpoints"

frontend/test/playwright/e2e/header-internal.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   isDialogOpen,

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

@@ -1,16 +1,13 @@
-import { expect, Page, test } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 import { goToSearchTerm, t } from "~~/test/playwright/utils/navigation"
 
 import { searchPath, supportedSearchTypes } from "~/constants/media"
 
 test.describe.configure({ mode: "parallel" })
 
-test.beforeEach(async ({ context }) => {
-  await mockProviderApis(context)
-})
-
 for (const searchType of supportedSearchTypes) {
   test(`can change type and search for ${searchType} from homepage`, async ({
     page,

frontend/test/playwright/e2e/image-detail.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 import { t } from "~~/test/playwright/utils/navigation"
 
 const goToCustomImagePage = async (page: Page) => {
@@ -16,10 +17,6 @@ const showsErrorPage = async (page: Page) => {
 
 test.describe.configure({ mode: "parallel" })
 
-test.beforeEach(async ({ context }) => {
-  await mockProviderApis(context)
-})
-
 test("shows the author and title of the image", async ({ page }) => {
   await goToCustomImagePage(page)
   const author = page.locator('a[aria-label^="author"]')

frontend/test/playwright/e2e/load-more.spec.ts

@@ -1,11 +1,12 @@
-import { expect, Page, test } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   goToSearchTerm,
   renderModes,
   t,
 } from "~~/test/playwright/utils/navigation"
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 import { AUDIO, IMAGE, SupportedMediaType } from "~/constants/media"
 
@@ -39,10 +40,6 @@ const openSingleMediaView = async (
  */
 
 test.describe("Load more button", () => {
-  test.beforeEach(async ({ context }) => {
-    await mockProviderApis(context)
-  })
-
   test("Clicking sends 2 requests on All view with enough results", async ({
     page,
   }) => {

frontend/test/playwright/e2e/migration-banner.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { t } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/mobile-menu.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   goToSearchTerm,

frontend/test/playwright/e2e/recent-searches.spec.ts

@@ -1,4 +1,6 @@
-import { expect, test, type Page } from "@playwright/test"
+import { expect, type Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { searchFromHeader } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/e2e/redirect-queryless-searches.spec.ts

@@ -3,7 +3,9 @@
  * redirect to the homepage.
  */
 
-import { test, expect } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { searchTypes, searchPath } from "~/constants/media"
 

frontend/test/playwright/e2e/report-media.spec.ts

@@ -1,6 +1,7 @@
-import { test, expect, Page, BrowserContext } from "@playwright/test"
+import { expect, Page, BrowserContext } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 import {
   goToSearchTerm,
   openFirstResult,
@@ -80,10 +81,6 @@ const submitOtherReport = async (page: Page, context: BrowserContext) => {
   return expect(response.status()).toBe(200)
 }
 
-test.beforeEach(async ({ context }) => {
-  await mockProviderApis(context)
-})
-
 const reports = {
   dmca: submitDmcaReport,
   mature: submitMatureContentReport,

frontend/test/playwright/e2e/search-navigation.spec.ts

@@ -1,4 +1,6 @@
-import { expect, Page, test } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   goToSearchTerm,
@@ -7,7 +9,7 @@ import {
   openFirstResult,
   t,
 } from "~~/test/playwright/utils/navigation"
-import { mockProviderApis } from "~~/test/playwright/utils/route"
+
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import { AUDIO, IMAGE, SupportedMediaType } from "~/constants/media"
@@ -21,10 +23,6 @@ const getContentLink = async (page: Page, mediaType: SupportedMediaType) => {
 
 test.describe("search history navigation", () => {
   breakpoints.describeMobileAndDesktop(() => {
-    test.beforeEach(async ({ context }) => {
-      await mockProviderApis(context)
-    })
-
     test("should update search results when back navigation changes filters", async ({
       page,
     }) => {

frontend/test/playwright/e2e/search-query-client.spec.ts

@@ -1,11 +1,12 @@
-import { expect, test } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   changeSearchType,
   goToSearchTerm,
   searchFromHeader,
 } from "~~/test/playwright/utils/navigation"
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
@@ -27,10 +28,6 @@ test.describe.configure({ mode: "parallel" })
 
 test.describe("search query on CSR", () => {
   breakpoints.describeMobileAndDesktop(() => {
-    test.beforeEach(async ({ context }) => {
-      await mockProviderApis(context)
-    })
-
     test("q query parameter is set as the search term", async ({ page }) => {
       await goToSearchTerm(page, "cat", { mode: "CSR" })
 

frontend/test/playwright/e2e/search-query-server.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   assertCheckboxStatus,
@@ -7,7 +9,6 @@ import {
   goToSearchTerm,
   searchTypeNames,
 } from "~~/test/playwright/utils/navigation"
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
@@ -29,10 +30,6 @@ test.describe.configure({ mode: "parallel" })
 
 test.describe("search query on SSR", () => {
   breakpoints.describeMobileAndDesktop(() => {
-    test.beforeEach(async ({ context }) => {
-      await mockProviderApis(context)
-    })
-
     test("q query parameter is set as the search term", async ({ page }) => {
       await goToSearchTerm(page, "cat", {
         query: "license=cc0&license_type=commercial&searchBy=creator",

frontend/test/playwright/e2e/search-types.spec.ts

@@ -1,10 +1,11 @@
-import { test, expect, Page } from "@playwright/test"
+import { expect, Page } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import {
   changeSearchType,
   goToSearchTerm,
 } from "~~/test/playwright/utils/navigation"
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import { searchPath } from "~/constants/media"
@@ -95,10 +96,6 @@ async function checkSearchResult(page: Page, searchType: SearchTypeConfig) {
 
 test.describe("search types", () => {
   breakpoints.describeMobileAndDesktop(() => {
-    test.beforeEach(async ({ context }) => {
-      await mockProviderApis(context)
-    })
-
     for (const searchType of searchTypes) {
       test(`Can open ${searchType.name} search page on SSR`, async ({
         page,

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

@@ -6,9 +6,10 @@
  * When pending: does not show 'No images', Safer Browsing, search rating or error message
  * On error: shows error message
  */
-import { expect, test } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
-import { mockProviderApis } from "~~/test/playwright/utils/route"
 import {
   goToSearchTerm,
   scrollToBottom,
@@ -17,10 +18,6 @@ import {
 
 test.describe.configure({ mode: "parallel" })
 
-test.beforeEach(async ({ context }) => {
-  await mockProviderApis(context)
-})
-
 test("shows no results page when no results", async ({ page }) => {
   await page.goto("/search/image?q=243f6a8885a308d3")
   await expect(page.locator(".error-section")).toBeVisible()