feat(e2e): align Playwright versions and optimize pipeline configuration

.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 cc-test-reporter
 coverage
 playwright-report
+playwright/.auth
 test-results
 
 # Storybook artifacts

.tekton/sources-ui-pull-request.yaml

@@ -40,11 +40,17 @@ spec:
       npm install
       npm run lint
       npm test -- --runInBand --no-cache
+  # Workspace setup script (runs before E2E tests)
+  - name: workspace-setup-script
+    value: |
+      #!/bin/bash
+      set -ex
+      npm ci
   # E2E testing configuration
   - name: e2e-app-port
     value: "8000"
   - name: e2e-playwright-image
-    value: "mcr.microsoft.com/playwright:v1.58.2-jammy"
+    value: "mcr.microsoft.com/playwright:v1.60.0-jammy"
   # Application startup script (Caddy serves app assets)
   - name: run-app-script
     value: |
@@ -63,7 +69,6 @@ spec:
       timeout 120s bash -c 'until curl -k -s -m 5 https://stage.foo.redhat.com:1337 > /dev/null 2>&1; do sleep 5; done'
       echo "Proxy ready!"
 
-      npm run playwright install --with-deps chromium
       npm run playwright -- test
   - name: e2e-credentials-secret
     value: sources-ui-credentials-secret

package.json

@@ -49,8 +49,9 @@
     "@babel/preset-env": "7.28.6",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@playwright/test": "^1.56.1",
+    "@playwright/test": "^1.60.0",
     "@redhat-cloud-services/frontend-components-config": "^6.8.3",
+    "@redhat-cloud-services/playwright-test-auth": "^0.0.2",
     "@redhat-cloud-services/tsc-transform-imports": "^1.0.37",
     "@storybook/addon-docs": "^9.1.19",
     "@storybook/addon-webpack5-compiler-swc": "^3.0.0",
@@ -74,6 +75,7 @@
     "msw": "^2.12.10",
     "msw-storybook-addon": "^2.0.6",
     "npm-run-all2": "^8.0.4",
+    "playwright": "^1.60.0",
     "prettier": "^3.8.0",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.5.5",

playwright.config.js

@@ -5,12 +5,24 @@ import { defineConfig, devices } from '@playwright/test';
  */
 export default defineConfig({
   testDir: './playwright',
-  fullyParallel: true,
+  fullyParallel: false,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   reporter: 'html',
+
+  // Global setup for authentication
+  // Authenticates once before all tests and saves the session state
+  globalSetup: require.resolve('@redhat-cloud-services/playwright-test-auth/global-setup'),
+
   use: {
+    baseURL: process.env.PLAYWRIGHT_BASE_URL || 'https://stage.foo.redhat.com:1337',
+    ignoreHTTPSErrors: true,
+
+    // Storage state for authenticated sessions
+    // Global setup saves authentication here, all tests reuse it
+    storageState: 'playwright/.auth/user.json',
+
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
     video: 'retain-on-failure',

playwright/README.md

@@ -14,7 +14,7 @@ Before running the tests, you need to:
 2. **Set up environment variables**
    - `E2E_USER` - Red Hat SSO username for testing
    - `E2E_PASSWORD` - Red Hat SSO password for testing
-   - `APP_TEST_HOST_PORT` (optional) - Custom URL for the test environment
+   - `PLAYWRIGHT_BASE_URL` (optional) - Custom URL for the test environment
 
 ## Running Tests
 
@@ -29,7 +29,7 @@ E2E_USER=your-username E2E_PASSWORD=your-password npm run playwright -- test
 Override the default test URL:
 
 ```bash
-APP_TEST_HOST_PORT=localhost:8080 E2E_USER=your-username E2E_PASSWORD=your-password npm run playwright -- test
+PLAYWRIGHT_BASE_URL=localhost:8080 E2E_USER=your-username E2E_PASSWORD=your-password npm run playwright -- test
 ```
 
 ### Running Specific Tests
@@ -56,36 +56,12 @@ E2E_USER=your-username E2E_PASSWORD=your-password npm run playwright -- test --d
 
 ## Writing Tests
 
-### Authenticated Tests
-
-Most tests require user authentication. Use `authTest` instead of `test` to automatically handle login:
-
-```javascript
-import { authTest, expect } from './fixtures.js';
-
-authTest.use({ ignoreHTTPSErrors: true });
-
-authTest.describe('my feature', () => {
-  authTest('should do something', async ({ page }) => {
-    // User is already logged in here
-    await page.goto('/settings/integrations');
-    await expect(page.locator('h1')).toBeVisible();
-  });
-});
-```
-
 ### Using Authentication Utilities
 
-You can also use the authentication functions directly:
+You can use the authentication functions directly from the shared package:
 
 ```javascript
-import { ensureLoggedIn, login, disableCookiePrompt } from './fixtures.js';
-
-// Ensure user is logged in (checks if already logged in first)
-await ensureLoggedIn(page);
-
-// Direct login
-await login(page, 'username', 'password');
+import { disableCookiePrompt } from '@redhat-cloud-services/playwright-test-auth';
 
 // Disable cookie prompts
 await disableCookiePrompt(page);
@@ -116,7 +92,6 @@ The Playwright configuration is in `playwright.config.js` and includes:
 ```
 playwright/
 ├── README.md                 # This file
-├── fixtures.js               # Authentication utilities and authTest fixture
 ├── integrations.spec.js      # Integration page tests
 └── [other test files]
 ```
@@ -132,9 +107,9 @@ playwright/
 ### Tests Timeout
 
 - Check that your local dev server is running
-- Verify the `APP_TEST_HOST_PORT` matches your actual server
+- Verify the `PLAYWRIGHT_BASE_URL` matches your actual server
 - Check network connectivity to external dependencies
 
 ### Certificate Errors
 
-Tests use `ignoreHTTPSErrors: true` to handle self-signed certificates in development environments. This is configured per-test using `authTest.use()`.
+Tests use `ignoreHTTPSErrors: true` to handle self-signed certificates in development environments. This is configured in the Playwright config and applied during globalSetup.

playwright/integrations.spec.js

@@ -1,9 +1,13 @@
-import { authTest, expect } from './fixtures.js';
+import { expect, test } from '@playwright/test';
+import { disableCookiePrompt } from '@redhat-cloud-services/playwright-test-auth';
 
-authTest.use({ ignoreHTTPSErrors: true });
+test.describe('integrations application', async () => {
+  test('navigate to integrations via settings dropdown', async ({ page }) => {
+    // Block cookie prompts before navigation
+    await disableCookiePrompt(page);
 
-authTest.describe('integrations application', async () => {
-  authTest('navigate to integrations via settings dropdown', async ({ page }) => {
+    // Navigate to the application (already authenticated via globalSetup)
+    await page.goto('/');
     // Click on the settings icon
     await page.getByLabel('Settings menu').click();