Point root playwright.config.ts to Playwright submodule tests folder

Author: workcontrolgit

playwright.config.ts

@@ -1,79 +1,135 @@
-import { defineConfig, devices } from '@playwright/test';
-
 /**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
+ * Root Playwright Configuration
+ *
+ * Delegates to the full test configuration in the Playwright submodule:
+ *   Tests/AngularNetTutorial-Playwright/
+ *
+ * Running `npx playwright test` from the repo root uses this config,
+ * which points testDir at the submodule's tests/ folder and imports
+ * all shared settings (timeouts, viewports, reporters, projects) from
+ * the submodule config.
+ *
+ * To run from the submodule directly (recommended for development):
+ *   cd Tests/AngularNetTutorial-Playwright
+ *   npx playwright test
+ *
+ * To run from the repo root (CI / convenience):
+ *   npx playwright test
+ *   npx playwright test --project=screenshots
+ *   npx playwright test --project=smoke
  */
-// import dotenv from 'dotenv';
-// import path from 'path';
-// dotenv.config({ path: path.resolve(__dirname, '.env') });
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
+import { defineConfig, devices } from '@playwright/test';
+import { APP_URLS, TIMEOUTS, VIEWPORTS } from './Tests/AngularNetTutorial-Playwright/config/test-config';
+
 export default defineConfig({
-  testDir: './e2e',
-  /* Run tests in files in parallel */
+  /* Point at the submodule's test folder */
+  testDir: './Tests/AngularNetTutorial-Playwright/tests',
+
+  timeout: TIMEOUTS.standard,
+  expect: {
+    timeout: TIMEOUTS.short,
+  },
+
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
-  /* 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: 'http://localhost:3000',
 
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+  reporter: [
+    ['html', { outputFolder: 'Tests/AngularNetTutorial-Playwright/playwright-report', open: 'never' }],
+    ['json', { outputFile: 'Tests/AngularNetTutorial-Playwright/test-results/results.json' }],
+    ['junit', { outputFile: 'Tests/AngularNetTutorial-Playwright/test-results/junit.xml' }],
+    ['list'],
+  ],
+
+  use: {
+    baseURL: APP_URLS.angular,
     trace: 'on-first-retry',
+    video: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    viewport: VIEWPORTS.laptop,
+    ignoreHTTPSErrors: true,
+    actionTimeout: 10000,
   },
 
-  /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/,
+    },
+
+    // Smoke Tests — critical path only (used in CI)
+    {
+      name: 'smoke',
+      testMatch: /.*smoke\.spec\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: VIEWPORTS.laptop,
+      },
+      dependencies: ['setup'],
+    },
+
+    // E2E Browser Tests
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: VIEWPORTS.laptop,
+        launchOptions: {
+          args: ['--enable-precise-memory-info', '--disable-animations'],
+        },
+      },
+      dependencies: ['setup'],
     },
 
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: {
+        ...devices['Desktop Firefox'],
+        viewport: VIEWPORTS.laptop,
+      },
+      dependencies: ['setup'],
     },
 
     {
       name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      use: {
+        ...devices['Desktop Safari'],
+        viewport: VIEWPORTS.laptop,
+      },
+      dependencies: ['setup'],
     },
 
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
+    // API Integration Tests
+    {
+      name: 'api',
+      testMatch: /Tests\/AngularNetTutorial-Playwright\/tests\/api\/.*\.spec\.ts/,
+      testIgnore: [
+        /tests\/api\/auth-api\.spec\.ts/,
+        /tests\/api\/cache-api\.spec\.ts/,
+        /tests\/api\/departments-api\.spec\.ts/,
+        /tests\/api\/employees-api\.spec\.ts/,
+      ],
+      use: {
+        baseURL: APP_URLS.api,
+        extraHTTPHeaders: { Accept: 'application/json' },
+      },
+    },
 
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
+    // Blog Screenshots — captures key UI states for blog posts and documentation
+    {
+      name: 'screenshots',
+      testMatch: /Tests\/AngularNetTutorial-Playwright\/tests\/screenshots\/.*\.spec\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        viewport: VIEWPORTS.laptop,
+        video: 'off',
+        screenshot: 'off',
+        launchOptions: {
+          slowMo: 150,
+        },
+      },
+    },
   ],
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://localhost:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
 });