Make search page layout test less flaky

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

@@ -1,4 +1,4 @@
-import { expect, test } from "@playwright/test"
+import { expect, Page, test } from "@playwright/test"
 
 import breakpoints from "~~/test/playwright/utils/breakpoints"
 import { removeHiddenOverflow } from "~~/test/playwright/utils/page"
@@ -47,6 +47,13 @@ for (const contentPage of contentPages) {
   }
 }
 
+const cleanImageResults = async (page: Page) => {
+  await page.addStyleTag({
+    content: ".results-grid img { filter: brightness(0%); }",
+  })
+  await page.waitForTimeout(500)
+}
+
 test.describe("Layout color is set correctly", () => {
   breakpoints.describeLg(() => {
     test.use({
@@ -61,8 +68,13 @@ test.describe("Layout color is set correctly", () => {
       await page.getByRole("combobox", { name: "Language" }).selectOption("ar")
 
       await page.getByPlaceholder("البحث عن محتوى").fill("cat")
-      await page.getByRole("button", { name: "يبحث" }).click()
-      await page.waitForNavigation()
+
+      await Promise.all([
+        page.waitForNavigation(),
+        page.getByRole("button", { name: "يبحث" }).click(),
+      ])
+
+      await cleanImageResults(page)
 
       expect(await page.screenshot()).toMatchSnapshot("search-page-rtl-lg.png")
     })