test: migrate E2E tests to puppeteer instead of protractor

Author: clydin

tests/BUILD.bazel

@@ -73,6 +73,7 @@ e2e_suites(
         # TODO: Clean this up.
         "//:node_modules/express",
         "//:node_modules/undici",
+        "//:node_modules/puppeteer",
     ],
     runner = ":runner_entrypoint",
 )

tests/e2e/tests/BUILD.bazel

@@ -12,6 +12,7 @@ ts_project(
         "//:node_modules/@types/semver",
         "//:node_modules/express",
         "//:node_modules/fast-glob",
+        "//:node_modules/puppeteer",
         "//:node_modules/semver",
         "//:node_modules/undici",
         "//tests/e2e/utils",

tests/e2e/tests/build/jit-prod.ts

@@ -1,6 +1,7 @@
 import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
+import { runE2eTest } from '../../utils/puppeteer';
 
 export default async function () {
   // Make prod use JIT.
@@ -18,5 +19,5 @@ export default async function () {
   });
 
   // Test it works
-  await ng('e2e', '--configuration=production');
+  await runE2eTest({ configuration: 'production' });
 }

tests/e2e/utils/BUILD.bazel

@@ -15,6 +15,7 @@ ts_project(
         "//:node_modules/@types/semver",
         "//:node_modules/fast-glob",
         "//:node_modules/protractor",
+        "//:node_modules/puppeteer",
         "//:node_modules/semver",
         "//:node_modules/verdaccio",
         "//:node_modules/verdaccio-auth-memory",

tests/e2e/utils/puppeteer.ts

@@ -0,0 +1,82 @@
+import { type Page, launch } from 'puppeteer';
+import { execAndWaitForOutputToMatch, killAllProcesses } from './process';
+
+export interface E2eTestOptions {
+  project?: string;
+  configuration?: string;
+  baseUrl?: string;
+  checkFn?: (page: Page) => Promise<void>;
+  expectedTitleText?: string;
+}
+
+export async function runE2eTest(options: E2eTestOptions = {}) {
+  let url = options.baseUrl;
+  let hasStartedServer = false;
+
+  try {
+    if (!url) {
+      // Start serving
+      const match = /open your browser on (http:\/\/localhost:\d+\/)/;
+      const serveArgs = ['serve', '--port=0'];
+      if (options.project) {
+        serveArgs.push(options.project);
+      }
+      if (options.configuration) {
+        serveArgs.push(`--configuration=${options.configuration}`);
+      }
+
+      const { stdout } = await execAndWaitForOutputToMatch('ng', serveArgs, match);
+      url = stdout.match(match)?.[1];
+      if (!url) {
+        throw new Error('Could not find serving URL');
+      }
+      hasStartedServer = true;
+    }
+
+    const browser = await launch({ executablePath: process.env['CHROME_BIN'], headless: true });
+    try {
+      const page = await browser.newPage();
+
+      // Capture errors
+      const errors: string[] = [];
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') {
+          errors.push(msg.text());
+        }
+      });
+      page.on('pageerror', (err) => {
+        errors.push(err.toString());
+      });
+
+      await page.goto(url);
+
+      if (options.checkFn) {
+        await options.checkFn(page);
+      } else {
+        // Default check: verify h1 content and no browser errors
+        const expectedText = options.expectedTitleText || 'Hello, test-project';
+
+        // Wait for the h1 element to appear and contain the expected text
+        await page.waitForFunction(
+          (selector: string, text: string) => {
+            const doc = (globalThis as any).document;
+            return doc.querySelector(selector)?.textContent?.includes(text);
+          },
+          { timeout: 5000 }, // Max 5 seconds wait time
+          'h1',
+          expectedText,
+        );
+      }
+
+      if (errors.length > 0) {
+        throw new Error(`Browser console errors detected:\n${errors.join('\n')}`);
+      }
+    } finally {
+      await browser.close();
+    }
+  } finally {
+    if (hasStartedServer) {
+      await killAllProcesses();
+    }
+  }
+}