Remove maxDiffPixelRatio from Storybook tests

frontend/src/components/VHeader/meta/VHeaderInternal.stories.ts

@@ -18,7 +18,7 @@ export const Default: Story = {
     setup() {
       return () =>
         h("div", { id: "teleports" }, [
-          h("div", { class: "fixed inset-0 w-full h-full" }, [
+          h("div", { class: "fixed inset-0 w-full h-full bg-default" }, [
             h(VHeaderInternal, args),
           ]),
         ])

frontend/src/components/VIconButton/meta/VIconButton.stories.ts

@@ -2,13 +2,16 @@ import { h } from "vue"
 
 import { baseButtonSizes, baseButtonVariants } from "~/types/button"
 
+import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"
+
 import VIconButton from "~/components/VIconButton/VIconButton.vue"
 
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 const meta = {
   title: "Components/VIconButton",
   component: VIconButton,
+  decorators: [WithScreenshotArea],
 
   argTypes: {
     size: {

frontend/src/components/VLanguageSelect/meta/VLanguageSelect.stories.ts

@@ -1,12 +1,15 @@
 import { h } from "vue"
 
+import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"
+
 import VLanguageSelect from "~/components/VLanguageSelect/VLanguageSelect.vue"
 
 import type { Meta, StoryObj } from "@storybook/vue3"
 
 const meta = {
   title: "Components/VLanguageSelect",
   component: VLanguageSelect,
+  decorators: [WithScreenshotArea],
 } satisfies Meta<typeof VLanguageSelect>
 
 export default meta

frontend/src/components/VSelectField/meta/VSelectField.stories.ts

@@ -1,5 +1,7 @@
 import { h, ref } from "vue"
 
+import { WithScreenshotArea } from "~~/.storybook/decorators/with-screenshot-area"
+
 import VIcon from "~/components/VIcon/VIcon.vue"
 import VSelectField from "~/components/VSelectField/VSelectField.vue"
 
@@ -19,6 +21,7 @@ const baseArgs = {
 const meta = {
   title: "Components/VSelectField",
   component: VSelectField,
+  decorators: [WithScreenshotArea],
 
   argTypes: {
     "onUpdate:modelValue": {

frontend/src/components/meta/Focus.stories.js

@@ -57,18 +57,3 @@ export const BoldFilled = {
     classNames: ["focus-bold-filled"],
   },
 }
-
-export const Colored = {
-  render: GetTemplate("bg-tertiary text-over-dark border border-tx").bind({}),
-  name: "Colored",
-
-  args: {
-    classNames: ["focus-slim-tx bg-complementary"],
-  },
-
-  parameters: {
-    backgrounds: {
-      default: "dark",
-    },
-  },
-}

frontend/test/storybook/playwright.config.ts

@@ -1,8 +1,6 @@
-import type { PlaywrightTestConfig } from "@playwright/test"
+import { defineConfig } from "@playwright/test"
 
-const config: PlaywrightTestConfig = {
-  snapshotPathTemplate:
-    "visual-regression/{testFileName}-snapshots/{arg}-linux.png",
+export default defineConfig({
   forbidOnly: !!process.env.CI,
   webServer: {
     command: "pnpm prod:storybook",
@@ -15,12 +13,4 @@ const config: PlaywrightTestConfig = {
     trace: "retain-on-failure",
   },
   timeout: 60 * 1e3, // 1 minute
-  expect: {
-    toMatchSnapshot: {
-      // To avoid flaky tests, we allow a small amount of pixel difference.
-      maxDiffPixelRatio: 0.01,
-    },
-  },
-}
-
-export default config
+})

frontend/test/storybook/utils/expect-snapshot.ts

@@ -0,0 +1,24 @@
+import {
+  Expect,
+  expect,
+  Locator,
+  LocatorScreenshotOptions,
+  Page,
+  PageScreenshotOptions,
+} from "@playwright/test"
+
+export type ExpectSnapshotOptions = {
+  screenshotOptions: LocatorScreenshotOptions | PageScreenshotOptions
+  snapshotOptions: Parameters<ReturnType<Expect>["toMatchSnapshot"]>[0]
+}
+
+export const expectSnapshot = async (
+  name: string,
+  locator: Locator | Page,
+  options?: ExpectSnapshotOptions
+) => {
+  const snapshotName = `${name}.png`
+  return expect(
+    await locator.screenshot(options?.screenshotOptions)
+  ).toMatchSnapshot(snapshotName, options?.snapshotOptions)
+}

frontend/test/storybook/visual-regression/focus.spec.ts

@@ -1,13 +1,11 @@
-import { test, expect, Page, Locator } from "@playwright/test"
+import { test, Page } from "@playwright/test"
+
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 const goTo = async (page: Page, slug: string) => {
   await page.goto(`/iframe.html?id=meta-focus--${slug}`)
 }
 
-const expectSnapshot = async (name: string, elem: Locator) => {
-  expect(await elem.screenshot()).toMatchSnapshot({ name: `${name}.png` })
-}
-
 const allSlugs = [
   "slim-transparent",
   "slim-filled",
@@ -23,6 +21,7 @@ test.describe("Focus", () => {
     test(`focus-${slug}`, async ({ page }) => {
       await goTo(page, slug)
       await page.focus('[data-testid="focus-target"]')
+
       await expectSnapshot(`focus-${slug}`, page.locator(".screenshot-area"))
     })
   }

frontend/test/storybook/visual-regression/v-button.spec.ts

@@ -1,7 +1,9 @@
-import { expect, test } from "@playwright/test"
+import { test } from "@playwright/test"
 
 import { makeGotoWithArgs } from "~~/test/storybook/utils/args"
 
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
+
 import { buttonVariants } from "~/types/button"
 
 const buttonLocator = "text=Code is Poetry"
@@ -17,34 +19,29 @@ test.describe("VButton", () => {
   for (const variant of nonPressedVariants) {
     test(`${variant} resting`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-resting.png`,
-      })
+      await expectSnapshot(`${variant}-resting`, page.locator(wrapperLocator))
     })
 
     test(`${variant} hovered`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.hover(buttonLocator)
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-hovered.png`,
-      })
+      await expectSnapshot(`${variant}-hovered`, page.locator(wrapperLocator))
     })
 
     test(`${variant} focused`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.focus(buttonLocator)
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-focused.png`,
-      })
+      await expectSnapshot(`${variant}-focused`, page.locator(wrapperLocator))
     })
 
     test(`${variant} focused hovered`, async ({ page }) => {
       await gotoWithArgs(page, { variant })
       await page.focus(buttonLocator)
       await page.hover(buttonLocator)
-      expect(await page.locator(wrapperLocator).screenshot()).toMatchSnapshot({
-        name: `${variant}-focused-hovered.png`,
-      })
+      await expectSnapshot(
+        `${variant}-focused-hovered`,
+        page.locator(wrapperLocator)
+      )
     })
   }
 })

frontend/test/storybook/visual-regression/v-checkbox.spec.ts

@@ -1,4 +1,6 @@
-import { test, expect } from "@playwright/test"
+import { test } from "@playwright/test"
+
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 test.describe.configure({ mode: "parallel" })
 
@@ -9,86 +11,57 @@ test.describe("v-checkbox", () => {
     })
 
     test("default", async ({ page }) => {
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({ name: "default.png" })
+      await expectSnapshot("default", page.locator(".screenshot-area"))
     })
 
     test("hover", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.hover()
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({ name: "hover.png" })
+      await expectSnapshot("hover", page.locator(".screenshot-area"))
     })
 
     test("focused", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.focus()
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "focused.png",
-      })
+      await expectSnapshot("focused", page.locator(".screenshot-area"))
     })
 
     test("disabled", async ({ page }) => {
       const checkbox = page.locator('input[type="checkbox"]')
       await checkbox.evaluate((checkbox) => {
         ;(checkbox as HTMLInputElement).disabled = true
       })
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "disabled.png",
-      })
+      await expectSnapshot("disabled", page.locator(".screenshot-area"))
     })
 
     test("on", async ({ page }) => {
-      const checkbox = page.locator('input[type="checkbox"]')
+      const checkbox = page.getByRole("checkbox")
       await checkbox.click()
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({ name: "on.png" })
+      await expectSnapshot("on", page.locator(".screenshot-area"))
     })
 
     test("on focused", async ({ page }) => {
-      const checkbox = page.locator('input[type="checkbox"]')
+      const checkbox = page.getByRole("checkbox")
       await checkbox.focus()
       await page.keyboard.press("Space")
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "on-focused.png",
-      })
+      await expectSnapshot("on-focused", page.locator(".screenshot-area"))
     })
 
     test("on disabled", async ({ page }) => {
-      const checkbox = page.locator('input[type="checkbox"]')
+      const checkbox = page.getByRole("checkbox")
       await checkbox.click()
       await checkbox.evaluate((checkbox) => {
         ;(checkbox as HTMLInputElement).disabled = true
       })
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "on-disabled.png",
-      })
+      await expectSnapshot("on-disabled", page.locator(".screenshot-area"))
     })
 
     test("on-and-off", async ({ page }) => {
       // toggle on and off again
-      const checkbox = page.locator('input[type="checkbox"]')
+      const checkbox = page.getByRole("checkbox")
       await checkbox.click()
-      // `force: true` is required because the `input`'s pointer events are actually intercepted by the visual SVG.
-      // We still want to check that it works though as that does mimic the user behavior of checking directly on the checkbox.
-      // eslint-disable-next-line playwright/no-force-option
-      await checkbox.click({ force: true })
-      expect(
-        await page.locator(".screenshot-area").screenshot()
-      ).toMatchSnapshot({
-        name: "on-and-off.png",
-      })
+      await checkbox.click()
+      await expectSnapshot("default", page.locator(".screenshot-area"))
     })
   })
 })

frontend/test/storybook/visual-regression/v-collection-header.spec.ts

@@ -1,18 +1,19 @@
 import { test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
+import { dirParam } from "~~/test/storybook/utils/args"
 
 test.describe.configure({ mode: "parallel" })
 
 test.describe("VCollectionHeader", () => {
   breakpoints.describeEvery(({ expectSnapshot }) => {
-    for (const languageDirection of ["ltr", "rtl"]) {
-      test(`All headers ${languageDirection}`, async ({ page }) => {
+    for (const dir of ["ltr", "rtl"] as const) {
+      test(`All headers ${dir}`, async ({ page }) => {
         await page.goto(
-          `/iframe.html?id=components-vcollectionheader--all-collections`
+          `/iframe.html?id=components-vcollectionheader--all-collections${dirParam(dir)}`
         )
         await expectSnapshot(
-          `VCollectionHeaders-${languageDirection}`,
+          `VCollectionHeaders-${dir}`,
           page.locator(".wrapper")
         )
       })

frontend/test/storybook/visual-regression/v-filter-tab.spec.ts

@@ -2,6 +2,7 @@ import { expect, type Page, test } from "@playwright/test"
 
 import { makeUrlWithArgs } from "~~/test/storybook/utils/args"
 import { waitForResponse } from "~~/test/storybook/utils/response"
+import { expectSnapshot } from "~~/test/storybook/utils/expect-snapshot"
 
 const urlWithArgs = makeUrlWithArgs(
   "components-vheader-vheadermobile-vfiltertab--default"
@@ -52,8 +53,9 @@ test.describe("VFilterTab", () => {
       await goAndWaitForSvg(page, { appliedFilterCount, isSelected: true })
       await focusFiltersTab(page)
 
-      expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-        `filter-tab-focused-${appliedFilterCount}.png`
+      await expectSnapshot(
+        `filter-tab-focused-${appliedFilterCount}`,
+        page.locator(wrapper)
       )
     })
 
@@ -64,8 +66,9 @@ test.describe("VFilterTab", () => {
       await focusFiltersTab(page)
       await hoverFiltersTab(page)
 
-      expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-        `filter-tab-focused-hovered-${appliedFilterCount}.png`
+      await expectSnapshot(
+        `filter-tab-focused-hovered-${appliedFilterCount}`,
+        page.locator(wrapper)
       )
     })
 
@@ -76,8 +79,9 @@ test.describe("VFilterTab", () => {
       }) => {
         await goAndWaitForSvg(page, { appliedFilterCount, isSelected })
 
-        expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-          `filter-tab-resting-${selected}-${appliedFilterCount}.png`
+        await expectSnapshot(
+          `filter-tab-resting-${selected}-${appliedFilterCount}`,
+          page.locator(wrapper)
         )
       })
 
@@ -87,8 +91,9 @@ test.describe("VFilterTab", () => {
         await goAndWaitForSvg(page, { appliedFilterCount, isSelected })
         await hoverFiltersTab(page)
 
-        expect(await page.locator(wrapper).screenshot()).toMatchSnapshot(
-          `filter-tab-hovered-${selected}-${appliedFilterCount}.png`
+        await expectSnapshot(
+          `filter-tab-hovered-${selected}-${appliedFilterCount}`,
+          page.locator(wrapper)
         )
       })
     }