Rename all snapshots to "-light"

frontend/test/playwright/utils/breakpoints.ts

@@ -17,7 +17,7 @@ type ExpectSnapshot = <T extends ScreenshotAble>(
 
 type BreakpointBlock = (options: {
   getConfigValues: (name: string) => {
-    name: `${typeof name}-${Breakpoint}.png`
+    name: `${typeof name}-${Breakpoint}-light.png`
   }
   breakpoint: Breakpoint
   expectSnapshot: ExpectSnapshot
@@ -88,7 +88,7 @@ const makeBreakpointDescribe =
       })
 
       const getConfigValues = (name: string) => ({
-        name: `${name}-${breakpoint}.png` as const,
+        name: `${name}-${breakpoint}-light.png` as const,
       })
 
       const expectSnapshot = async <T extends ScreenshotAble>(
@@ -99,10 +99,8 @@ const makeBreakpointDescribe =
       ) => {
         const { name: snapshotName } = getConfigValues(name)
         return expect(await screenshotAble.screenshot(options)).toMatchSnapshot(
-          {
-            name: snapshotName,
-            ...snapshotOptions,
-          }
+          snapshotName,
+          snapshotOptions
         )
       }
 

frontend/test/playwright/visual-regression/components/global-audio-player.spec.ts

@@ -32,7 +32,7 @@ for (const dir of languageDirections) {
       // To make the tests consistent, set the played area to the same position
       await page.mouse.click(170, 650)
 
-      await expectSnapshot(`global-audio-player-on-search-${dir}.png`, page)
+      await expectSnapshot(`global-audio-player-on-search-${dir}`, page)
     })
   })
 }

frontend/test/playwright/visual-regression/components/header.spec.ts

@@ -18,7 +18,7 @@ test.describe.configure({ mode: "parallel" })
 const headerSelector = ".main-header"
 
 for (const dir of languageDirections) {
-  test.describe(`header-${dir}`, () => {
+  test.describe(dir, () => {
     breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
       test.beforeEach(async ({ page }) => {
         await preparePageForTests(page, breakpoint, { dismissFilter: false })

frontend/test/playwright/visual-regression/pages/pages-single-result.spec.ts

@@ -42,7 +42,7 @@ for (const mediaType of supportedMediaTypes) {
         // This will include the "Back to results" link.
         await openFirstResult(page, mediaType, dir)
         await expectSnapshot(
-          `${mediaType}-${dir}-from-search-results-with-additional-search-views`,
+          `${mediaType}-from-search-results-with-additional-search-views-${dir}`,
           page,
           { fullPage: true },
           { maxDiffPixelRatio: 0.01 }
@@ -65,7 +65,7 @@ for (const dir of languageDirections) {
       // Wait for the language select to hydrate.
       await sleep(500)
       await expectSnapshot(
-        `${dir}-full-page-report`,
+        `full-page-report-${dir}`,
         page,
         { fullPage: true },
         { maxDiffPixelRatio: undefined, maxDiffPixels: 2 }

frontend/test/playwright/visual-regression/pages/pages.spec.ts

@@ -79,7 +79,9 @@ test.describe("layout color is set correctly", () => {
       await page.waitForURL(/ar\/search/)
       await expect(getH1(page, "Cat")).toBeVisible()
 
-      expect(await page.screenshot()).toMatchSnapshot("search-page-rtl-lg.png")
+      expect(await page.screenshot()).toMatchSnapshot(
+        "search-page-rtl-lg-light.png"
+      )
     })
 
     test("change language on homepage and go to content page", async ({
@@ -97,7 +99,7 @@ test.describe("layout color is set correctly", () => {
       await page.mouse.move(100, 100)
 
       expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(
-        "about-ltr-lg.png",
+        "about-ltr-lg-light.png",
         { maxDiffPixelRatio: 0.01 }
       )
     })

frontend/test/playwright/visual-regression/pages/search-with-banners.spec.ts

@@ -19,6 +19,6 @@ breakpoints.describeEvery(({ breakpoint, expectSnapshot }) => {
   })
 
   test("page with all banners", async ({ page }) => {
-    await expectSnapshot(`page-with-all-banners`, page)
+    await expectSnapshot("page-with-all-banners", page)
   })
 })

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

@@ -17,7 +17,7 @@ export const expectSnapshot = async (
   locator: Locator | Page,
   options?: ExpectSnapshotOptions
 ) => {
-  const snapshotName = `${name}.png`
+  const snapshotName = `${name}-light.png`
   return expect(
     await locator.screenshot(options?.screenshotOptions)
   ).toMatchSnapshot(snapshotName, options?.snapshotOptions)