Remove maxDiffPixelRatio from Storybook tests

frontend/test/storybook/playwright.config.ts

@@ -13,10 +13,4 @@ export default defineConfig({
     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,
-    },
-  },
 })

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

@@ -20,6 +20,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-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-footer.spec.ts

@@ -1,11 +1,10 @@
-import { expect, Page, test } from "@playwright/test"
+import { expect, test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 
 import {
   type LanguageDirection,
   languageDirections,
-  t,
 } from "~~/test/playwright/utils/i18n"
 
 import { dirParam } from "~~/test/storybook/utils/args"
@@ -17,28 +16,6 @@ const storyUrl = (
   dir: LanguageDirection
 ) => `/iframe.html?id=components-vfooter--${footerKind}${dirParam(dir)}`
 
-/**
- * Changes the language using the language select, and checks for elements to
- * be visible to ensure that the page is fully-loaded.
- */
-const setLanguageDirection = async (
-  page: Page,
-  dir: LanguageDirection,
-  footerKind: (typeof footerKinds)[number]
-) => {
-  if (dir !== "rtl") {
-    return
-  }
-  await page.locator("#language").selectOption({ value: "ar" })
-  if (footerKind === "internal") {
-    // The WP svg inside a link. The text with a placeholder is flaky in RTL.
-    await expect(page.locator("a svg")).toBeVisible()
-  } else {
-    const aboutLink = page.getByText(t("navigation.about", "rtl"))
-    await expect(aboutLink).toBeVisible()
-  }
-}
-
 test.describe.configure({ mode: "parallel" })
 
 test.describe("VFooter", () => {
@@ -48,7 +25,8 @@ test.describe("VFooter", () => {
         test(`footer-${footerKind}-${dir}`, async ({ page }) => {
           await page.goto(storyUrl(footerKind, dir))
 
-          await setLanguageDirection(page, dir, footerKind)
+          // Ensure the component is hydrated by checking that language or theme select is enabled
+          await expect(page.getByRole("combobox").nth(0)).toBeEnabled()
 
           await expectSnapshot(
             `footer-${footerKind}-${dir}`,