Add snapshots of the flag store state

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

@@ -13,6 +13,7 @@ import type {
 } from "~/types/feature-flag"
 import { DISABLED, FLAG_STATUSES, FlagStatus } from "~/constants/feature-flag"
 import { DEPLOY_ENVS, DeployEnv } from "~/constants/deploy-env"
+import { SCREEN_SIZES } from "~/constants/screens"
 
 const getFlagStatus = (
   flag: FeatureFlagRecord,
@@ -75,6 +76,14 @@ const getSwitchableInput = async (
   return checkbox
 }
 
+const expectFeatureFlagState = async (page: Page, screenshotName: string) => {
+  await page.setViewportSize({
+    width: page.viewportSize()?.width ?? SCREEN_SIZES.xl,
+    height: await page.evaluate(() => document.body.scrollHeight),
+  })
+  await expect(page.locator("pre")).toHaveScreenshot(screenshotName)
+}
+
 test.describe("switchable features", () => {
   test.beforeEach(async ({ page }) => {
     await preparePageForTests(page, "xl")
@@ -89,6 +98,7 @@ test.describe("switchable features", () => {
       const featureFlag = await getSwitchableInput(page, name, checked)
       await featureFlag.click()
 
+      await expectFeatureFlagState(page, `${name}-checked-${!checked}.png`)
       await expectCheckboxState(page, name, !checked)
     })
 
@@ -99,16 +109,27 @@ test.describe("switchable features", () => {
       const featureFlag = await getSwitchableInput(page, name, checked)
 
       await featureFlag.click()
+      const flagSwitch = page.getByRole("checkbox", { name }).first()
+
+      // eslint-disable-next-line playwright/no-conditional-in-test
+      if (checkedAfterToggle) {
+        // eslint-disable-next-line playwright/no-conditional-expect
+        await expect(flagSwitch).toHaveAttribute("checked")
+      } else {
+        // eslint-disable-next-line playwright/no-conditional-expect
+        await expect(flagSwitch).not.toHaveAttribute("checked")
+      }
 
       // Ensure the feature flag is updated
-      await getSwitchableInput(page, name, !checked)
+      await expectFeatureFlagState(page, `${name}-checked-${!checked}.png`)
 
       await page.goto(`/preferences`)
 
       // Cookies are not visible to the user, so we are checking that the feature flag
       // state is saved and restored when the page is reloaded.
       // If the feature flag is off, the checkbox checked status before user interaction will be undefined,
       // @see https://playwright.dev/docs/api/class-page#page-get-by-role (options.checked section)
+      await expectFeatureFlagState(page, `${name}-checked-${!checked}.png`)
       await expectCheckboxState(page, name, checkedAfterToggle)
     })
   }