chore: Version-Agnostic Playwright Setup for Mynah UI E2E Tests (#369)

* fix: addressing issues with webkit in github ci

* Fix code formatting and downgrade TypeScript to supported version

- Fix Prettier formatting issues in 3 script files
- Downgrade TypeScript from 5.3.3 to 5.1.6 (within supported range <5.2.0)
- Resolves pre-push hook failures

* Fix TypeScript lint error: remove unnecessary type assertion

- Remove 'as string' type assertion from markdown test file
- Resolves @typescript-eslint/no-unnecessary-type-assertion error

* fix: revert webkit configuration to original format

- Keep webkit configuration simple and identical to main branch format
- Maintain chromium-specific launch arguments for CI compatibility
- Fixes webkit test failures caused by configuration structure changes

* fic: increated the timeout to 60000ms for playwright defaultConfig

* fix: removing unwanted code

Author: laileni-aws

.github/workflows/e2e-linux.yml

@@ -54,6 +54,8 @@ jobs:
             run: npm run docker:run
             env:
               WEBKIT_FORCE_COMPLEX_TEXT: 0
+              WEBKIT_DISABLE_COMPOSITING_MODE: 1
+              PLAYWRIGHT_BROWSERS_PATH: 0
 
           # Extract test results from Docker container
           - name: Extract test results from Docker container

Dockerfile

@@ -1,5 +1,7 @@
-# Use the official Playwright image which includes browsers
-FROM mcr.microsoft.com/playwright:v1.53.0
+# Version-agnostic Dockerfile for Mynah UI E2E Tests
+# Supports dynamic Playwright version detection
+ARG PLAYWRIGHT_VERSION=latest
+FROM mcr.microsoft.com/playwright:${PLAYWRIGHT_VERSION}
 
 # Set working directory
 WORKDIR /app
@@ -14,6 +16,9 @@ COPY ./postinstall.js /app
 COPY ./webpack.config.js /app
 COPY ./tsconfig.json /app
 
+# Copy scripts directory for version-agnostic setup
+COPY ./scripts /app/scripts
+
 # Copy required files from ui-tests
 COPY ./ui-tests/package.json /app/ui-tests/
 COPY ./ui-tests/playwright.config.ts /app/ui-tests/
@@ -28,7 +33,19 @@ COPY ./ui-tests/__snapshots__ /app/ui-tests/__snapshots__
 # Install dependencies and build MynahUI
 RUN npm install
 RUN npm run build
-RUN cd ./ui-tests && npm install && npm run prepare
+
+# Setup Playwright with version-agnostic approach
+RUN cd ./ui-tests && node ../scripts/setup-playwright.js && npm run prepare
+
+# Ensure all browsers are installed with dependencies
+RUN cd ./ui-tests && npx playwright install --with-deps
+
+# Run health check to verify installation
+RUN cd ./ui-tests && node ../scripts/docker-health-check.js
+
+# Set environment variables for WebKit
+ENV WEBKIT_FORCE_COMPLEX_TEXT=0
+ENV WEBKIT_DISABLE_COMPOSITING_MODE=1
 
 # Default command to run the tests
-CMD ["sh", "-c", "cd ./ui-tests && npm run e2e${BROWSER:+:$BROWSER}"]
+CMD ["sh", "-c", "cd ./ui-tests && npm run e2e${BROWSER:+:$BROWSER}"]

package-lock.json

@@ -28,14 +28,20 @@
         "format:check": "npx prettier --check .",
         "format:write": "npx prettier --write .",
         "docker:clean": "docker rm -f mynah-ui-e2e-container || true",
-        "docker:build": "docker build -t mynah-ui-e2e -f Dockerfile .",
-        "docker:run": "docker run --name mynah-ui-e2e-container mynah-ui-e2e",
+        "docker:build": "node scripts/docker-build.js",
+        "docker:run": "docker run --name mynah-ui-e2e-container -e WEBKIT_FORCE_COMPLEX_TEXT=0 -e WEBKIT_DISABLE_COMPOSITING_MODE=1 mynah-ui-e2e",
         "docker:run:chromium": "docker run -e BROWSER=chromium --name mynah-ui-e2e-container mynah-ui-e2e",
-        "docker:run:webkit": "docker run -e BROWSER=webkit --name mynah-ui-e2e-container mynah-ui-e2e",
+        "docker:run:webkit": "docker run -e BROWSER=webkit -e WEBKIT_FORCE_COMPLEX_TEXT=0 -e WEBKIT_DISABLE_COMPOSITING_MODE=1 --name mynah-ui-e2e-container mynah-ui-e2e",
         "docker:extract": "docker cp mynah-ui-e2e-container:/app/ui-tests/__results__ ./ui-tests/ && docker cp mynah-ui-e2e-container:/app/ui-tests/__snapshots__ ./ui-tests/__results__/__snapshots__",
+        "playwright:setup": "node scripts/setup-playwright.js",
+        "playwright:version": "node scripts/get-playwright-version.js",
+        "playwright:pre-test": "node scripts/pre-test-setup.js",
         "tests:e2e": "npm run docker:clean && npm run docker:build && npm run docker:run",
         "tests:e2e:chromium": "npm run docker:clean && npm run docker:build && npm run docker:run:chromium",
         "tests:e2e:webkit": "npm run docker:clean && npm run docker:build && npm run docker:run:webkit",
+        "tests:e2e:webkit:local": "npm run playwright:pre-test && cd ui-tests && npm run e2e:webkit",
+        "tests:webkit:check": "node scripts/test-webkit.js",
+        "tests:e2e:local": "npm run playwright:pre-test && cd ui-tests && npm run e2e",
         "tests:e2e:trace": "cd ./ui-tests && npm run trace",
         "tests:unit": "jest --collect-coverage",
         "api-docs": "npx typedoc src/main.ts --out ./api-docs",
@@ -96,7 +102,7 @@
         "ts-loader": "^9.4.4",
         "ts-node": "^10.9.1",
         "typedoc": "^0.25.13",
-        "typescript": "^5.0.4",
+        "typescript": "^5.1.6",
         "webpack": "5.94.0",
         "webpack-cli": "4.7.2"
     }

package.json

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+/**
+ * Script to build Docker image with detected Playwright version
+ */
+
+const { execSync } = require('child_process');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function buildDockerImage() {
+    try {
+        const version = getPlaywrightVersion();
+        console.log(`Building Docker image with Playwright version: ${version}`);
+
+        // Use the detected version or fallback to latest
+        // Add 'v' prefix for version numbers, but not for 'latest'
+        const dockerVersion = version === 'latest' ? 'latest' : `v${version}`;
+
+        const buildCommand = `docker build --build-arg PLAYWRIGHT_VERSION=${dockerVersion} -t mynah-ui-e2e .`;
+
+        console.log(`Executing: ${buildCommand}`);
+        execSync(buildCommand, { stdio: 'inherit' });
+
+        console.log('Docker image built successfully!');
+    } catch (error) {
+        console.error('Error building Docker image:', error.message);
+        process.exit(1);
+    }
+}
+
+// If called directly, run the build
+if (require.main === module) {
+    buildDockerImage();
+}
+
+module.exports = { buildDockerImage };

scripts/docker-build.js

@@ -0,0 +1,45 @@
+#!/usr/bin/env node
+
+/**
+ * Docker health check script to verify browser installations
+ */
+
+const { execSync } = require('child_process');
+
+function healthCheck() {
+    try {
+        console.log('=== Docker Health Check ===');
+
+        // Check if we're in Docker
+        console.log('Environment: Docker Container');
+
+        // Check Playwright installation
+        console.log('\n1. Checking Playwright...');
+        execSync('npx playwright --version', { stdio: 'inherit' });
+
+        // Check browser installations
+        console.log('\n2. Checking browsers...');
+        execSync('npx playwright install --dry-run', { stdio: 'inherit' });
+
+        // Test WebKit specifically
+        console.log('\n3. Testing WebKit launch...');
+        execSync('npx playwright test --list --project=webkit | head -5', {
+            stdio: 'inherit',
+            shell: true,
+        });
+
+        console.log('\n=== Health Check Passed ===');
+        return true;
+    } catch (error) {
+        console.error('Health check failed:', error.message);
+        return false;
+    }
+}
+
+// If called directly, run the health check
+if (require.main === module) {
+    const success = healthCheck();
+    process.exit(success ? 0 : 1);
+}
+
+module.exports = { healthCheck };

scripts/docker-health-check.js

@@ -0,0 +1,62 @@
+#!/usr/bin/env node
+
+/**
+ * Script to detect and return the appropriate Playwright version
+ * Priority: local installation > package.json > latest
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+function getPlaywrightVersion() {
+    try {
+        // 1. Try to get locally installed version
+        try {
+            const localVersion = execSync('playwright --version', { encoding: 'utf8', stdio: 'pipe' });
+            const versionMatch = localVersion.match(/Version (\d+\.\d+\.\d+)/);
+            if (versionMatch) {
+                console.log(`Found local Playwright version: ${versionMatch[1]}`);
+                return versionMatch[1];
+            }
+        } catch (error) {
+            console.log('No local Playwright installation found');
+        }
+
+        // 2. Try to get version from ui-tests package.json
+        const uiTestsPackagePath = path.join(__dirname, '../ui-tests/package.json');
+        if (fs.existsSync(uiTestsPackagePath)) {
+            const packageJson = JSON.parse(fs.readFileSync(uiTestsPackagePath, 'utf8'));
+
+            // Check both playwright and @playwright/test dependencies
+            const playwrightVersion = packageJson.devDependencies?.playwright || packageJson.dependencies?.playwright;
+            const playwrightTestVersion =
+                packageJson.devDependencies?.['@playwright/test'] || packageJson.dependencies?.['@playwright/test'];
+
+            // Prefer @playwright/test version if available, otherwise use playwright
+            const version = playwrightTestVersion || playwrightVersion;
+
+            if (version) {
+                // Remove ^ or ~ prefix and get clean version
+                const cleanVersion = version.replace(/[\^~]/, '');
+                const sourcePackage = playwrightTestVersion ? '@playwright/test' : 'playwright';
+                console.log(`Found ${sourcePackage} version in ui-tests package.json: ${cleanVersion}`);
+                return cleanVersion;
+            }
+        }
+
+        // 3. Fallback to latest
+        console.log('No specific version found, using latest');
+        return 'latest';
+    } catch (error) {
+        console.error('Error detecting Playwright version:', error.message);
+        return 'latest';
+    }
+}
+
+// If called directly, output the version
+if (require.main === module) {
+    console.log(getPlaywrightVersion());
+}
+
+module.exports = { getPlaywrightVersion };

scripts/get-playwright-version.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+/**
+ * Pre-test setup script that ensures Playwright is properly configured
+ * This runs before tests to guarantee version consistency
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function checkPlaywrightInstallation() {
+    const uiTestsPath = path.join(__dirname, '../ui-tests');
+    const nodeModulesPath = path.join(uiTestsPath, 'node_modules');
+    const playwrightPath = path.join(nodeModulesPath, '@playwright');
+
+    return fs.existsSync(playwrightPath);
+}
+
+function getInstalledPlaywrightVersion() {
+    try {
+        const uiTestsPath = path.join(__dirname, '../ui-tests');
+        const packageLockPath = path.join(uiTestsPath, 'package-lock.json');
+
+        if (fs.existsSync(packageLockPath)) {
+            const packageLock = JSON.parse(fs.readFileSync(packageLockPath, 'utf8'));
+            return (
+                packageLock.packages?.['node_modules/@playwright/test']?.version ||
+                packageLock.packages?.['node_modules/playwright']?.version ||
+                null
+            );
+        }
+        return null;
+    } catch (error) {
+        console.warn('Could not read package-lock.json:', error.message);
+        return null;
+    }
+}
+
+function preTestSetup() {
+    console.log('🔍 Running pre-test setup...');
+
+    try {
+        const expectedVersion = getPlaywrightVersion();
+        console.log(`📋 Expected Playwright version: ${expectedVersion}`);
+
+        const isInstalled = checkPlaywrightInstallation();
+        const installedVersion = getInstalledPlaywrightVersion();
+
+        console.log(`📦 Playwright installed: ${isInstalled}`);
+        console.log(`📦 Installed version: ${installedVersion || 'unknown'}`);
+
+        // Check if we need to install/update
+        const needsSetup = !isInstalled || (expectedVersion !== 'latest' && installedVersion !== expectedVersion);
+
+        if (needsSetup) {
+            console.log('🔧 Setting up Playwright...');
+
+            // Run setup with target directory
+            const { setupPlaywright } = require('./setup-playwright');
+            const uiTestsPath = path.join(__dirname, '../ui-tests');
+            setupPlaywright(uiTestsPath);
+        } else {
+            console.log('✅ Playwright is already properly configured');
+        }
+
+        console.log('🎉 Pre-test setup completed successfully!');
+    } catch (error) {
+        console.error('❌ Pre-test setup failed:', error.message);
+        process.exit(1);
+    }
+}
+
+// If called directly, run the setup
+if (require.main === module) {
+    preTestSetup();
+}
+
+module.exports = { preTestSetup };

scripts/pre-test-setup.js

@@ -0,0 +1,61 @@
+#!/usr/bin/env node
+
+/**
+ * Script to setup Playwright with version-agnostic approach
+ * This ensures consistent versions across local and Docker environments
+ */
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const { getPlaywrightVersion } = require('./get-playwright-version');
+
+function setupPlaywright(targetDir = null) {
+    try {
+        const version = getPlaywrightVersion();
+        console.log(`Setting up Playwright version: ${version}`);
+
+        // Determine target directory
+        const uiTestsPath = targetDir || path.join(__dirname, '../ui-tests');
+
+        // Ensure target directory exists
+        if (!fs.existsSync(uiTestsPath)) {
+            throw new Error(`Target directory does not exist: ${uiTestsPath}`);
+        }
+
+        const installCommand =
+            version === 'latest'
+                ? 'npm install @playwright/test@latest playwright@latest --save-dev'
+                : `npm install @playwright/test@${version} playwright@${version} --save-dev`;
+
+        console.log(`Installing Playwright in ${uiTestsPath}...`);
+        execSync(installCommand, {
+            stdio: 'inherit',
+            cwd: uiTestsPath,
+        });
+
+        // Install Playwright browsers with dependencies
+        console.log('Installing Playwright browsers with dependencies...');
+        execSync('npx playwright install --with-deps', {
+            stdio: 'inherit',
+            cwd: uiTestsPath,
+        });
+
+        console.log('Playwright setup completed successfully!');
+        return true;
+    } catch (error) {
+        console.error('Error setting up Playwright:', error.message);
+        throw error; // Re-throw to allow caller to handle
+    }
+}
+
+// If called directly, run the setup
+if (require.main === module) {
+    try {
+        setupPlaywright();
+    } catch (error) {
+        process.exit(1);
+    }
+}
+
+module.exports = { setupPlaywright };