Wait for the switch knob to render

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

@@ -75,6 +75,29 @@ 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(
+    ([name, className]) => {
+      const spanClasses = document
+        .querySelector(`${name}`)
+        ?.parentElement?.querySelector("span")?.className
+      if (!spanClasses?.includes(className)) {
+        setTimeout(() => {}, 1000)
+      }
+    },
+    // The knob is `bg-default` when the feature is off and `bg-tertiary` when the feature is on.
+    [name, !originalChecked ? "bg-tertiary" : "bg-default"]
+  )
+}
+
 test.describe("switchable features", () => {
   test.beforeEach(async ({ page }) => {
     await preparePageForTests(page, "xl")
@@ -86,8 +109,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,9 +119,9 @@ test.describe("switchable features", () => {
       page,
     }) => {
       await page.goto(`/preferences`)
-      const featureFlag = await getSwitchableInput(page, name, checked)
 
-      await featureFlag.setChecked(!checked)
+      await toggleChecked(page, name, checked)
+
       // Ensure the feature flag is updated
       await expectCheckboxState(page, name, !checked)