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"
 
@@ -74,36 +74,41 @@ const getSwitchableInput = async (
   await expectCheckboxState(page, name, checked)
   return page.getByRole("checkbox", { name, checked }).first()
 }
+const getKnobClasses = (name: string) => {
+  return (
+    document.getElementById(`#${name}`)?.parentElement?.querySelector("span")
+      ?.className ?? ""
+  )
+}
 
 const toggleChecked = async (
   page: Page,
   name: string,
   originalChecked: boolean | undefined
 ) => {
   const featureFlag = await getSwitchableInput(page, name, originalChecked)
-  await featureFlag.setChecked(!originalChecked)
+  const expectedChecked = !originalChecked
+  await featureFlag.setChecked(expectedChecked)
+
+  const expectedKnobClass = expectedChecked ? "bg-tertiary" : "bg-default"
 
   // 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 ?? ""
-        )
-      }
-
+    async ([name, expectedKnobClass, getKnobClasses]) => {
       for (const waitTime of [100, 200, 500]) {
-        if (getKnobClasses().includes(className)) {
+        if (getKnobClasses(name).includes(expectedKnobClass)) {
           return
         }
         await new Promise((resolve) => setTimeout(resolve, waitTime))
       }
     },
-    [name, !originalChecked ? "bg-tertiary" : "bg-default"] as const
+    [name, expectedKnobClass, getKnobClasses] as const
   )
+
+  const expectedText = `${name}: ${expectedChecked ? "on" : "off"}`
+
+  await expect(page.getByText(expectedText).first()).toBeVisible()
 }
 
 test.describe("switchable features", () => {