Update Playwright to use a custom test fixture with global mocks

.eslintrc.js

@@ -208,6 +208,12 @@ module.exports = {
             message:
               "Do not use @vue/test-utils' `shallowMount`. Use `~~/test/unit/test-utils/render` instead which includes helpful context setup or @testing-library/vue's `render` directly.",
           },
+          {
+            selector:
+              "ImportDeclaration[source.value='@playwright/test']:has(ImportSpecifier[local.name='test'])",
+            message:
+              "Do not import 'test' from '@playwright/test'. Use 'import { test } from '~~/test/playwright/utils/test-fixture' instead.",
+          },
         ],
       },
     },

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/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"
 

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()

frontend/test/playwright/e2e/translation-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 { dismissBannersUsingCookies } from "~~/test/playwright/utils/navigation"
 

frontend/test/playwright/playwright.config.ts

@@ -43,7 +43,7 @@ const config: PlaywrightTestConfig = {
     baseURL: "http://localhost:8443",
     trace: "retain-on-failure",
   },
-  timeout: 60 * 1e3,
+  timeout: 60 * 1e3, // 1 minute
   /**
    * When updating or recreating tapes, if we have more than one worker running
    * then Talkback is liable to see multiple requests at the same time that would

frontend/test/playwright/utils/breakpoints.ts

@@ -1,4 +1,6 @@
-import { test, expect, Expect } from "@playwright/test"
+import { expect, Expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test-fixture"
 
 import { VIEWPORTS } from "~/constants/screens"
 import type { Breakpoint } from "~/constants/screens"