feat: add Playwright for end-to-end testing and update configurations

Author: aXenDeveloper

.github/workflows/build-lint-test.yml

@@ -11,6 +11,7 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
+    timeout-minutes: 15
 
     steps:
       - name: Checkout
@@ -21,7 +22,7 @@ jobs:
       - uses: pnpm/action-setup@v4
         name: Install pnpm
         with:
-          version: 10.8.0
+          version: 10
 
       - name: Install Node.js
         uses: actions/setup-node@v4

apps/web/.gitignore

@@ -12,6 +12,8 @@
 
 # testing
 /coverage
+/playwright-report
+/test-results
 
 # next.js
 /.next/

apps/web/e2e/auth.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+
+// Generate random user data for test isolation
+function generateTestUser() {
+  const randomId = Math.floor(Math.random() * 1000000);
+  return {
+    name: `test_user_${randomId}`,
+    email: `test_user_${randomId}@example.com`,
+    password: `Password123!${randomId}`,
+  };
+}
+
+test.describe('Authentication', () => {
+  const testUser = generateTestUser();
+
+  test('should allow user registration', async ({ page }) => {
+    // Navigate to registration page
+    await page.goto('/register');
+
+    // Wait for the form to be visible
+    await expect(
+      page.getByRole('heading', { name: /register/i }),
+    ).toBeVisible();
+
+    // Fill out registration form
+    await page.getByLabel(/name/i).fill(testUser.name);
+    await page.getByLabel(/email/i).fill(testUser.email);
+    await page.getByLabel(/^password$/i).fill(testUser.password);
+
+    // Submit form
+    await page.locator('button[type="submit"]').click();
+
+    // Verify successful registration (redirect or success message)
+    // This might vary based on your app flow, adjust as needed
+    await expect(page).toHaveURL(/\/verify-email|\/dashboard/);
+  });
+
+  test('should allow user login', async ({ page }) => {
+    // Navigate to login page
+    await page.goto('/login');
+
+    // Wait for the form to be visible
+    await expect(page.getByRole('heading', { name: /login/i })).toBeVisible();
+
+    // Fill out login form with previously registered credentials
+    await page.getByLabel(/email/i).fill(testUser.email);
+    await page.getByLabel(/password/i).fill(testUser.password);
+
+    // Submit form
+    await page.locator('button[type="submit"]').click();
+
+    await expect(page.getByText('Start Your Journey!')).toBeVisible();
+  });
+});

apps/web/e2e/homepage.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Homepage', () => {
+  test('should load successfully', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveTitle(/VitNode/);
+    await expect(page.getByText('Start Your Journey!')).toBeVisible();
+  });
+});

apps/web/package.json

@@ -13,7 +13,11 @@
     "build": "next build --turbopack",
     "start": "next start",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
     "@hono/zod-openapi": "^0.19.6",
@@ -37,6 +41,7 @@
     "zod": "^3.24.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
     "@tailwindcss/postcss": "^4.1.4",
     "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",

apps/web/playwright.config.ts

@@ -0,0 +1,57 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  /* Maximum time one test can run for */
+  timeout: 30 * 1000,
+  /* Fail the build on CI if test failures */
+  reporter: process.env.CI ? 'github' : 'html',
+  /* Shared settings for all projects */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')` */
+    baseURL: process.env.TEST_BASE_URL ?? 'http://localhost:3000',
+    /* Collect trace when retrying the failed test */
+    trace: 'on-first-retry',
+    /* Take screenshots on failure */
+    screenshot: 'only-on-failure',
+    /* Record video on failure */
+    video: 'on-first-retry',
+  },
+  /* Configure projects for different browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+    /* Test against mobile viewports. */
+    {
+      name: 'mobile-chrome',
+      use: { ...devices['Pixel 7'] },
+    },
+    {
+      name: 'mobile-safari',
+      use: { ...devices['iPhone 14'] },
+    },
+  ],
+  /* Run web server for the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+  },
+});

apps/web/src/plugins/core/langs/en.json

@@ -55,7 +55,7 @@
       "sign_up": {
         "desc": "Hello there! Create your account to get started.",
         "already_have_account": "You already have an account? <link>Sign in</link>.",
-        "submit": "Sign up",
+        "submit": "Register",
         "username": {
           "label": "Username",
           "min_length": "Username must be at least 3 characters long.",
@@ -106,7 +106,7 @@
             "desc": "The email address or password was incorrect. Please try again (make sure your caps lock is off)."
           }
         },
-        "submit": "Sign in"
+        "submit": "Login"
       }
     }
   },

package.json

@@ -11,7 +11,8 @@
     "dev": "pnpm build:scripts && turbo dev",
     "lint": "turbo lint",
     "lint:fix": "turbo lint:fix",
-    "test": "turbo test"
+    "test": "turbo test",
+    "test:e2e": "turbo test:e2e"
   },
   "devDependencies": {
     "eslint-config-typescript-vitnode": "workspace:*",