improve screenshot utility

playwright.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: 8,
+  workers: process.env.CI ? 1 : undefined,
   snapshotPathTemplate:
     'tests/screenshots{/projectName}/{testFilePath}/{arg}{ext}',
   outputDir: './tests/test-results',

tests/utils/checkForScreenshot.ts

@@ -1,13 +1,31 @@
 import { expect } from '@playwright/test';
 
-const checkForScreenshot = async (locator, screenshotPath) => {
-  try {
-    await expect(locator).toHaveScreenshot(screenshotPath, {
-      maxDiffPixelRatio: 0.1,
-    });
-    return true;
-  } catch (error) {
-    throw new Error('Screenshot does not match.');
+/**
+ *
+ * @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 (
+  locator,
+  screenshotPath,
+  attempts = 10,
+  delay = 100
+) => {
+  for (let i = 1; i < attempts; i++) {
+    try {
+      await expect(locator).toHaveScreenshot(screenshotPath, {
+        maxDiffPixelRatio: 0.1,
+      });
+      return true;
+    } catch (error) {
+      if (i === attempts) {
+        throw new Error('Screenshot does not match.');
+      }
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
   }
 };
 

tests/utils/screenShotPaths.ts

@@ -1,3 +1,6 @@
+/**
+ * Paths to the screenshots of the tests.
+ */
 const screenShotPaths = {
   stackBasic: {
     viewport: 'viewport.png',

tests/utils/visitExample.ts

@@ -1,5 +1,10 @@
 import { Page } from '@playwright/test';
 
+/**
+ * Visit the example page
+ * @param page - The page to visit
+ * @param title - The title of the example page
+ */
 export async function visitExample(page: Page, title: string) {
   await page.goto('/');
   await page.click(`a:has-text("${title}")`);