Add baseline functionality for running Playwright tests against live …

…environments (#5075)

* Add HMAC signing capability for playwright tests

* Add workflow to run Playwright smoketests in CI

* Remove testing code for new workflow

.github/workflows/ci_cd.yml

@@ -1312,6 +1312,22 @@ jobs:
           wait_time: 60 # check every minute
           max_time: 1800 # allow up to 30 minutes for a deployment
 
+      - name: Trigger staging Playwright smoketests
+        uses: convictional/[email protected]
+        with:
+          owner: WordPress
+          repo: openverse
+          github_token: ${{ secrets.ACCESS_TOKEN }}
+          workflow_file_name: playwright_deployment_smoketest.yml
+          wait_interval: 60
+          # TODO: Set to true once we see that this test is stable, and we can fail the deployment if it fails.
+          # @see https://github.com/WordPress/openverse/pull/4991
+          propagate_failure: false
+          client_payload: |
+            {
+              "service_url": "https://staging.openverse.org/"
+            }
+
       - name: Trigger staging k6 load test
         uses: convictional/[email protected]
         with:

.github/workflows/playwright_deployment_smoketest.yml

@@ -0,0 +1,44 @@
+name: Run Playwright smoketests
+
+on:
+  workflow_dispatch:
+    inputs:
+      service_url:
+        description: "The service against which to run the Playwright smoketests."
+        required: true
+        type: string
+
+run-name: Playwright smoketests ${{ inputs.service_url }}
+
+# Disallow running multiple smoketests at once against the same service
+concurrency: ${{ github.workflow }}-${{ inputs.service_url }}
+
+jobs:
+  smoketests:
+    name: "Playwright smoketests ${{ inputs.service_url }}"
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup CI env
+        uses: ./.github/actions/setup-env
+        with:
+          setup_python: false
+          install_recipe: node-install
+
+      - name: Run playwright
+        env:
+          # The secret name is k6 but it's usable for anything sending HMAC signed requests
+          HMAC_SIGNING_SECRET: ${{ secrets.K6_SIGNING_SECRET }}
+          PLAYWRIGHT_BASE_URL: ${{ inputs.service_url }}
+        run: |
+          just p frontend test:playwright --grep '@deployment-smoketest'
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        id: test-results
+        with:
+          name: test_results
+          path: frontend/test-results

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"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 

frontend/docker-compose.playwright.yml

@@ -20,3 +20,5 @@ services:
       - DEBUG=pw:webserver
       - UPDATE_TAPES=${UPDATE_TAPES:-false}
       - FASTSTART=${FASTSTART:-false}
+      - PLAYWRIGHT_BASE_URL=${PLAYWRIGHT_BASE_URL:-}
+      - HMAC_SIGNING_SECRET=${HMAC_SIGNING_SECRET:-}

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

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

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

@@ -1,4 +1,6 @@
-import { expect, test } from "@playwright/test"
+import { expect } from "@playwright/test"
+
+import { test } from "~~/test/playwright/utils/test"
 
 import audio from "~~/test/playwright/utils/audio"
 import {
@@ -30,116 +32,122 @@ const singleResultRegex = (
   )
 }
 
-test.describe("all results grid keyboard accessibility test", () => {
-  const searchTerm = "birds"
-  test.beforeEach(async ({ page }) => {
-    await preparePageForTests(page, "xl")
-    await goToSearchTerm(page, searchTerm)
-  })
-
-  test("should open image results as links", async ({ page }) => {
-    const mediaType = "image"
-    await walkToType(mediaType, page)
-    await page.keyboard.press("Enter")
-    const urlRegex = singleResultRegex(mediaType, searchTerm)
-
-    await page.waitForURL(urlRegex)
-    expect(page.url()).toMatch(urlRegex)
-  })
-
-  test("should open audio results as links", async ({ page }) => {
-    const mediaType = "audio"
-    await walkToType(mediaType, page)
-    await page.keyboard.press("Enter")
-    const urlRegex = singleResultRegex(mediaType, searchTerm)
-    await page.waitForURL(urlRegex)
-    expect(page.url()).toMatch(urlRegex)
-  })
-
-  test("should show instructions snackbar when focusing first audio", async ({
-    page,
-  }) => {
-    await walkToType("audio", page)
-
-    await expect(page.getByRole("alert")).toBeVisible()
-  })
-
-  test("should hide the instructions snackbar when interacted with audio", async ({
-    page,
-  }) => {
-    await walkToType("audio", page)
-
-    await expect(page.getByRole("alert")).toBeVisible()
-
-    const focusedResult = await locateFocusedResult(page)
-    const playButton = await audio.getInactive(focusedResult)
-    await playButton.click()
-
-    await expect(page.getByRole("alert")).toBeHidden()
-  })
-
-  test("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(path).toMatch(/\/search\/?\?q=birds$/)
-
-    const pauseButton = await audio.getActive(focusedResult)
-    await pauseButton.click()
-    await expect(playButton).toBeVisible()
-  })
-
-  test("should allow toggling audio playback via spacebar", async ({
-    page,
-  }) => {
-    await walkToType("audio", page)
-    await page.keyboard.press(keycodes.Spacebar)
-    const focusedResult = await locateFocusedResult(page)
-    await expect(await audio.getActive(focusedResult)).toBeVisible()
-    await page.keyboard.press(keycodes.Spacebar)
-    await expect(await audio.getInactive(focusedResult)).toBeVisible()
-  })
-
-  test("should pause audio after playing another", async ({ page }) => {
-    await walkToType("audio", page)
-    const focusedResult = await locateFocusedResult(page)
-    const playButton = await audio.getInactive(focusedResult)
-    await playButton.click()
-    const pauseButton = await audio.getActive(focusedResult)
-
-    await page.keyboard.press(keycodes.Tab)
-    await walkToNextOfType("audio", page)
-
-    const nextFocusedResult = await locateFocusedResult(page)
-    const nextPlayButton = await audio.getInactive(nextFocusedResult)
-    await nextPlayButton.click()
-    await audio.getActive(nextFocusedResult)
-
-    await expect(playButton).toBeVisible()
-    await expect(pauseButton).toBeHidden()
-  })
-
-  // Test for https://github.com/WordPress/openverse/issues/3940
-  test("clicking on skip-to-content should not navigate", async ({ page }) => {
-    const getResultsLabel = async (type: SupportedMediaType) => {
-      const link = await getContentLink(page, type)
-      return link.textContent()
-    }
-    const imageResultsLabel = await getResultsLabel("image")
-    const audioResultsLabel = await getResultsLabel("audio")
-
-    await skipToContent(page)
-
-    expect(await getResultsLabel("image")).toEqual(imageResultsLabel)
-    expect(await getResultsLabel("audio")).toEqual(audioResultsLabel)
-  })
-})
+test.describe(
+  "all results grid keyboard accessibility test",
+  { tag: "@deployment-smoketest" },
+  () => {
+    const searchTerm = "birds"
+    test.beforeEach(async ({ page }) => {
+      await preparePageForTests(page, "xl")
+      await goToSearchTerm(page, searchTerm)
+    })
+
+    test("should open image results as links", async ({ page }) => {
+      const mediaType = "image"
+      await walkToType(mediaType, page)
+      await page.keyboard.press("Enter")
+      const urlRegex = singleResultRegex(mediaType, searchTerm)
+
+      await page.waitForURL(urlRegex)
+      expect(page.url()).toMatch(urlRegex)
+    })
+
+    test("should open audio results as links", async ({ page }) => {
+      const mediaType = "audio"
+      await walkToType(mediaType, page)
+      await page.keyboard.press("Enter")
+      const urlRegex = singleResultRegex(mediaType, searchTerm)
+      await page.waitForURL(urlRegex)
+      expect(page.url()).toMatch(urlRegex)
+    })
+
+    test("should show instructions snackbar when focusing first audio", async ({
+      page,
+    }) => {
+      await walkToType("audio", page)
+
+      await expect(page.getByRole("alert")).toBeVisible()
+    })
+
+    test("should hide the instructions snackbar when interacted with audio", async ({
+      page,
+    }) => {
+      await walkToType("audio", page)
+
+      await expect(page.getByRole("alert")).toBeVisible()
+
+      const focusedResult = await locateFocusedResult(page)
+      const playButton = await audio.getInactive(focusedResult)
+      await playButton.click()
+
+      await expect(page.getByRole("alert")).toBeHidden()
+    })
+
+    test("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(path).toMatch(/\/search\/?\?q=birds$/)
+
+      const pauseButton = await audio.getActive(focusedResult)
+      await pauseButton.click()
+      await expect(playButton).toBeVisible()
+    })
+
+    test("should allow toggling audio playback via spacebar", async ({
+      page,
+    }) => {
+      await walkToType("audio", page)
+      await page.keyboard.press(keycodes.Spacebar)
+      const focusedResult = await locateFocusedResult(page)
+      await expect(await audio.getActive(focusedResult)).toBeVisible()
+      await page.keyboard.press(keycodes.Spacebar)
+      await expect(await audio.getInactive(focusedResult)).toBeVisible()
+    })
+
+    test("should pause audio after playing another", async ({ page }) => {
+      await walkToType("audio", page)
+      const focusedResult = await locateFocusedResult(page)
+      const playButton = await audio.getInactive(focusedResult)
+      await playButton.click()
+      const pauseButton = await audio.getActive(focusedResult)
+
+      await page.keyboard.press(keycodes.Tab)
+      await walkToNextOfType("audio", page)
+
+      const nextFocusedResult = await locateFocusedResult(page)
+      const nextPlayButton = await audio.getInactive(nextFocusedResult)
+      await nextPlayButton.click()
+      await audio.getActive(nextFocusedResult)
+
+      await expect(playButton).toBeVisible()
+      await expect(pauseButton).toBeHidden()
+    })
+
+    // Test for https://github.com/WordPress/openverse/issues/3940
+    test("clicking on skip-to-content should not navigate", async ({
+      page,
+    }) => {
+      const getResultsLabel = async (type: SupportedMediaType) => {
+        const link = await getContentLink(page, type)
+        return link.textContent()
+      }
+      const imageResultsLabel = await getResultsLabel("image")
+      const audioResultsLabel = await getResultsLabel("audio")
+
+      await skipToContent(page)
+
+      expect(await getResultsLabel("image")).toEqual(imageResultsLabel)
+      expect(await getResultsLabel("audio")).toEqual(audioResultsLabel)
+    })
+  }
+)

frontend/test/playwright/e2e/attribution.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"
 
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
 import {

frontend/test/playwright/e2e/audio-detail.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"
 
 import {
   collectAnalyticsEvents,

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

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

frontend/test/playwright/e2e/collections.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"
 
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
 import {

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

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

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"
 
 import {
   goToSearchTerm,

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"
 
 import {
   changeSearchType,

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"
 
 import {
   goToSearchTerm,