Wait for the switch knob to render

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

@@ -1,6 +1,6 @@
 import { type Page, test } from "@playwright/test"
 
-import { preparePageForTests } from "~~/test/playwright/utils/navigation"
+import { preparePageForTests, sleep } from "~~/test/playwright/utils/navigation"
 
 import featureData from "~~/feat/feature-flags.json"
 
@@ -75,6 +75,30 @@ const getSwitchableInput = async (
   return page.getByRole("checkbox", { name, checked }).first()
 }
 
+const toggleChecked = async (
+  page: Page,
+  name: string,
+  originalChecked: boolean | undefined
+) => {
+  const featureFlag = await getSwitchableInput(page, name, originalChecked)
+  await featureFlag.setChecked(!originalChecked)
+
+  // If the switch knob wasn't rendered yet, wait for it to be rendered.
+  await page.evaluate(
+    async ([name, className, sleep]) => {
+      const knobClasses = document
+        .querySelector(`${name}`)
+        ?.parentElement?.querySelector("span")?.className
+
+      if (!knobClasses?.includes(className)) {
+        await sleep(200)
+      }
+    },
+    // The knob is `bg-default` when the feature is off and `bg-tertiary` when the feature is on.
+    [name, !originalChecked ? "bg-tertiary" : "bg-default", sleep]
+  )
+}
+
 test.describe("switchable features", () => {
   test.beforeEach(async ({ page }) => {
     await preparePageForTests(page, "xl")
@@ -86,8 +110,8 @@ test.describe("switchable features", () => {
 
     test(`can switch ${name} from ${defaultState}`, async ({ page }) => {
       await page.goto(`/preferences`)
-      const featureFlag = await getSwitchableInput(page, name, checked)
-      await featureFlag.setChecked(!checked)
+
+      await toggleChecked(page, name, checked)
 
       await expectCheckboxState(page, name, !checked)
     })
@@ -96,10 +120,8 @@ test.describe("switchable features", () => {
       page,
     }) => {
       await page.goto(`/preferences`)
-      const featureFlag = await getSwitchableInput(page, name, checked)
 
-      await featureFlag.setChecked(!checked)
-      // Ensure the feature flag is updated
+      await toggleChecked(page, name, checked)
       await expectCheckboxState(page, name, !checked)
 
       // Cookies are not visible to the user, so we are checking that the feature flag

frontend/test/playwright/utils/assertions.ts

@@ -10,7 +10,6 @@ export const expectCheckboxState = async (
   if (checked) {
     await expect(checkbox).toBeChecked()
   } else {
-    console.log(`Expecting checkbox ${name} checked state to be ${checked}`)
     await expect(checkbox).not.toBeChecked()
   }
 }