Fix flaky Playwright tests (#3759)

* Add waits to fix test flakiness due to font loading Signed-off-by: Olga Bulat <[email protected]> * Await fonts loading for header Signed-off-by: Olga Bulat <[email protected]> * Fix sensitive-results flaky test Signed-off-by: Olga Bulat <[email protected]> --------- Signed-off-by: Olga Bulat <[email protected]>
WordPress · Feb 7, 2024 · f6bd3a5 · f6bd3a5
1 parent 87b8bd5
commit f6bd3a5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/frontend/test/playwright/e2e/sensitive-results.spec.ts b/frontend/test/playwright/e2e/sensitive-results.spec.ts
@@ -6,12 +6,14 @@ import {
   preparePageForTests,
 } from "~~/test/playwright/utils/navigation"
 import { t } from "~~/test/playwright/utils/i18n"
-import { getH1, getHomeLink } from "~~/test/playwright/utils/components"
+import { getH1 } from "~~/test/playwright/utils/components"
 import {
   collectAnalyticsEvents,
   expectEventPayloadToMatch,
 } from "~~/test/playwright/utils/analytics"
 
+import { INCLUDE_SENSITIVE_QUERY_PARAM } from "~/constants/content-safety"
+
 test.describe.configure({ mode: "parallel" })
 
 const getSensitiveToggle = (page: Page) => {
@@ -42,12 +44,14 @@ test.describe("sensitive_results", () => {
 
     // Check the sensitive toggle on a search page
     await filters.open(page)
-    await getSensitiveToggle(page).click()
 
-    // Search from the home page
-    await getHomeLink(page).click()
-    await page.locator('main input[type="search"]').fill("cat")
-    await page.keyboard.press("Enter")
+    // Wait for the request that includes the sensitive query param
+    const requestPromise = page.waitForRequest((req) => {
+      return req.url().includes(INCLUDE_SENSITIVE_QUERY_PARAM)
+    })
+    await getSensitiveToggle(page).click()
+    const request = await requestPromise
+    expect(request.url()).toContain("cat")
 
     // Check the sensitive media on the search page
     await expect(getH1(page, /cat/i)).toBeVisible()

diff --git a/frontend/test/storybook/visual-regression/v-filter-button.spec.ts b/frontend/test/storybook/visual-regression/v-filter-button.spec.ts
@@ -2,6 +2,7 @@ import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { makeGotoWithArgs } from "~~/test/storybook/utils/args"
+import { sleep } from "~~/test/playwright/utils/navigation"
 
 const gotoWithArgs = makeGotoWithArgs(
   "components-vheader-vfilterbutton--default-story"
@@ -61,6 +62,7 @@ test.describe("VFilterButton", () => {
           appliedFilters: filterCount,
           pressed: true,
         })
+        await sleep(500)
         await expectSnapshot(
           `filter-button-pressed-${filterCount}-checked`,
           page.locator(wrapper)

diff --git a/frontend/test/storybook/visual-regression/v-header-internal.spec.ts b/frontend/test/storybook/visual-regression/v-header-internal.spec.ts
@@ -1,7 +1,6 @@
 import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
-import { sleep } from "~~/test/playwright/utils/navigation"
 import { languageDirections } from "~~/test/playwright/utils/i18n"
 
 const headerSelector = ".main-header"
@@ -35,12 +34,17 @@ test.describe("VHeaderInternal", () => {
       })
       test(`mobile-header-internal-modal-${dir}`, async ({ page }) => {
         await page.goto(pageUrl(dir))
+
+        // Ensure fonts are loaded before taking the snapshot.
+        const requestPromise = page.waitForRequest((req) =>
+          req.url().includes("var.woff2")
+        )
         await page.locator('button[aria-haspopup="dialog"]').click()
+        await requestPromise
         // Mouse stays over the button, so the close button is hovered.
         // To prevent this, move the mouse away.
         await page.mouse.move(0, 0)
-        // Wait for the fonts to load.
-        await sleep(300)
+
         await expectSnapshot(`mobile-header-internal-open-${dir}`, page)
       })
     })