diff --git a/frontend/src/pages/preferences.vue b/frontend/src/pages/preferences.vue
index 078d5cd524b..ea1b5c8748a 100644
--- a/frontend/src/pages/preferences.vue
+++ b/frontend/src/pages/preferences.vue
@@ -124,7 +124,7 @@ const doneHydrating = computed(() => useHydrating())
@change="handleChange"
>
- {{ flag.name }}
+ {{ flag.name }}{{ `: ${flag.state}` }}
{{ flag.description }}
diff --git a/frontend/test/playwright/e2e/preferences.spec.ts b/frontend/test/playwright/e2e/preferences.spec.ts
index 74d69d52631..bb91b8b7478 100644
--- a/frontend/test/playwright/e2e/preferences.spec.ts
+++ b/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", () => {