┌─────────────────────────────────────────────────────────┐
│                   MONOREPO ROOT                         │
│  playwright.config.ts  ·  package.json  ·  .env         │
├────────────────────────┬────────────────────────────────┤
│       CLIENT           │           SERVER               │
│  React 19 + TypeScript │   Express + MongoDB            │
│  Vite + Tailwind CSS   │   Mongoose + JWT + bcrypt      │
│  Port: 5173            │   Port: 5005                   │
│                        │                                │
│  /src/pages/           │  /routes/auth.routes.js        │
│    Home.tsx            │  /routes/booking.routes.js     │
│    Hotels.tsx          │  /routes/user.routes.js        │
│    Vehicles.tsx        │  /routes/test.routes.js        │
│    AuthPage.tsx        │                                │
│    Dashboard.tsx       │  /models/ User / Hotel /       │
│                        │           Vehicle              │
│  /src/components/      │                                │
│    Navbar.tsx          │  /middleware/ auth / validate  │
│    ChatAssistant.tsx   │             / errorHandler     │
│                        │                                │
│  /src/context/         │  MongoDB                       │
│    AuthContext         │  smart-travel      (dev)       │
│    AuthProvider        │  smart-travel-test (test)      │
│    ThemeContext        │                                │
│    ThemeProvider       │                                │
├────────────────────────┴────────────────────────────────┤
│                   PLAYWRIGHT TESTS                      │
│  tests/                                                 │
│    login.test.ts           ← Auth flows                 │
│    booking.test.ts         ← Hotel & vehicle booking    │
│    api-mock.test.ts        ← Network interception       │
│    ui-validation.test.ts   ← UI & responsiveness        │
│    fixtures.ts             ← Custom test fixtures       │
│    test-data.ts            ← User creation & cleanup    │
└─────────────────────────────────────────────────────────┘

npx playwright install --with-deps chromium

git clone https://github.com/theShihamAhamed/Smart-Travel_Playwright_PlayGround.git
cd Smart-Travel_Playwright_PlayGround

npm run install:all

npm install --legacy-peer-deps
cd client && npm install --legacy-peer-deps
cd ../server && npm install --legacy-peer-deps

cp .env.example .env
cp client/.env.example client/.env
cp server/.env.example server/.env

copy .env.example .env
copy client\.env.example client\.env
copy server\.env.example server\.env

Copy-Item .env.example .env
Copy-Item client\.env.example client\.env
Copy-Item server\.env.example server\.env

# URL Playwright navigates to in browser
PLAYWRIGHT_BASE_URL=http://localhost:5173

# URL used inside test-data.ts for direct API calls
API_BASE_URL=http://localhost:5005/api

# Separate database used only during Playwright runs
MONGODB_URI=mongodb://127.0.0.1:27017/smart-travel-test

# Must match the server's JWT_SECRET
JWT_SECRET=replace-with-a-local-secret

# Forwarded to the test server for CORS allow-list
CLIENT_URL=http://localhost:5173
CORS_ORIGIN=http://localhost:5173,http://127.0.0.1:5173

PORT=5005
MONGODB_URI=mongodb://127.0.0.1:27017/smart-travel
JWT_SECRET=replace-with-a-local-secret

# Allowed origins for CORS (comma-separated)
CLIENT_URL=http://localhost:5173
CORS_ORIGIN=http://localhost:5173,http://127.0.0.1:5173

# Set to false to skip demo user seeding
SEED_DEMO_USER=true

VITE_API_BASE_URL=http://localhost:5005/api

npm run dev

# Terminal 1 — Backend
npm run dev --prefix server

# Terminal 2 — Frontend
npm run dev --prefix client

# Build the React app
npm run build --prefix client

# Start the backend in production mode
npm run start --prefix server

# Lint the frontend
npm run lint --prefix client

# Lint the backend
npm run lint --prefix server

npx playwright test
     │
     ├── Starts: npm run start --prefix server  (port 5005)
     │             waits for: http://127.0.0.1:5005/api/health
     │
     ├── Starts: npm run dev --prefix client    (port 5173)
     │             waits for: http://127.0.0.1:5173
     │
     └── Runs all test files in /tests/

// Extend the base test with custom fixtures
export const test = base.extend<MyFixtures>({

  // testUser: Creates a real test user before the test and deletes it after
  testUser: async ({ request }, use, testInfo) => {
    const user = makeTestUser(testInfo);
    await createTestUser(request, user);
    try {
      await use(user);         // <-- test runs here
    } finally {
      await deleteTestUser(request, user.email);   // guaranteed cleanup
    }
  },

  // loggedInPage: Returns a page that is already logged in as testUser
  loggedInPage: async ({ page, testUser }, use) => {
    await page.goto('/login');
    await page.getByTestId('auth-email-input').fill(testUser.email);
    await page.getByTestId('auth-password-input').fill(testUser.password);
    await page.getByTestId('auth-submit-btn').click();
    await expect(page).toHaveURL('/dashboard');
    await use(page);           // <-- test runs here with authenticated session
  },
});

import { test, expect } from './fixtures';

// Request loggedInPage — Playwright automatically:
// 1. Creates a real user in the DB
// 2. Navigates to /login and performs login
// 3. Hands the authenticated page to the test
// 4. Cleans up the user after the test finishes
test('User can book a hotel', async ({ loggedInPage }) => {
  await loggedInPage.goto('/hotels');
  // ...
});

pw-{sanitized-test-title}-{workerIndex}-{timestamp}-{random}@playwright.test

npx playwright test
# or via the root script
npm test

npx playwright test tests/login.test.ts
npx playwright test tests/booking.test.ts
npx playwright test tests/api-mock.test.ts
npx playwright test tests/ui-validation.test.ts

npx playwright test --grep "login"
npx playwright test --grep "mobile"
npx playwright test --grep "hotel"

npx playwright test --headed

npx playwright test --ui

npx playwright show-report

# Run a single test in debug mode (pause at each step in browser)
npx playwright test tests/login.test.ts --debug

# Run with Playwright Inspector (step through actions manually)
PWDEBUG=1 npx playwright test

# Run with verbose console output
npx playwright test --reporter=list

# Print all collected test names without running them
npx playwright test --list

# Run only on a specific browser (chromium is configured by default)
npx playwright test --project=chromium

# Simulate a specific device
npx playwright test --device="iPhone 13"

# Run in slow motion (useful for visual debugging)
npx playwright test --headed --slow-mo=500

# Run with a single worker (serial execution)
npx playwright test --workers=1

# Run with maximum parallelism
npx playwright test --workers=4

# Limit to only failed tests from the previous run
npx playwright test --last-failed

# Retry failed tests up to 3 times
npx playwright test --retries=3

# Output results as a JSON file
npx playwright test --reporter=json > results.json

# Output results in JUnit XML format (for CI integration)
npx playwright test --reporter=junit > results.xml

# Use dot reporter (compact, one dot per test)
npx playwright test --reporter=dot

# Use multiple reporters at once
npx playwright test --reporter=list,html

# Record user interactions and generate test code automatically
npx playwright codegen http://localhost:5173

# Codegen with a specific device
npx playwright codegen --device="Pixel 5" http://localhost:5173

# Codegen and save directly to a file
npx playwright codegen --output=tests/new-test.ts http://localhost:5173

# Capture a screenshot from a specific test
# (use page.screenshot() inside a test, or configure in playwright.config.ts)

# Open a recorded trace file in the Trace Viewer
npx playwright show-trace path/to/trace.zip

# Install all browsers
npx playwright install

# Install only Chromium
npx playwright install chromium

# Install Chromium along with system dependencies (required on CI)
npx playwright install --with-deps chromium

# List installed browser versions
npx playwright --version

# Create a new Playwright project from scratch (interactive wizard)
npm init playwright@latest

# Generate a new test file template in an existing project
npx playwright test --init

export default defineConfig({
  testDir: './tests',          // Location of test files
  fullyParallel: true,         // Run tests within files in parallel
  forbidOnly: !!process.env.CI,// Fail CI if test.only is left in code
  retries: process.env.CI ? 2 : 0,  // 2 retries on CI, 0 locally
  workers: process.env.CI ? 1 : undefined,  // Serial on CI, parallel locally

  reporter: [['html'], ['list']],  // HTML report + live list output

  use: {
    baseURL: 'http://127.0.0.1:5173',  // All page.goto('/path') resolve here
    trace: 'on-first-retry',           // Capture trace on first test failure
    screenshot: 'only-on-failure',     // Screenshot captured on failure
    video: 'on-first-retry',           // Video recorded on first retry
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    // Firefox and Safari are commented out — uncomment to enable
  ],

  // Auto-start backend and frontend before tests
  webServer: [
    {
      command: 'npm run start --prefix server',
      url: 'http://127.0.0.1:5005/api/health', // Waits for health check
      reuseExistingServer: !isCI,  // Reuse if already running locally
      env: { NODE_ENV: 'test', PORT: '5005', MONGODB_URI: '...', JWT_SECRET: '...' }
    },
    {
      command: 'npm run dev --prefix client -- --host 127.0.0.1 --port 5173',
      url: 'http://127.0.0.1:5173',
      reuseExistingServer: !isCI,
    }
  ],
});

{
  name:     String,    // required
  email:    String,    // required, unique, stored lowercase
  password: String,    // required, bcrypt hash (never returned in API responses)
  role:     String,    // default: 'user'
  bookings: [          // embedded array — no separate bookings collection
    {
      hotel:   String, // hotel name at time of booking
      vehicle: String, // vehicle name at time of booking
      date:    Date
    }
  ],
  createdAt: Date,     // auto (timestamps: true)
  updatedAt: Date      // auto (timestamps: true)
}

{
  name:        String,  // required
  location:    String,  // required
  price:       Number,  // required (USD per night)
  image:       String,  // Unsplash URL
  rating:      Number,  // 0-5
  description: String
}

{
  name:          String,  // required (e.g. "Toyota Camry")
  type:          String,  // required (e.g. "Car", "SUV", "Bike")
  price_per_day: Number,  // required (USD)
  image:         String,  // Unsplash URL
  available:     Boolean  // default: true
}

1. Checkout repository
2. Setup Node.js 20 (with npm cache for root, client, and server lock files)
3. Start MongoDB 7 service container on port 27017 (with healthcheck)
4. npm ci --legacy-peer-deps      (root)
5. npm ci --legacy-peer-deps      (client)
6. npm ci --legacy-peer-deps      (server)
7. npm run lint                   (client)
8. npm run lint                   (server)
9. npm run build                  (client) — validates TypeScript compilation
10. npx playwright install --with-deps chromium
11. npx playwright test            (full suite, Chromium only, 1 worker)
12. Upload playwright-report/ as artifact (retained 30 days)

CI: true
NODE_ENV: test
MONGODB_URI: mongodb://127.0.0.1:27017/smart-travel-test
JWT_SECRET: smart-travel-ci-test-secret
PORT: 5005
API_BASE_URL: http://127.0.0.1:5005/api
VITE_API_BASE_URL: http://127.0.0.1:5005/api
PLAYWRIGHT_BASE_URL: http://127.0.0.1:5173

react  typescript  vite  tailwindcss  framer-motion  express  mongodb  mongoose
jwt  bcrypt  playwright  e2e-testing  api-mocking  network-interception
custom-fixtures  test-isolation  github-actions  ci-cd  full-stack  travel-booking