test: initial protractor to puppeteer E2E conversion

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

@@ -1,13 +1,10 @@
 import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
-import { updateJsonFile, useCIChrome, useCIDefaults } from '../../utils/project';
+import { updateJsonFile, useCIDefaults } from '../../utils/project';
+import { executeBrowserTest } from '../../utils/puppeteer';
 
 export default async function () {
   await ng('generate', 'app', 'test-project-two', '--no-standalone', '--skip-install');
-  await ng('generate', 'private-e2e', '--related-app-name=test-project-two');
-
-  // Setup testing to use CI Chrome.
-  await useCIChrome('test-project-two', './projects/test-project-two/e2e');
   await useCIDefaults('test-project-two');
 
   // Make prod use JIT.
@@ -46,6 +43,6 @@ export default async function () {
     serve.builder = '@angular-devkit/build-angular:dev-server';
   });
   // Test it works
-  await ng('e2e', 'test-project-two', '--configuration=production');
-  await ng('e2e', 'test-project-two', '--configuration=development');
+  await executeBrowserTest({ project: 'test-project-two', configuration: 'production' });
+  await executeBrowserTest({ project: 'test-project-two', configuration: 'development' });
 }

tests/e2e/tests/build/lazy-load-syntax.ts

@@ -5,10 +5,11 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import { setTimeout } from 'node:timers/promises';
-import { replaceInFile, writeFile } from '../../utils/fs';
+
+import { replaceInFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
 import { updateJsonFile } from '../../utils/project';
+import { executeBrowserTest } from '../../utils/puppeteer';
 
 export default async function () {
   // Add lazy route.
@@ -22,29 +23,6 @@ export default async function () {
     }];`,
   );
 
-  // Add lazy route e2e
-  await writeFile(
-    'e2e/src/app.e2e-spec.ts',
-    `
-      import { browser, logging, element, by } from 'protractor';
-
-      describe('workspace-project App', () => {
-        it('should display lazy route', async () => {
-          await browser.get(browser.baseUrl + '/lazy');
-          expect(await element(by.css('app-lazy-comp p')).getText()).toEqual('lazy-comp works!');
-        });
-
-        afterEach(async () => {
-          // Assert that there are no errors emitted from the browser
-          const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-          expect(logs).not.toContain(jasmine.objectContaining({
-            level: logging.Level.SEVERE,
-          }));
-        });
-      });
-    `,
-  );
-
   // Convert the default config to use JIT and prod to just do AOT.
   // This way we can use `ng e2e` to test JIT and `ng e2e --configuration=production` to test AOT.
   await updateJsonFile('angular.json', (json) => {
@@ -53,7 +31,17 @@ export default async function () {
     buildTarget['configurations']['development']['aot'] = false;
   });
 
-  await ng('e2e');
-  await setTimeout(500);
-  await ng('e2e', '--configuration=production');
+  const checkFn = async (page: any) => {
+    await page.goto(page.url() + 'lazy');
+    await page.waitForFunction(
+      () =>
+        !!(globalThis as any).document
+          .querySelector('app-lazy-comp p')
+          ?.textContent?.includes('lazy-comp works!'),
+      { timeout: 10000 },
+    );
+  };
+
+  await executeBrowserTest({ checkFn });
+  await executeBrowserTest({ configuration: 'production', checkFn });
 }

tests/e2e/tests/build/library/lib-consumption-full-aot.ts

@@ -1,6 +1,6 @@
-import { setTimeout } from 'node:timers/promises';
 import { ng } from '../../../utils/process';
-import { libraryConsumptionSetup } from './setup';
+import { executeBrowserTest } from '../../../utils/puppeteer';
+import { browserCheck, libraryConsumptionSetup } from './setup';
 
 export default async function () {
   await libraryConsumptionSetup();
@@ -9,7 +9,6 @@ export default async function () {
   await ng('build', 'my-lib', '--configuration=development');
 
   // Check that the e2e succeeds prod and non prod mode
-  await ng('e2e', '--configuration=production');
-  await setTimeout(500);
-  await ng('e2e', '--configuration=development');
+  await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
+  await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
 }

tests/e2e/tests/build/library/lib-consumption-full-jit.ts

@@ -1,8 +1,8 @@
-import { setTimeout } from 'node:timers/promises';
 import { updateJsonFile } from '../../../utils/project';
 import { expectFileToMatch } from '../../../utils/fs';
 import { ng } from '../../../utils/process';
-import { libraryConsumptionSetup } from './setup';
+import { executeBrowserTest } from '../../../utils/puppeteer';
+import { browserCheck, libraryConsumptionSetup } from './setup';
 import { getGlobalVariable } from '../../../utils/env';
 
 export default async function () {
@@ -21,10 +21,9 @@ export default async function () {
     }
   });
 
-  // Check that the e2e succeeds prod and non prod mode
-  await ng('e2e', '--configuration=production');
-  await setTimeout(500);
-  await ng('e2e', '--configuration=development');
+  // Ensure app works in prod and non prod mode
+  await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
+  await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
 
   // Validate that sourcemaps for the library exists.
   await ng('build', '--configuration=development');

tests/e2e/tests/build/library/lib-consumption-partial-aot.ts

@@ -1,6 +1,6 @@
-import { setTimeout } from 'node:timers/promises';
 import { ng } from '../../../utils/process';
-import { libraryConsumptionSetup } from './setup';
+import { executeBrowserTest } from '../../../utils/puppeteer';
+import { browserCheck, libraryConsumptionSetup } from './setup';
 
 export default async function () {
   await libraryConsumptionSetup();
@@ -9,7 +9,6 @@ export default async function () {
   await ng('build', 'my-lib', '--configuration=production');
 
   // Check that the e2e succeeds prod and non prod mode
-  await ng('e2e', '--configuration=production');
-  await setTimeout(500);
-  await ng('e2e', '--configuration=development');
+  await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
+  await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
 }

tests/e2e/tests/build/library/lib-consumption-partial-jit.ts

@@ -1,7 +1,7 @@
-import { setTimeout } from 'node:timers/promises';
 import { updateJsonFile } from '../../../utils/project';
 import { ng } from '../../../utils/process';
-import { libraryConsumptionSetup } from './setup';
+import { executeBrowserTest } from '../../../utils/puppeteer';
+import { browserCheck, libraryConsumptionSetup } from './setup';
 import { getGlobalVariable } from '../../../utils/env';
 
 export default async function () {
@@ -22,7 +22,6 @@ export default async function () {
   });
 
   // Check that the e2e succeeds prod and non prod mode
-  await ng('e2e', '--configuration=production');
-  await setTimeout(500);
-  await ng('e2e', '--configuration=development');
+  await executeBrowserTest({ configuration: 'production', checkFn: browserCheck });
+  await executeBrowserTest({ configuration: 'development', checkFn: browserCheck });
 }

tests/e2e/tests/build/library/setup.ts

@@ -1,3 +1,4 @@
+import type { Page } from 'puppeteer';
 import { writeMultipleFiles } from '../../../utils/fs';
 import { silentNg } from '../../../utils/process';
 
@@ -30,30 +31,15 @@ export async function libraryConsumptionSetup(): Promise<void> {
       }
     }
   `,
-    'e2e/src/app.e2e-spec.ts': `
-  import { browser, logging, element, by } from 'protractor';
-  import { AppPage } from './app.po';
-
-  describe('workspace-project App', () => {
-    let page: AppPage;
-
-    beforeEach(() => {
-      page = new AppPage();
-    });
-
-    it('should display text from library component', async () => {
-      await page.navigateTo();
-      expect(await element(by.css('lib-my-lib p')).getText()).toEqual('my-lib works!');
-    });
-
-    afterEach(async () => {
-      // Assert that there are no errors emitted from the browser
-      const logs = await browser.manage().logs().get(logging.Type.BROWSER);
-      expect(logs).not.toContain(jasmine.objectContaining({
-        level: logging.Level.SEVERE,
-      }));
-    });
-  });
-`,
   });
 }
+
+export async function browserCheck(page: Page): Promise<void> {
+  await page.waitForFunction(
+    () =>
+      !!(globalThis as any).document
+        .querySelector('lib-my-lib p')
+        ?.textContent?.includes('my-lib works!'),
+    { timeout: 10000 },
+  );
+}

tests/e2e/tests/build/material.ts

@@ -1,14 +1,14 @@
-import assert from 'node:assert/strict';
-import { appendFile, readdir } from 'node:fs/promises';
+import { appendFile } from 'node:fs/promises';
 import { getGlobalVariable } from '../../utils/env';
 import { readFile, replaceInFile } from '../../utils/fs';
 import {
   getActivePackageManager,
   installPackage,
   installWorkspacePackages,
 } from '../../utils/packages';
-import { execWithEnv, ng } from '../../utils/process';
+import { ng } from '../../utils/process';
 import { isPrereleaseCli, updateJsonFile } from '../../utils/project';
+import { executeBrowserTest } from '../../utils/puppeteer';
 
 const snapshots = require('../../ng-snapshot/package.json');
 
@@ -85,5 +85,5 @@ export default async function () {
       }`,
   );
 
-  await ng('e2e', '--configuration=production');
+  await executeBrowserTest({ configuration: 'production' });
 }

tests/e2e/tests/build/ts-standard-decorators.ts

@@ -1,6 +1,7 @@
 import { getGlobalVariable } from '../../utils/env';
 import { ng } from '../../utils/process';
 import { updateJsonFile, updateTsConfig } from '../../utils/project';
+import { executeBrowserTest } from '../../utils/puppeteer';
 
 export default async function () {
   // Update project to disable experimental decorators
@@ -31,6 +32,6 @@ export default async function () {
   // Unit tests (JIT only)
   await ng('test', '--no-watch');
 
-  // E2E tests to ensure application functions in a browser
-  await ng('e2e');
+  // Ensure application functions in a browser
+  await executeBrowserTest();
 }

tests/e2e/tests/build/wasm-esm.ts

@@ -11,6 +11,7 @@ import { ng } from '../../utils/process';
 import { prependToFile, replaceInFile } from '../../utils/fs';
 import { updateJsonFile, useSha } from '../../utils/project';
 import { installWorkspacePackages } from '../../utils/packages';
+import { executeBrowserTest } from '../../utils/puppeteer';
 
 /**
  * Compiled and base64 encoded WASM file for the following WAT:
@@ -66,22 +67,7 @@ export default async function () {
   await ng('build');
 
   // Update E2E test to check for WASM execution
-  await writeFile(
-    'e2e/src/app.e2e-spec.ts',
-    `
-    import { AppPage } from './app.po';
-    import { browser, logging } from 'protractor';
-    describe('WASM execution', () => {
-      it('should log WASM result messages', async () => {
-        const page = new AppPage();
-        await page.navigateTo();
-        expect(await page.getTitleText()).toEqual('Hello, 32');
-      });
-    });
-  `,
-  );
-
-  await ng('e2e');
+  await executeBrowserTest({ expectedTitleText: 'Hello, 32' });
 
   // Setup prerendering and build to test Node.js functionality
   await ng('add', '@angular/ssr', '--skip-confirmation', '--skip-install');

tests/e2e/tests/update/update.ts

@@ -4,6 +4,7 @@ import { expectFileMatchToExist } from '../../utils/fs';
 import { getActivePackageManager } from '../../utils/packages';
 import { ng, noSilentNg } from '../../utils/process';
 import { isPrereleaseCli, useCIChrome, useCIDefaults, getNgCLIVersion } from '../../utils/project';
+import { executeBrowserTest } from '../../utils/puppeteer';
 
 export default async function () {
   let restoreRegistry: (() => Promise<void>) | undefined;
@@ -70,20 +71,22 @@ export default async function () {
 
   await ng('update', '@angular/cli', ...extraUpdateArgs);
 
-  // Generate E2E setup
-  await ng('generate', 'private-e2e', '--related-app-name=nineteen-project');
-
   // Setup testing to use CI Chrome.
   await useCIChrome('nineteen-project', './');
-  await useCIChrome('nineteen-project', './e2e/');
   await useCIDefaults('nineteen-project');
 
   // Run CLI commands.
   await ng('generate', 'component', 'my-comp');
   await ng('test', '--watch=false');
 
-  await ng('e2e');
-  await ng('e2e', '--configuration=production');
+  await executeBrowserTest({
+    configuration: 'production',
+    expectedTitleText: 'Hello, nineteen-project',
+  });
+  await executeBrowserTest({
+    configuration: 'development',
+    expectedTitleText: 'Hello, nineteen-project',
+  });
 
   // Verify project now creates bundles
   await noSilentNg('build', '--configuration=production');