refactor(e2e): reuse login helper and update test cases

.github/workflows/ui-end2end.yml

@@ -0,0 +1,82 @@
+name: UI - E2E Tests
+
+on:
+  pull_request:
+    branches:
+      - master
+      - "v5.*"
+    paths:
+      - 'ui/**'
+
+env:
+# Temporary secret for CI test runs only – replace with GitHub Secret later
+  AUTH_SECRET: "N/c6mnaS5+SWq81+819OrzQZlmx1Vxtp/orjttJSmw8="
+  API_BASE_URL: "http://localhost:8080/api/v1"
+  SERVICES_TO_START: "api-dev postgres valkey worker-beat worker-dev"
+  DOCKER_COMPOSE_FILE: "docker-compose-dev.yml"
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+          cache-dependency-path: './ui/package-lock.json'
+
+      # - name: Cache Playwright Browsers
+      #   uses: actions/cache@v4
+      #   with:
+      #     path: ~/.cache/ms-playwright
+      #     key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+      #     restore-keys: |
+      #       playwright-${{ runner.os }}-
+
+      - name: Install dependencies
+        run: npm ci
+        working-directory: ./ui
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+        working-directory: ./ui
+
+      - name: Set up Docker Compose
+        uses: docker/setup-compose-action@364cc21a5de5b1ee4a7f5f9d3fa374ce0ccde746   #v1.2.0
+      - name: Start Docker Compose
+        run: docker compose -f ${DOCKER_COMPOSE_FILE} up -d ${SERVICES_TO_START}
+
+      - name: Wait for API to be ready
+        run: |
+          for i in {1..30}; do
+            if curl -s http://localhost:8000/api/v1; then
+              echo "API is up!"
+              break
+            fi
+            echo "Waiting for API..."
+            sleep 5
+          done
+      - name: Run Playwright tests
+        run: npx playwright test
+        working-directory: ./ui
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: ./ui/playwright-report
+
+      - name: Upload Playwright videos
+        uses: actions/upload-artifact@v4
+        with:
+          name: test-videos
+          path: ./ui/test-results/**/*.webm
+
+      - name: Docker Compose Down
+        if: always()
+        run: docker compose -f ${DOCKER_COMPOSE_FILE} down

ui/.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright test artifacts
+playwright-report/
+test-results/

ui/CHANGELOG.md

@@ -21,6 +21,7 @@ All notable changes to the **Prowler UI** are documented in this file.
 - Improve `Scan ID` filter by adding more context and enhancing the UI/UX [(#7979)](https://github.com/prowler-cloud/prowler/pull/7979)
 - Lighthouse chat interface [(#7878)](https://github.com/prowler-cloud/prowler/pull/7878)
 - Google Tag Manager integration [(#8058)](https://github.com/prowler-cloud/prowler/pull/8058)
+- Added initial Playwright configuration and sample test [(#8081)](https://github.com/prowler-cloud/prowler/pull/8081)
 
 ### 🔄 Changed
 

ui/package-lock.json

@@ -62,6 +62,7 @@
       },
       "devDependencies": {
         "@iconify/react": "^5.2.0",
+        "@playwright/test": "^1.53.1",
         "@types/bcryptjs": "^2.4.6",
         "@types/node": "20.5.7",
         "@types/react": "18.3.3",
@@ -70,6 +71,7 @@
         "@typescript-eslint/eslint-plugin": "^7.10.0",
         "@typescript-eslint/parser": "^7.10.0",
         "autoprefixer": "10.4.19",
+        "dotenv": "^16.5.0",
         "eslint": "^8.56.0",
         "eslint-config-next": "^14.2.23",
         "eslint-config-prettier": "^10.0.1",
@@ -4716,6 +4718,22 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.53.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.53.1.tgz",
+      "integrity": "sha512-Z4c23LHV0muZ8hfv4jw6HngPJkbbtZxTkxPNIg7cJcTc9C28N/p2q7g3JZS2SiKBBHJ3uM1dgDye66bB7LEk5w==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.53.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
@@ -10079,6 +10097,19 @@
         "csstype": "^3.0.2"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.5.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.5.0.tgz",
+      "integrity": "sha512-m/C+AwOAr9/W1UOIZUo232ejMNnJAJtYQjUbHoNTBNTJSvqzzDh7vnrei3o3r3m9blf6ZoDkvcw0VmozNRFJxg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -11373,6 +11404,20 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -14626,6 +14671,38 @@
         "node": ">= 6"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.53.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.53.1.tgz",
+      "integrity": "sha512-LJ13YLr/ocweuwxyGf1XNFWIU4M2zUSo149Qbp+A4cpwDjsxRPj7k6H25LBrEHiEwxvRbD8HdwvQmRMSvquhYw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.53.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.53.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.53.1.tgz",
+      "integrity": "sha512-Z46Oq7tLAyT0lGoFx4DOuB1IA9D1TPj0QkYxpPVUnGDqHHvDpCftu1J2hM2PiWsNMoZh8+LQaarAWcDfPBc6zg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",

ui/package.json

@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@iconify/react": "^5.2.0",
+    "@playwright/test": "^1.53.1",
     "@types/bcryptjs": "^2.4.6",
     "@types/node": "20.5.7",
     "@types/react": "18.3.3",
@@ -62,6 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^7.10.0",
     "@typescript-eslint/parser": "^7.10.0",
     "autoprefixer": "10.4.19",
+    "dotenv": "^16.5.0",
     "eslint": "^8.56.0",
     "eslint-config-next": "^14.2.23",
     "eslint-config-prettier": "^10.0.1",
@@ -96,7 +98,8 @@
     "lint:fix": "eslint . --ext .ts,.tsx -c .eslintrc.cjs --fix",
     "format:check": "./node_modules/.bin/prettier --check ./app",
     "format:write": "./node_modules/.bin/prettier --config .prettierrc.json --write ./app",
-    "prepare": "husky"
+    "prepare": "husky",
+    "test:e2e": "npx playwright test && npx playwright show-report"
   },
   "overrides": {
     "@react-types/shared": "3.26.0"

ui/playwright.config.ts

@@ -0,0 +1,70 @@
+import { defineConfig, devices } from "@playwright/test";
+import * as dotenv from "dotenv";
+dotenv.config();
+
+const isLocal = process.env.LOCAL === "true";
+
+export default defineConfig({
+  timeout: 90 * 1000,
+  testDir: "./tests/e2e",
+  fullyParallel: false,
+  forbidOnly: !isLocal,
+  retries: isLocal ? 0 : 2,
+  workers: isLocal ? undefined : 1,
+  reporter: "html",
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+    navigationTimeout: 60 * 1000,
+  },
+
+  /* Configure projects for major 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 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: isLocal
+    ? undefined // Skip web server in local runs
+    : {
+        command: "npm run dev",
+        url: "http://localhost:3000",
+        reuseExistingServer: true,
+        timeout: 120 * 1000, // wait up to 2 minutes for frontend to boot
+      },
+});

ui/tests/e2e/README.md

@@ -0,0 +1,24 @@
+# Playwright E2E Testing
+
+## 📦 Installation
+
+Playwright is already set up. To install dependencies:
+
+```bash
+cd ui
+npm install
+
+# Run all tests (headless)
+npm run test:e2e
+
+# Run specific file (headless)
+npx playwright test tests/e2e/root.spec.ts
+
+# Run all tests with UI (headed mode)
+npx playwright test --headed
+
+# Run specific file with UI (headed mode)
+npx playwright test tests/e2e/root.spec.ts --headed
+
+# Open the HTML report from last test run
+npx playwright show-report

ui/tests/e2e/auth/authentication.spec.ts

@@ -0,0 +1,69 @@
+import { test, expect, request, Page } from '@playwright/test';
+
+// Test credentials
+const testEmail = 'test@gmail.com';
+const testPassword = 'Testt@123456';
+
+// Helper login function
+const login = async (page: Page, email: string, password: string) => {
+    await page.goto('/sign-in');
+    await page.fill('input[name="email"]', email);
+    await page.fill('input[name="password"]', password);
+    await page.getByRole('button', { name: /log in/i }).click();
+};
+
+test.beforeAll(async () => {
+    const apiContext = await request.newContext();
+    const response = await apiContext.post(`${process.env.API_BASE_URL}/users`, {
+        headers: {
+            'Content-Type': 'application/vnd.api+json',
+            'Accept': 'application/vnd.api+json',
+        },
+        data: {
+            data: {
+                type: 'users',
+                attributes: {
+                    name: 'testuser',
+                    email: testEmail,
+                    password: testPassword,
+                    company_name: 'test',
+                },
+            },
+        },
+    });
+
+    if (!response.ok()) {
+        console.warn(`User creation may have failed: ${response.status()} - ${await response.text()}`);
+    }
+
+    await apiContext.dispose();
+});
+
+// Test invalid login
+test('should show error for invalid credentials', async ({ page }) => {
+    await login(page, 'wrong@gmail.com', 'WrongPassword123');
+    await page.waitForTimeout(7000);
+    await expect(page.getByText(/invalid email or password/i)).toBeVisible({ timeout: 10000 });
+});
+
+// Test valid login and redirection
+test('should sign in successfully', async ({ page }) => {
+    await login(page, testEmail, testPassword);
+    await page.waitForTimeout(7000);
+    await page.waitForURL((url) => !url.pathname.includes('sign-in'), {
+        timeout: 15000,
+    });
+});
+
+// Test session persistence after reload
+test('should persist session after login', async ({ page }) => {
+    await login(page, testEmail, testPassword);
+    await page.waitForTimeout(7000);
+    await page.waitForURL((url) => !url.pathname.includes('sign-in'), { timeout: 15000 });
+    await page.reload();
+
+    await expect(page.getByRole('button', { name: /sign out/i })).toBeVisible();
+
+    await page.goto("/findings")
+    await expect(page.getByText(/Browse all findings/i).first()).toBeVisible({ timeout: 10000 });
+});

ui/tests/e2e/root.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from '@playwright/test';
+
+test('Unauthenticated users are redirected to sign-in and can navigate to sign-up', async ({ page }) => {
+    await page.goto('/');
+    await expect(page).toHaveURL(/\/sign-in/);
+    await expect(page.getByText('Sign In')).toBeVisible();
+});