Complete e2e migration from Protractor to Playwright with working tests

Co-authored-by: Yehonal <[email protected]>

Author: Copilot

.github/workflows/e2e.yml

@@ -28,6 +28,12 @@ jobs:
       - name: Setup Chrome
         uses: browser-actions/setup-chrome@v1
 
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Set Playwright Chrome executable for CI
+        run: echo "PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/google-chrome" >> $GITHUB_ENV
+
       - name: Cache npm
         uses: actions/cache@v4
         with:
@@ -71,5 +77,5 @@ jobs:
       - name: Run unit tests (headless)
         run: npm run test-ci -- --browsers=ChromeHeadless
 
-      - name: Run E2E tests (Protractor, headless)
-        run: npm run e2e -- --configuration=e2e --webdriver-update=false
+      - name: Run E2E tests (Playwright)
+        run: npm run e2e

angular.json

@@ -123,21 +123,6 @@
               "node_modules/prismjs/prism.js"
             ]
           }
-        },
-        "e2e": {
-          "builder": "@angular-devkit/build-angular:protractor",
-          "options": {
-            "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "git-catalogue:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "git-catalogue:serve:production"
-            },
-            "e2e": {
-              "devServerTarget": "git-catalogue:serve:e2e"
-            }
-          }
         }
       }
     }

e2e/app.spec.ts

@@ -0,0 +1,49 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Git Catalogue App', () => {
+  
+  test('should load the application', async ({ page }) => {
+    // Navigate to the application
+    await page.goto('/');
+    
+    // Wait for the page to load
+    await page.waitForLoadState('networkidle');
+    
+    // Check that the page loaded successfully by looking for Angular content
+    // The app should have loaded without critical errors
+    await expect(page).toHaveTitle('GitCatalogue');
+    
+    // Check that the main app component is present
+    await expect(page.locator('app-root')).toBeVisible();
+  });
+
+  test('should not have console errors', async ({ page }) => {
+    const errors: string[] = [];
+    
+    // Listen for console errors
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        const text = msg.text();
+        // Filter out network-related errors that are expected in CI environments
+        const isNetworkError = text.includes('net::ERR_NAME_NOT_RESOLVED') ||
+                              text.includes('Failed to load resource') ||
+                              text.includes('fonts.googleapis.com') ||
+                              text.includes('fonts.gstatic.com') ||
+                              text.includes('HttpErrorResponse');
+        
+        if (!isNetworkError) {
+          errors.push(text);
+        }
+      }
+    });
+    
+    // Navigate to the application
+    await page.goto('/');
+    
+    // Wait for the page to fully load
+    await page.waitForLoadState('networkidle');
+    
+    // Assert that there are no critical console errors
+    expect(errors).toEqual([]);
+  });
+});