Feature -- Adding Playwright Report Link

.github/workflows/chromatic.yml

@@ -1,6 +1,12 @@
-name: "Chromatic"
+name: 'Chromatic'
 
-on: push
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   playwright:
@@ -40,8 +46,9 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - name: Install dependencies
-         # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
+      - name:
+          Install dependencies
+          # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
         run: yarn install
       - name: Download Playwright test results
         uses: actions/download-artifact@v4

package.json

@@ -10,7 +10,7 @@
     "test": "playwright test",
     "test:ui": "playwright test --ui",
     "test:playwright": "playwright test --reporter=html",
-    "deploy:report": "npm run test:playwright && cp -r playwright-report/* public/playwright-report/ && vercel --prod"
+    "deploy:report": "npm run test:playwright && cp -r playwright-report/* /public/playwright-report/ && vercel --prod"
   },
   "dependencies": {
     "@axe-core/playwright": "^4.9.1",

playwright.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
 
     baseURL:
       process.env.PLAYWRIGHT_BASE_URL ||
-      'https://playwright-testing-tau.vercel.app' ||
+      'https://playwright-testing-website.vercel.app' ||
       'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */

src/components/Navigation/Navigation.tsx

@@ -30,6 +30,17 @@ export default function Navigation() {
           Contact
         </a>
       </li>
+      <li>
+        <a
+          data-testid="playwright-report"
+          className={styles.link}
+          href="/playwright-report"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Playwright Report
+        </a>
+      </li>
     </ul>
   );
 }