test: replace 'private-e2e' schematic with explicit setup in 'browsers' E2E test

The 'browsers' E2E test now explicitly installs its required dependencies and configures the Protractor builder manually. This replaces the reliance on the 'private-e2e' schematic, ensuring the test remains functional following the removal of global Protractor setup from the E2E utilities.

Author: clydin

tests/e2e/tests/misc/browsers.ts

@@ -1,16 +1,51 @@
 import express from 'express';
 import * as path from 'node:path';
 import { copyProjectAsset } from '../../utils/assets';
-import { replaceInFile } from '../../utils/fs';
+import { appendToFile, createDir, replaceInFile, writeFile } from '../../utils/fs';
 import { ng } from '../../utils/process';
+import { installPackage } from '../../utils/packages';
+import { updateJsonFile } from '../../utils/project';
+
+/**
+ * The list of development dependencies used by the E2E protractor-based builder.
+ */
+const E2E_DEV_DEPENDENCIES = [
+  'protractor@~7.0.0',
+  'jasmine-spec-reporter@~7.0.0',
+  'ts-node@~10.9.0',
+  '@types/node@^20.17.19',
+];
 
 export default async function () {
   // Ensure SauceLabs configuration
   if (!process.env['SAUCE_USERNAME'] || !process.env['SAUCE_ACCESS_KEY']) {
     throw new Error('SauceLabs is not configured.');
   }
 
-  await ng('generate', 'private-e2e', '--related-app-name', 'test-project');
+  for (const e2eDep of E2E_DEV_DEPENDENCIES) {
+    await installPackage(e2eDep);
+  }
+
+  // Setup `protractor` builder.
+  await updateJsonFile('angular.json', (config) => {
+    config.projects['test-project'].architect['e2e'] = {
+      builder: '@angular-devkit/build-angular:protractor',
+      options: {
+        devServerTarget: '',
+        protractorConfig: 'e2e/protractor-saucelabs.conf.js',
+      },
+    };
+  });
+
+  await appendToFile(
+    'src/app/app.config.ts',
+    "import { provideProtractorTestingSupport } from '@angular/platform-browser';\n",
+  );
+  await replaceInFile(
+    'src/app/app.config.ts',
+    'providers: [',
+    'providers: [\n    provideProtractorTestingSupport,\n',
+  );
 
   // Workaround for https://github.com/angular/angular/issues/32192
   await replaceInFile('src/app/app.html', /class="material-icons"/g, '');
@@ -20,19 +55,39 @@ export default async function () {
   // Add Protractor configuration
   await copyProjectAsset('protractor-saucelabs.conf.js', 'e2e/protractor-saucelabs.conf.js');
 
-  // Remove browser log checks as they are only supported with the chrome webdriver
-  await replaceInFile(
+  // Add App E2E test file
+  await createDir('e2e/src');
+  await writeFile(
     'e2e/src/app.e2e-spec.ts',
-    'await browser.manage().logs().get(logging.Type.BROWSER)',
-    '[] as any',
+    `
+import { browser, by, element, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  it('should display welcome message', async () => {
+    await browser.get(browser.baseUrl);
+    expect((await element(by.css('h1')).getText()).trim()).toEqual('Hello, test-project');
+  });
+});
+`,
   );
 
-  // Workaround defect in getText WebDriver implementation for Safari/Edge
-  // Leading and trailing space is not removed
-  await replaceInFile(
-    'e2e/src/app.e2e-spec.ts',
-    'await page.getTitleText()',
-    '(await page.getTitleText()).trim()',
+  // Add App E2E tsconfig file
+  await writeFile(
+    'e2e/tsconfig.json',
+    `
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2019",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}
+`,
   );
 
   // Setup server