Skip to content

Commit 1f30663

Browse files
clydinhybrist
clydin
authored and
hybrist
committed
test: migrate build and misc E2E tests to Puppeteer
Replaces the Protractor-based `ng e2e` execution with the new Puppeteer `executeBrowserTest` utility in various build and misc E2E tests. The following tests were updated: - auto-csp - worker - trusted-types This migration involves implementing custom `checkFn` logic to replicate the assertions previously handled by Protractor, such as verifying server-rendered content, console logs, and service worker states.
1 parent 1638f76 commit 1f30663

3 files changed

Lines changed: 86 additions & 93 deletions

File tree

‎tests/e2e/tests/build/auto-csp.ts‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import assert from 'node:assert';
1+
import assert from 'node:assert/strict';
2+
import { setTimeout } from 'node:timers/promises';
23
import { getGlobalVariable } from '../../utils/env';
34
import { expectFileToMatch, writeFile, writeMultipleFiles } from '../../utils/fs';
45
import { findFreePort } from '../../utils/network';
56
import { execAndWaitForOutputToMatch, ng } from '../../utils/process';
67
import { updateJsonFile } from '../../utils/project';
8+
import { executeBrowserTest } from '../../utils/puppeteer';
79

810
const CSP_META_TAG = /<meta http-equiv="Content-Security-Policy"/;
911

@@ -67,55 +69,6 @@ export default async function () {
6769
</body>
6870
</html>
6971
`,
70-
'e2e/src/app.e2e-spec.ts': `
71-
import { browser, by, element } from 'protractor';
72-
import * as webdriver from 'selenium-webdriver';
73-
74-
function allConsoleWarnMessagesAndErrors() {
75-
return browser
76-
.manage()
77-
.logs()
78-
.get('browser')
79-
.then(function (browserLog: any[]) {
80-
const warnMessages: any[] = [];
81-
browserLog.filter((logEntry) => {
82-
const msg = logEntry.message;
83-
console.log('>> ' + msg);
84-
if (logEntry.level.value >= webdriver.logging.Level.INFO.value) {
85-
warnMessages.push(msg);
86-
}
87-
});
88-
return warnMessages;
89-
});
90-
}
91-
92-
describe('Hello world E2E Tests', () => {
93-
beforeAll(async () => {
94-
await browser.waitForAngularEnabled(true);
95-
});
96-
97-
it('should display: Welcome and run all scripts in order', async () => {
98-
// Load the page without waiting for Angular since it is not bootstrapped automatically.
99-
await browser.driver.get(browser.baseUrl);
100-
101-
// Test the contents.
102-
expect(await element(by.css('h1')).getText()).toMatch('Hello');
103-
104-
// Make sure all scripts ran and there were no client side errors.
105-
const consoleMessages = await allConsoleWarnMessagesAndErrors();
106-
expect(consoleMessages.length).toEqual(4); // No additional errors
107-
// Extract just the printed messages from the console data.
108-
const printedMessages = consoleMessages.map(m => m.match(/"(.*?)"/)[1]);
109-
expect(printedMessages).toEqual([
110-
// All messages printed in order because execution order is preserved.
111-
"Inline Script Head",
112-
"Inline Script Body: 1339",
113-
"First External Script: 1338",
114-
"Second External Script: 1337",
115-
]);
116-
});
117-
});
118-
`,
11972
});
12073

12174
async function spawnServer(): Promise<number> {
@@ -137,7 +90,49 @@ export default async function () {
13790
// Make sure if contains the critical CSS inlining CSP code.
13891
await expectFileToMatch('dist/test-project/browser/index.html', 'ngCspMedia');
13992

140-
// Make sure that our e2e protractor tests run to confirm that our angular project runs.
93+
// Make sure that our e2e tests run to confirm that our angular project runs.
14194
const port = await spawnServer();
142-
await ng('e2e', `--base-url=http://localhost:${port}`, '--dev-server-target=');
95+
await executeBrowserTest({
96+
baseUrl: `http://localhost:${port}/`,
97+
checkFn: async (page) => {
98+
const warnMessages: string[] = [];
99+
page.on('console', (msg) => {
100+
if (msg.type() === 'warning') {
101+
warnMessages.push(msg.text());
102+
}
103+
});
104+
105+
// Reload to ensure we capture messages from the start if needed,
106+
// although executeBrowserTest already navigated.
107+
await page.reload();
108+
109+
// Wait for the expected number of warnings
110+
let retries = 50;
111+
while (warnMessages.length < 4 && retries > 0) {
112+
await setTimeout(100);
113+
retries--;
114+
}
115+
116+
assert.strictEqual(
117+
warnMessages.length,
118+
4,
119+
`Expected 4 console warnings, but got ${warnMessages.length}:\n${warnMessages.join('\n')}`,
120+
);
121+
122+
const expectedMessages = [
123+
'Inline Script Head',
124+
'Inline Script Body: 1339',
125+
'First External Script: 1338',
126+
'Second External Script: 1337',
127+
];
128+
129+
for (let i = 0; i < expectedMessages.length; i++) {
130+
if (!warnMessages[i].includes(expectedMessages[i])) {
131+
assert.fail(
132+
`Expected warning ${i} to include '${expectedMessages[i]}', but got '${warnMessages[i]}'`,
133+
);
134+
}
135+
}
136+
},
137+
});
143138
}

‎tests/e2e/tests/build/worker.ts‎

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@
88

99
import assert from 'node:assert/strict';
1010
import { readdir } from 'node:fs/promises';
11+
import { setTimeout } from 'node:timers/promises';
1112
import { getGlobalVariable } from '../../utils/env';
1213
import { expectFileToExist, expectFileToMatch, replaceInFile, writeFile } from '../../utils/fs';
1314
import { ng } from '../../utils/process';
1415
import { expectToFail } from '../../utils/utils';
16+
import { executeBrowserTest } from '../../utils/puppeteer';
1517

1618
export default async function () {
1719
const useWebpackBuilder = !getGlobalVariable('argv')['esbuild'];
@@ -55,24 +57,32 @@ export default async function () {
5557
// https://github.com/angular/protractor/issues/2207
5658
await replaceInFile('src/app/app.ts', 'console.log', 'console.warn');
5759

58-
await writeFile(
59-
'e2e/app.e2e-spec.ts',
60-
`
61-
import { AppPage } from './app.po';
62-
import { browser, logging } from 'protractor';
63-
describe('worker bundle', () => {
64-
it('should log worker messages', async () => {
65-
const page = new AppPage();;
66-
page.navigateTo();
67-
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
68-
expect(logs.length).toEqual(1);
69-
expect(logs[0].message).toContain('page got message: worker response to hello');
60+
await executeBrowserTest({
61+
checkFn: async (page) => {
62+
const messages: string[] = [];
63+
page.on('console', (msg) => {
64+
messages.push(msg.text());
7065
});
71-
});
72-
`,
73-
);
7466

75-
await ng('e2e');
67+
// Reload to ensure we capture messages from the start if needed,
68+
// although executeBrowserTest already navigated.
69+
await page.reload();
70+
71+
// Wait for the worker message
72+
let retries = 50;
73+
while (
74+
!messages.some((m) => m.includes('page got message: worker response to hello')) &&
75+
retries > 0
76+
) {
77+
await setTimeout(100);
78+
retries--;
79+
}
80+
81+
if (!messages.some((m) => m.includes('page got message: worker response to hello'))) {
82+
assert.fail(`Expected worker message not found in console. Got:\n${messages.join('\n')}`);
83+
}
84+
},
85+
});
7686
}
7787

7888
async function getWorkerOutputFile(useWebpackBuilder: boolean): Promise<string> {

‎tests/e2e/tests/misc/trusted-types.ts‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import { replaceInFile, writeFile } from '../../utils/fs';
9+
import assert from 'node:assert/strict';
10+
import { replaceInFile } from '../../utils/fs';
1011
import { ng } from '../../utils/process';
1112
import { updateJsonFile } from '../../utils/project';
13+
import { executeBrowserTest } from '../../utils/puppeteer';
1214

1315
export default async function () {
1416
// Add lazy route.
@@ -19,29 +21,6 @@ export default async function () {
1921
`routes: Routes = [{path: 'lazy', loadComponent: () => import('./lazy/lazy').then(c => c.Lazy)}];`,
2022
);
2123

22-
// Add lazy route e2e
23-
await writeFile(
24-
'e2e/src/app.e2e-spec.ts',
25-
`
26-
import { browser, logging, element, by } from 'protractor';
27-
28-
describe('workspace-project App', () => {
29-
it('should display lazy route', async () => {
30-
await browser.get(browser.baseUrl + '/lazy');
31-
expect(await element(by.css('app-lazy p')).getText()).toEqual('lazy works!');
32-
});
33-
34-
afterEach(async () => {
35-
// Assert that there are no errors emitted from the browser
36-
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
37-
expect(logs).not.toContain(jasmine.objectContaining({
38-
level: logging.Level.SEVERE,
39-
}));
40-
});
41-
});
42-
`,
43-
);
44-
4524
const testCases = [
4625
{
4726
aot: false,
@@ -64,7 +43,16 @@ export default async function () {
6443
});
6544

6645
try {
67-
await ng('e2e');
46+
await executeBrowserTest({
47+
checkFn: async (page) => {
48+
const baseUrl = page.url();
49+
await page.goto(new URL('/lazy', baseUrl).href);
50+
51+
await page.waitForSelector('app-lazy p');
52+
const lazyText = await page.$eval('app-lazy p', (el) => el.textContent);
53+
assert.strictEqual(lazyText, 'lazy works!');
54+
},
55+
});
6856
} catch (error) {
6957
console.error(`Test case AOT ${aot} with CSP header ${csp} failed.`);
7058
throw error;

0 commit comments

Comments
 (0)