chore: recovery 2 (#5014) merge to 3.11 (#5175)

Co-authored-by: Alireza <ar.sedghi@gmail.com>
Co-authored-by: Dan Rukas <dan.rukas@gmail.com>
Co-authored-by: Tang Cheng <45505657+tctco@users.noreply.github.com>

tests/utils/checkForScreenshot.ts

@@ -1,28 +1,34 @@
 import { expect } from 'playwright-test-coverage';
 import { Locator, Page } from 'playwright';
 
-/**
- * @param page - The page to interact with
- * @param locator - The element to check for screenshot
- * @param screenshotPath - The path to save the screenshot
- * @param attempts - The number of attempts to check for screenshot
- * @param delay - The delay between attempts
- * @returns  True if the screenshot matches, otherwise throws an error
- */
-const checkForScreenshot = async (
-  page: Page,
-  locator: Locator | Page,
-  screenshotPath: string,
-  attempts = 10,
-  delay = 100
-) => {
+type CheckForScreenshotProps = {
+  page: Page;
+  locator: Locator | Page;
+  screenshotPath: string;
+  attempts?: number;
+  delay?: number;
+  maxDiffPixelRatio?: number;
+  threshold?: number;
+};
+
+const _checkForScreenshot = async (props: CheckForScreenshotProps) => {
+  const {
+    page,
+    locator,
+    screenshotPath,
+    attempts = 10,
+    delay = 500,
+    maxDiffPixelRatio = 0.02,
+    threshold = 0.05,
+  } = props;
+
   await page.waitForLoadState('networkidle');
 
   for (let i = 0; i < attempts; i++) {
     try {
       await expect(locator).toHaveScreenshot(screenshotPath, {
-        // 4% tolerance for screenshot comparison
-        maxDiffPixelRatio: 0.04,
+        maxDiffPixelRatio,
+        threshold,
       });
       return true;
     } catch (error) {
@@ -38,4 +44,36 @@ const checkForScreenshot = async (
   throw new Error('Screenshot comparison failed: loop exited without match or proper error');
 };
 
+/**
+ * Checks if a screenshot of a specific element matches the expected screenshot.
+ * It retries the check for a specified number of attempts with a delay between each attempt.
+ * By default, the number of attempts is 10 and the delay is 500 milliseconds which results in a maximum wait time of 5 seconds.
+ * Instead of sleeping idle prior to calling this function, simply adjust the attempts and delay parameters to achieve the desired wait time.
+ * @param pageOrProps - The page to interact with or an object containing page and other properties
+ * @param locator - The element to check for screenshot
+ * @param screenshotPath - The path to save the screenshot
+ * @param attempts - The number of attempts to check for screenshot
+ * @param delay - The delay between attempts
+ * @returns  True if the screenshot matches, otherwise throws an error
+ */
+const checkForScreenshot = async (
+  pageOrProps: Page | CheckForScreenshotProps,
+  locator?: Locator | Page,
+  screenshotPath?: string,
+  attempts?: number,
+  delay?: number
+) => {
+  if (typeof pageOrProps === 'object' && 'page' in pageOrProps) {
+    return await _checkForScreenshot(pageOrProps as CheckForScreenshotProps);
+  } else {
+    return await _checkForScreenshot({
+      page: pageOrProps as Page,
+      locator,
+      screenshotPath,
+      attempts,
+      delay,
+    });
+  }
+};
+
 export { checkForScreenshot };