From ec16fa6e9b00f2abe00e636dce4ce63650a28318 Mon Sep 17 00:00:00 2001 From: Charles Lyding <19598772+clydin@users.noreply.github.com> Date: Thu, 18 Dec 2025 16:20:30 -0500 Subject: [PATCH] test: initial protractor to puppeteer E2E conversion This change converts 10 of the E2E tests to use the new puppeteer infrastructure instead of protractor. --- tests/e2e/tests/build/jit-ngmodule.ts | 11 ++--- tests/e2e/tests/build/lazy-load-syntax.ts | 44 +++++++------------ .../build/library/lib-consumption-full-aot.ts | 9 ++-- .../build/library/lib-consumption-full-jit.ts | 11 +++-- .../library/lib-consumption-partial-aot.ts | 9 ++-- .../library/lib-consumption-partial-jit.ts | 9 ++-- tests/e2e/tests/build/library/setup.ts | 36 +++++---------- tests/e2e/tests/build/material.ts | 8 ++-- .../e2e/tests/build/ts-standard-decorators.ts | 5 ++- tests/e2e/tests/build/wasm-esm.ts | 18 +------- tests/e2e/tests/update/update.ts | 15 ++++--- 11 files changed, 66 insertions(+), 109 deletions(-) diff --git a/tests/e2e/tests/build/jit-ngmodule.ts b/tests/e2e/tests/build/jit-ngmodule.ts index 910f8993a16d..aa6b3fda86bb 100644 --- a/tests/e2e/tests/build/jit-ngmodule.ts +++ b/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' }); } diff --git a/tests/e2e/tests/build/lazy-load-syntax.ts b/tests/e2e/tests/build/lazy-load-syntax.ts index 2b91b3f63b45..bc0a375673dc 100644 --- a/tests/e2e/tests/build/lazy-load-syntax.ts +++ b/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 }); } diff --git a/tests/e2e/tests/build/library/lib-consumption-full-aot.ts b/tests/e2e/tests/build/library/lib-consumption-full-aot.ts index 88c80ac61629..08d114f1de4a 100644 --- a/tests/e2e/tests/build/library/lib-consumption-full-aot.ts +++ b/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 }); } diff --git a/tests/e2e/tests/build/library/lib-consumption-full-jit.ts b/tests/e2e/tests/build/library/lib-consumption-full-jit.ts index e63130e77c86..906a920dba44 100644 --- a/tests/e2e/tests/build/library/lib-consumption-full-jit.ts +++ b/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'); diff --git a/tests/e2e/tests/build/library/lib-consumption-partial-aot.ts b/tests/e2e/tests/build/library/lib-consumption-partial-aot.ts index 5b45a8372f68..f906be54b0e6 100644 --- a/tests/e2e/tests/build/library/lib-consumption-partial-aot.ts +++ b/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 }); } diff --git a/tests/e2e/tests/build/library/lib-consumption-partial-jit.ts b/tests/e2e/tests/build/library/lib-consumption-partial-jit.ts index 9abb8a7e7b2f..503c09e525e9 100644 --- a/tests/e2e/tests/build/library/lib-consumption-partial-jit.ts +++ b/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 }); } diff --git a/tests/e2e/tests/build/library/setup.ts b/tests/e2e/tests/build/library/setup.ts index 9e05cab551a4..621b740cf4bc 100644 --- a/tests/e2e/tests/build/library/setup.ts +++ b/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 { } } `, - '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 { + await page.waitForFunction( + () => + !!(globalThis as any).document + .querySelector('lib-my-lib p') + ?.textContent?.includes('my-lib works!'), + { timeout: 10000 }, + ); +} diff --git a/tests/e2e/tests/build/material.ts b/tests/e2e/tests/build/material.ts index 3fd41f712a30..bc4862f735fc 100644 --- a/tests/e2e/tests/build/material.ts +++ b/tests/e2e/tests/build/material.ts @@ -1,5 +1,4 @@ -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 { @@ -7,8 +6,9 @@ import { 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' }); } diff --git a/tests/e2e/tests/build/ts-standard-decorators.ts b/tests/e2e/tests/build/ts-standard-decorators.ts index 07bf93e3b545..05d056675d3b 100644 --- a/tests/e2e/tests/build/ts-standard-decorators.ts +++ b/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(); } diff --git a/tests/e2e/tests/build/wasm-esm.ts b/tests/e2e/tests/build/wasm-esm.ts index 8a9735172f1b..70633a1021c1 100644 --- a/tests/e2e/tests/build/wasm-esm.ts +++ b/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'); diff --git a/tests/e2e/tests/update/update.ts b/tests/e2e/tests/update/update.ts index d50e4bc51e3a..ae941762d6ca 100644 --- a/tests/e2e/tests/update/update.ts +++ b/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) | 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');