chore: Updated some of the code

Author: lamATnginx

.github/workflows/playwright.yml

@@ -40,15 +40,4 @@ jobs:
             with:
               name: test-results
               path: tests/test-results/
-              retention-days: 3
-          - name: Update the screenshots based on Ubuntu env on GH
-            id: test-visual-update
-            if: ${{ failure() && steps.test-visual.conclusion == 'failure' }}
-            run: make tests-update-screenshots
-          - name: Upload updated Playwright screenshots
-            uses: actions/upload-artifact@v4
-            if: ${{ failure() && steps.test-visual-update.conclusion == 'success' }}
-            with:
-                name: playwright-screenshots-updated
-                path: tests/src/__screenshots__/**/*.png
-                retention-days: 3
+              retention-days: 3

tests/playwright.config.js

@@ -17,10 +17,22 @@ export default defineConfig({
     timezoneId: 'America/Los_Angeles',
   },
   projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
     {
       name: 'firefox',
       use: { ...devices['Desktop Firefox'] },
     },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 5'] },
+    },
   ],
   webServer: {
     command: `cd ../exampleSite && hugo mod get && hugo --gc -e production && hugo serve --port ${PORT}`,
@@ -31,6 +43,7 @@ export default defineConfig({
     toHaveScreenshot: {
       pathTemplate:
         '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
+      maxDiffPixels: 10,
     },
   },
 });

tests/src/visual-regression.spec.js

@@ -12,11 +12,6 @@ test.describe('Testing old theme', () => {
       window.scrollTo(0, 0);
     });
     await page.waitForFunction(() => window.scrollY === 0);
-    await page.screenshot({
-      path: './test-results/example-site-snapshot.png',
-      fullPage: true,
-    });
-
     await expect(page).toHaveScreenshot('example-site-screenshot.png');
   });
 });