fix: Fixed job to install hugo

Author: lamATnginx

.github/workflows/playwright.yml

@@ -19,19 +19,36 @@ jobs:
             uses: actions/checkout@v3
           - name: Install dependencies
             run: cd tests && npm ci
+          - name: Setup Hugo
+            uses: peaceiris/actions-hugo@75d2e84710de30f6ff7268e08f310b60ef14033f # v3.0.0
+            with:
+                hugo-version: "0.134.2"
+                extended: true
           - name: Install Playwright browsers
             run: npx playwright install --with-deps
           - name: Run Playwright tests
+            id: test-visual
             run: make tests
           - uses: actions/upload-artifact@v4
-            if: ${{ !cancelled() }}
+            if: ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
             with:
               name: playwright-report
               path: tests/playwright-report/
-              retention-days: 30
+              retention-days: 3
           - uses: actions/upload-artifact@v4
-            if: ${{ !cancelled() }}
+            if:  ${{ !cancelled() && failure() && steps.test-visual.conclusion == 'failure' }}
             with:
               name: test-results
               path: tests/test-results/
-              retention-days: 30
+              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

Makefile

@@ -6,16 +6,17 @@ WRITE_FLAG := --write
 list help::
 	$(info Available Make targets:)
 	@echo "<COMMON>"
-	@echo "		list | help:  		Print these available make targets"
+	@echo "				 list | help:  		Print these available make targets"
 	@echo "<LINTING AND FORMATTING>"
-	@echo "		biome-format: 		Runs the biome formatter."
-	@echo "		  biome-lint: 		Runs the biome linter."
-	@echo "		   biome-all:		Runs both the lint and formatting commands."
+	@echo "				biome-format: 		Runs the biome formatter."
+	@echo "				  biome-lint: 		Runs the biome linter."
+	@echo "		   		   biome-all:		Runs both the lint and formatting commands."
 	@echo "  (Set BIOME_ARGS to add additional arguments to biome command (ex: make biome-all BIOME_ARGS=write))"
 	@echo "<PRE-COMMIT>"
-	@echo "	setup-pre-commit: 		Sets up pre-commit (assuming it is installed)"
+	@echo "			    setup-pre-commit:		Sets up pre-commit (assuming it is installed)"
 	@echo "<PLAYWRIGHT TESTS>"
-	@echo "		     	test: 		Runs playwright against the old theme."
+	@echo "		     			test: 		Runs playwright against the old theme."
+	@echo "		    tests-update-screenshots:		Runs playwright against the old theme."
 
 .PHONY: biome-format biome-lint biome-all setup-pre-commit tests
 FLAG :=
@@ -41,4 +42,6 @@ setup-pre-commit:
 	fi
 
 tests:
-	cd tests && npx playwright test
+	cd tests && npx playwright test
+tests-update-screenshots:
+	cd tests && npx playwright test --update-snapshots

tests/playwright.config.js

@@ -14,6 +14,7 @@ export default defineConfig({
     screenshots: 'only-on-failure',
     video: 'retain-on-failure',
     trace: 'on-first-retry',
+    timezoneId: 'America/Los_Angeles',
   },
   projects: [
     {
@@ -28,10 +29,6 @@ export default defineConfig({
       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}`,

tests/src/visual-regression.spec.js

@@ -9,8 +9,9 @@ test.describe('Testing old theme', () => {
     await page.evaluate(() => {
       // switch to old theme
       useNewTheme(false);
+      window.scrollTo(0, 0);
     });
-    await page.waitForTimeout(500);
+    await page.waitForFunction(() => window.scrollY === 0);
     await page.screenshot({
       path: './test-results/example-site-snapshot.png',
       fullPage: true,