Fix flaky e2e preferences test

frontend/src/pages/preferences.vue

@@ -124,7 +124,7 @@ const doneHydrating = computed(() => useHydrating())
             @change="handleChange"
           >
             <div>
-              <strong>{{ flag.name }}</strong>
+              <strong>{{ flag.name }}{{ `: ${flag.state}` }}</strong>
               <br />
               {{ flag.description }}
             </div>

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

@@ -1,4 +1,4 @@
-import { type Page, test } from "@playwright/test"
+import { type Page, expect, test } from "@playwright/test"
 
 import { preparePageForTests } from "~~/test/playwright/utils/navigation"
 
@@ -81,29 +81,12 @@ const toggleChecked = async (
   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.
-  // The knob's color is `bg-default` when off and `bg-tertiary` when on.
-  await page.evaluate(
-    async ([name, className]) => {
-      const getKnobClasses = () => {
-        return (
-          document
-            .getElementById(`#${name}`)
-            ?.parentElement?.querySelector("span")?.className ?? ""
-        )
-      }
+  const expectedChecked = !originalChecked
+  await featureFlag.setChecked(expectedChecked)
 
-      for (const waitTime of [100, 200, 500]) {
-        if (getKnobClasses().includes(className)) {
-          return
-        }
-        await new Promise((resolve) => setTimeout(resolve, waitTime))
-      }
-    },
-    [name, !originalChecked ? "bg-tertiary" : "bg-default"] as const
-  )
+  const expectedText = `${name}: ${expectedChecked ? "on" : "off"}`
+
+  await expect(page.getByText(expectedText).first()).toBeVisible()
 }
 
 test.describe("switchable features", () => {