test(@angular/cli): reuse chrome/chromedriver in E2E tests

This changes the E2E test project setup to reuse the repository's existing puppeteer chrome instance and already downloaded chrome driver.  Previously puppeteer was added to each E2E test project which required an additional download of both chrome and an associated chromedriver.  Downloads previously needed to occur multiple times during the test process due to tests changing/removing the test project's node modules directory.

Author: clydin

tests/legacy-cli/e2e/tests/basic/e2e.ts

@@ -1,26 +1,13 @@
-// TODO(architect): edit the architect config instead of the cli config.
-
 import {
   ng,
-  npm,
   execAndWaitForOutputToMatch,
   killAllProcesses
 } from '../../utils/process';
-import {updateJsonFile} from '../../utils/project';
 import {expectToFail} from '../../utils/utils';
 import {moveFile, copyFile, replaceInFile} from '../../utils/fs';
 
 export default function () {
-  // Should fail without updated webdriver
-  return updateJsonFile('package.json', packageJson => {
-    // Add to npm scripts to make running the binary compatible with Windows
-    const scripts = packageJson['scripts'];
-    scripts['wd:clean'] = 'webdriver-manager clean';
-  })
-    .then(() => npm('run', 'wd:clean'))
-    .then(() => expectToFail(() => ng('e2e', 'test-project', '--no-webdriver-update', '--devServerTarget=')))
-    // Add back the pre-defined version of webdriver. This script is defined when making projects.
-    .then(() => npm('run', 'webdriver-update'))
+  return Promise.resolve()
     // Should fail without serving
     .then(() => expectToFail(() => ng('e2e', 'test-project', '--devServerTarget=')))
     // These should work.
@@ -61,7 +48,10 @@ export default function () {
     .then(() => execAndWaitForOutputToMatch('ng', ['serve'],
       / Compiled successfully./))
     .then(() => ng('e2e', 'test-project', '--devServerTarget='))
-    .then(() => killAllProcesses(), (err: any) => {
+    // Should fail without updated webdriver
+    .then(() => replaceInFile('e2e/protractor.conf.js', /chromeDriver: String.raw`[^`]*`,/, ''))
+    .then(() => expectToFail(() => ng('e2e', 'test-project', '--no-webdriver-update', '--devServerTarget=')))
+    .then(() => killAllProcesses(), (err) => {
       killAllProcesses();
       throw err;
     });

tests/legacy-cli/e2e/tests/commands/add/add-pwa-yarn.ts

@@ -25,9 +25,6 @@ export default async function () {
     }
 
     // 'yarn' will nuke the entire node_modules when it is triggered during the above tests.
-    // Let's restore the previous node_modules state by re-installing using 'npm'
-    // and run 'webdriver-update'. Otherwise, we will start seeing errors in CI like:
-    // Error: Could not find update-config.json. Run 'webdriver-manager update' to download binaries.
+    await rimraf('node_modules');
     await npm('install');
-    await npm('run', 'webdriver-update');
 }

tests/legacy-cli/e2e/tests/generate/library/library-consumption-linker.ts

@@ -12,11 +12,6 @@ export default async function () {
 
   await ng('generate', 'library', 'my-lib');
 
-  // Ensure webdriver is present for E2E (yarn will remove any downloaded drivers)
-  if (getActivePackageManager() === 'yarn') {
-    await silentYarn('run', 'webdriver-update');
-  }
-
   // Enable partial compilation mode (linker) for the library
   // Enable ivy for production as well (current schematic disables ivy in production)
   await updateJsonFile('projects/my-lib/tsconfig.lib.prod.json', config => {

tests/legacy-cli/e2e/tests/misc/webpack-5.ts

@@ -9,7 +9,6 @@ export default async function() {
     json.resolutions = { webpack: '5.1.3' };
   });
   await silentYarn();
-  await silentYarn('webdriver-update');
 
   // Ensure webpack 5 is used
   const { stdout } = await silentYarn('list', '--pattern', 'webpack');

tests/legacy-cli/e2e/tests/update/update-8.ts

@@ -13,12 +13,11 @@ export default async function() {
   await useCIChrome('./');
   await useCIChrome('./e2e/');
   await useCIDefaults('eight-project');
-  await installWorkspacePackages(false);
+  await installWorkspacePackages();
 
   // Update Angular.
   const extraUpdateArgs = await isPrereleaseCli() ? ['--next', '--force'] : [];
   await ng('update', '@angular/core', ...extraUpdateArgs);
-  await silentNpm('run', 'webdriver-update');
 
   // Run CLI commands.
   await ng('generate', 'component', 'my-comp');

tests/legacy-cli/e2e/utils/assets.ts

@@ -53,7 +53,7 @@ export async function createProjectFromAsset(
   }
 
   if (!skipInstall) {
-    await installWorkspacePackages(false);
+    await installWorkspacePackages();
   }
 
   return dir;

tests/legacy-cli/e2e/utils/packages.ts

@@ -10,19 +10,13 @@ export function getActivePackageManager(): 'npm' | 'yarn' {
   return value || 'npm';
 }
 
-export async function installWorkspacePackages(updateWebdriver = true): Promise<void> {
+export async function installWorkspacePackages(): Promise<void> {
   switch (getActivePackageManager()) {
     case 'npm':
       await silentNpm('install');
-      if (updateWebdriver) {
-        await silentNpm('run', 'webdriver-update');
-      }
       break;
     case 'yarn':
       await silentYarn();
-      if (updateWebdriver) {
-        await silentYarn('webdriver-update');
-      }
       break;
   }
 }

tests/legacy-cli/e2e/utils/project.ts

@@ -95,7 +95,7 @@ export async function prepareProjectForE2e(name) {
   console.log(
     `Project ${name} created... Installing npm.`,
   );
-  await installWorkspacePackages(false);
+  await installWorkspacePackages();
   await useCIDefaults(
     name,
   );
@@ -244,49 +244,44 @@ export function useCIDefaults(projectName = 'test-project') {
       const e2eTargets = e2eProject.targets || e2eProject.architect;
       e2eTargets.e2e.options.webdriverUpdate = false;
     }
-  })
-    .then(() => updateJsonFile('package.json', json => {
-      // Use matching versions of Chromium and ChromeDriver.
-      // https://github.com/GoogleChrome/puppeteer/releases
-      // http://chromedriver.chromium.org/downloads
-      json['scripts']['webdriver-update'] = 'webdriver-manager update' +
-        ` --standalone false --gecko false --versions.chrome 89.0.4389.0`; // Supports Chrome 89
-
-    }))
-    .then(() => npm('run', 'webdriver-update'));
+  });
 }
 
 export function useCIChrome(projectDir: string) {
   const dir = projectDir ? projectDir + '/' : '';
   const protractorConf = `${dir}protractor.conf.js`;
   const karmaConf = `${dir}karma.conf.js`;
 
+  const chromePath = require('puppeteer').executablePath();
+  const chromeDriverPath = require('webdriver-manager/selenium/update-config.json').chrome.last;
+
   return Promise.resolve()
     .then(() => updateJsonFile('package.json', json => {
-      // Use matching versions of Chromium (via puppeteer) and ChromeDriver.
-      // https://github.com/GoogleChrome/puppeteer/releases
-      // http://chromedriver.chromium.org/downloads
-      json['devDependencies']['puppeteer'] = '7.0.0'; // Chromium 89.0.4389.0 (r843427)
       json['devDependencies']['karma-chrome-launcher'] = '~3.1.0';
     }))
     // Use Pupeteer in protractor if a config is found on the project.
-    .then(() => {
+    .then(async () => {
       if (fs.existsSync(protractorConf)) {
-        return replaceInFile(protractorConf,
+        await replaceInFile(protractorConf,
           `browserName: 'chrome'`,
           `browserName: 'chrome',
           chromeOptions: {
             args: ['--headless'],
-            binary: require('puppeteer').executablePath()
+            binary: String.raw\`${chromePath}\`,
           }
         `);
+        await replaceInFile(
+          protractorConf,
+          'directConnect: true,',
+          `directConnect: true, chromeDriver: String.raw\`${chromeDriverPath}\`,`,
+        );
       }
     })
     // Use Pupeteer in karma if a config is found on the project.
     .then(() => {
       if (fs.existsSync(karmaConf)) {
         return prependToFile(karmaConf,
-          `process.env.CHROME_BIN = require('puppeteer').executablePath();`)
+          `process.env.CHROME_BIN = String.raw\`${chromePath}\`;`)
           .then(() => replaceInFile(karmaConf,
             `browsers: ['Chrome']`,
             `browsers: ['Chrome'],