Implement comprehensive E2E tests for Split Translator extension

.github/workflows/ci.yml

@@ -46,3 +46,45 @@ jobs:
           echo "## 🧪 Test Results" >> $GITHUB_STEP_SUMMARY
           echo "✅ Build: Successful" >> $GITHUB_STEP_SUMMARY
           echo "✅ Unit Tests: Passed" >> $GITHUB_STEP_SUMMARY
+
+  e2e-tests:
+    name: 🎭 E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: 📥 Checkout code
+        uses: actions/checkout@v4
+
+      - name: 🟢 Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+          cache-dependency-path: ${{ env.CACHE_DEPENDENCY_PATH }}
+
+      - name: 📦 Install dependencies
+        run: npm ci --prefer-offline --no-audit
+
+      - name: 🎭 Install Playwright browsers
+        run: npx playwright install chromium
+
+      - name: 🖥️ Setup virtual display (Xvfb)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y xvfb
+          export DISPLAY=:99
+          Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+          echo "DISPLAY=:99" >> $GITHUB_ENV
+
+      - name: 🏗️ Build project
+        run: npm run build
+
+      - name: 🧪 Run all E2E tests
+        run: npm run test:e2e
+
+      - name: 📊 E2E Test Summary
+        run: |
+          echo "## 🎭 E2E Test Results" >> $GITHUB_STEP_SUMMARY
+          echo "✅ Build: Successful" >> $GITHUB_STEP_SUMMARY
+          echo "✅ E2E Tests (All): Passed" >> $GITHUB_STEP_SUMMARY

.github/workflows/copilot-setup-steps.yml

@@ -25,9 +25,28 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: "22"
+          cache: 'npm'
+          cache-dependency-path: 'package-lock.json'
 
       - name: Install JavaScript dependencies
-        run: npm install
+        run: npm ci --prefer-offline --no-audit
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium
+
+      - name: Setup virtual display (Xvfb)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y xvfb
+          export DISPLAY=:99
+          Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+          echo "DISPLAY=:99" >> $GITHUB_ENV
 
       - name: Build TypeScript project
         run: npm run build
+
+      - name: Run unit tests
+        run: npm run test:unit
+
+      - name: Run all E2E tests
+        run: npm run test:e2e

jest.config.js

@@ -20,6 +20,12 @@ module.exports = {
     '<rootDir>/tests/**/*.spec.ts'
   ],
 
+  // Exclude Playwright E2E tests from Jest
+  testPathIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/tests/e2e/'
+  ],
+
   // Module path mapping
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'

package.json

@@ -24,7 +24,14 @@
     "test:unit": "jest tests/unit --passWithNoTests --no-coverage",
     "test:unit:fast": "jest tests/unit --passWithNoTests --no-coverage --silent --maxWorkers=4",
     "test:integration": "jest tests/integration --passWithNoTests",
-    "test:silent": "jest --silent --passWithNoTests"
+    "test:silent": "jest --silent --passWithNoTests",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:debug": "playwright test --debug",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:smoke": "playwright test --project=smoke-tests",
+    "test:e2e:extension": "playwright test --project=chromium-extension",
+    "test:all": "npm run test && npm run test:e2e"
   },
   "keywords": [
     "browser-extension",
@@ -43,11 +50,13 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@playwright/test": "1.54.1",
     "@types/chrome": "0.0.329",
     "@types/jest": "29.5.12",
     "@types/node": "20.14.9",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "playwright": "1.54.1",
     "rimraf": "6.0.1",
     "ts-jest": "29.1.5",
     "typescript": "5.8.3"

playwright.config.ts

@@ -0,0 +1,89 @@
+import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
+
+/**
+ * Playwright configuration for E2E testing of Split Translator browser extension
+ * @see https://playwright.dev/docs/test-configuration
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Run tests in files in parallel */
+  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', { outputFolder: 'playwright-report' }],
+    ['list']
+  ],
+  /* 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://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    /* Take screenshot only on failure */
+    screenshot: 'only-on-failure',
+    /* Record video on failure */
+    video: 'retain-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    // Smoke tests that work in any environment (can use headless mode)
+    {
+      name: 'smoke-tests',
+      testMatch: ['**/smoke.spec.ts', '**/integration.spec.ts', '**/functional.spec.ts', '**/popup.spec.ts', '**/error-handling.spec.ts', '**/split-translate.spec.ts', '**/split-screen.spec.ts'],
+      use: { 
+        ...devices['Desktop Chrome'],
+        // Smoke tests can run in headless mode as they don't use extension APIs
+      },
+    },
+
+    // Full extension tests (require non-headless mode + display server)
+    // Currently disabled as they require complex setup
+    {
+      name: 'chromium-extension',
+      testIgnore: ['**/smoke.spec.ts', '**/integration.spec.ts', '**/functional.spec.ts', '**/popup.spec.ts', '**/error-handling.spec.ts', '**/split-translate.spec.ts', '**/split-screen.spec.ts'],
+      use: { 
+        ...devices['Desktop Chrome'],
+        // Browser extension testing configuration
+        launchOptions: {
+          // Chrome extensions require non-headless mode, even in CI
+          headless: false,
+          args: [
+            `--disable-extensions-except=${path.resolve(__dirname, './dist')}`,
+            `--load-extension=${path.resolve(__dirname, './dist')}`,
+            '--no-sandbox',
+            '--disable-dev-shm-usage',
+            '--disable-background-timer-throttling',
+            '--disable-backgrounding-occluded-windows',
+            '--disable-renderer-backgrounding',
+            // Additional flags for CI environments
+            ...(process.env.CI ? [
+              '--disable-gpu',
+              '--disable-web-security',
+              '--disable-features=VizDisplayCompositor',
+            ] : []),
+          ],
+        },
+      },
+    },
+  ],
+
+  /* Global setup and teardown */
+  globalSetup: require.resolve('./tests/e2e/global-setup.ts'),
+  globalTeardown: require.resolve('./tests/e2e/global-teardown.ts'),
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});