✅ added authentication to test

.github/workflows/code-checks.yml

@@ -56,6 +56,10 @@ jobs:
         run: pnpm exec playwright test
         env:
           POSTGRES_URL: ${{ secrets.POSTGRES_URL }}
+          TEST_USER_EMAIL: ${{ secrets.TEST_USER_EMAIL }}
+          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD }}
+          AUTH_SECRET: ${{ secrets.AUTH_SECRET }}
+          AUTH_URL: ${{ secrets.AUTH_URL }}
       - uses: actions/upload-artifact@v4
         if: always()
         with:

app/ui/dashboard/nav-links.tsx

@@ -43,7 +43,7 @@ export default function NavLinks() {
           <Link
             key={link.name}
             href={link.href}
-            data-testid={`nav-link-${link.slug}`}
+            data-testid={`nav/link-${link.slug}`}
             className={clsx(
               'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
               {

app/ui/login-form.tsx

@@ -64,7 +64,11 @@ export default function LoginForm() {
             </div>
           </div>
         </div>
-        <Button className="mt-4 w-full" aria-disabled={isPending}>
+        <Button
+          className="mt-4 w-full"
+          aria-disabled={isPending}
+          data-testid="login/form/submit-btn"
+        >
           Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
         </Button>
         <div className="flex h-8 items-end space-x-1">

package.json

@@ -2,14 +2,15 @@
   "private": true,
   "scripts": {
     "build": "next build",
+    "check": "prettier --check \"app/**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
     "dev": "next dev",
-    "start": "next start",
+    "format": "prettier --write \"app/**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
     "lint": "next lint",
-    "pre-test": "next build && next start",
-    "test": "npx playwright test",
     "prepare": "husky",
-    "format": "prettier --write \"app/**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\"",
-    "check": "prettier --check \"app/**/*.{ts,tsx,js,jsx,md,mdx,css,yaml,yml}\""
+    "start": "next start",
+    "test": "npx playwright test",
+    "test-debug": "npx playwright test --headed --debug",
+    "test-prepare": "next build && next start"
   },
   "dependencies": {
     "@heroicons/react": "^2.1.4",

playwright.config.ts

@@ -26,10 +26,11 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.BASE_URL ?? 'http://127.0.0.1:3000',
+    baseURL: 'http://localhost:3000',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
+    storageState: 'storage-state.json',
   },
 
   /* Configure projects for major browsers */
@@ -72,7 +73,7 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'pnpm pre-test',
-    url: 'http://127.0.0.1:3000',
+    command: 'pnpm test-prepare',
+    url: 'http://localhost:3000',
   },
 });

storage-state.json

@@ -0,0 +1,35 @@
+{
+  "cookies": [
+    {
+      "name": "authjs.csrf-token",
+      "value": "dc5f444f87852a1b9ae983ca4a6d905c3ddf0116e15fa473eb479758593141db%7C19333ee6c60bd95ec32811a5096e9a0cf6f9bd6609b780328a827e9d308792f5",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "authjs.callback-url",
+      "value": "http%3A%2F%2Flocalhost%3A3000%2Flogin%3FcallbackUrl%3Dhttp%253A%252F%252Flocalhost%253A3000%252Fdashboard",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    },
+    {
+      "name": "authjs.session-token",
+      "value": "eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2Q0JDLUhTNTEyIiwia2lkIjoiZjR5YktMTFZwdHFXcU9HN29BQUJCTXdnLWlHYzc0NGhQMWI5dWhmbzVXbU1Gd2pfMU1VQjB6OVpobFlvUS15eE13dTJDbktpRHVFZzlObVZ2Q3JDX3cifQ..FOg_HzGLkkIfjCrSwkbvww.POI4v7AaecIxoXOO7QIedx1AJJCFVdn9VT4qrNKV7lPuI9yvW3fPNbdX_HOApjmkIZtTVxVCd0PDiWALtmA2_NlzSvnEZfTPKaEtBqTuNjyAY9QHWQEyfh-F5PtoPG0MGuma8cnqQ-dcdFlaL5pA3PRnQDde2gEERujYR3P0-M9pdKZDNwZNXssi6gzku0RjceDskxPmQ7EXBdgc32y1N96ifliJ9uvKDsdGPvEJgYU.Q_xfppQBWyiHYXL6BAdQ5QIE-h1eN3z8JyAcCseKkh4",
+      "domain": "localhost",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": false,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": []
+}

tests/navigation.spec.ts

@@ -1,10 +1,20 @@
 import { test, expect } from '@playwright/test';
+import dotenv from 'dotenv';
+
+// Load environment variables from .env file
+dotenv.config();
 
 test.describe('Navigation', () => {
-  test('should navigate to the invoices page', async ({ page }) => {
+  test.beforeEach(async ({ page }) => {
     await page.goto('/dashboard');
+    await page.fill('#email', process.env.TEST_USER_EMAIL ?? '');
+    await page.fill('#password', process.env.TEST_USER_PASSWORD ?? '');
+    await page.click('[data-testid="login/form/submit-btn"]');
+    await page.waitForNavigation();
+  });
 
-    await page.getByTestId('nav-link-invoices').click();
+  test('should navigate to the invoices page', async ({ page }) => {
+    await page.getByTestId('nav/link-invoices').click();
 
     await expect(page.locator('h1')).toContainText('Invoices');
   });