build: several minor fixes related to using puppeteer (#35381)

This is a follow-up to #35049 with a few minor fixes related to using
the browser provided by `puppeteer` to run tests. Included fixes:

- Make the `webdriver-manager-update.js` really portable. (Previously,
  it needed to be run from the directory that contained the
  `node_modules/` directory. Now, it can be executed from a subdirectory
  and will correctly resolve dependencies.)

- Use the `puppeteer`-based setup in AIO unit and e2e tests to ensure
  that the downloaded ChromeDriver version matches the browser version
  used in tests.

- Use the `puppeteer`-based setup in the `aio_monitoring_stable` CI job
  (as happens with `aio_monitoring_next`).

- Use the [recommended way][1] of getting the browser port when using
  `puppeteer` with `lighthouse` and avoid hard-coding the remote
  debugging port (to be able to handle multiple instances running
  concurrently).

[1]: https://github.com/GoogleChrome/lighthouse/blame/51df179a0/docs/puppeteer.md#L49

PR Close #35381

.circleci/config.yml

@@ -631,12 +631,11 @@ jobs:
       - run: ./scripts/ci/publish-build-artifacts.sh
 
   aio_monitoring_stable:
-    # This job needs Chrome to be globally installed because the tests run with Protractor
-    # which does not load the browser through the Bazel webtesting rules.
-    executor: browsers-executor
+    executor: default-executor
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
       - run: setPublicVar_CI_STABLE_BRANCH
       - run:
           name: Check out `aio/` and yarn from the stable branch

aio/karma.conf.js

@@ -35,10 +35,10 @@ module.exports = function (config) {
       ChromeHeadlessNoSandbox: {
         base: 'ChromeHeadless',
         // See /integration/README.md#browser-tests for more info on these args
-        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio']
-      }
+        flags: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+      },
     },
-    browsers: [process.env['CI'] ? 'ChromeHeadlessNoSandbox' : 'Chrome'],
+    browsers: ['ChromeHeadlessNoSandbox'],
     browserNoActivityTimeout: 60000,
     singleRun: false,
     restartOnFileChange: true,

aio/scripts/audit-web-app.js

@@ -27,10 +27,10 @@
  */
 
 // Imports
-const puppeteer = require('puppeteer');
 const lighthouse = require('lighthouse');
 const printer = require('lighthouse/lighthouse-cli/printer');
 const logger = require('lighthouse-logger');
+const puppeteer = require('puppeteer');
 
 // Constants
 const AUDIT_CATEGORIES = ['accessibility', 'best-practices', 'performance', 'pwa', 'seo'];
@@ -83,10 +83,8 @@ function formatScore(score) {
 }
 
 async function launchChromeAndRunLighthouse(url, flags, config) {
-  const browser = await puppeteer.launch({
-    headless: true,
-    args: ['--remote-debugging-port=9222']});
-  flags.port = browser.port;
+  const browser = await puppeteer.launch();
+  flags.port = (new URL(browser.wsEndpoint())).port;
 
   try {
     return await lighthouse(url, flags, config);

aio/tests/deployment/e2e/protractor.conf.js

@@ -14,11 +14,11 @@ exports.config = {
   suite: 'full',
   capabilities: {
     browserName: 'chrome',
-    chromeOptions: process.env['CI'] ? {
+    chromeOptions: {
       binary: require('puppeteer').executablePath(),
       // See /integration/README.md#browser-tests for more info on these args
-      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio']
-    } : {},
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+    },
   },
   directConnect: true,
   framework: 'jasmine',

aio/tests/e2e/protractor.conf.js

@@ -14,11 +14,11 @@ exports.config = {
   ],
   capabilities: {
     browserName: 'chrome',
-    chromeOptions: process.env['CI'] ? {
+    chromeOptions: {
       binary: require('puppeteer').executablePath(),
       // See /integration/README.md#browser-tests for more info on these args
-      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio']
-    } : {},
+      args: ['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'],
+    },
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',

scripts/puppeteer-chrome-versions.js

@@ -9,8 +9,8 @@
 
 // Mapping of puppeteer releases to their default Chrome version
 // derived from https://github.com/puppeteer/puppeteer/blob/master/docs/api.md.
-// The puppeteer package.json file the Chrome revision such as
-// "chromium_revision": "722234" but this does not map easily to the Chrome
+// The puppeteer package.json file contains the compatible Chrome revision such as
+// "chromium_revision": "722234" but this does not map easily to the Chrome version
 // so we use this mapping here instead.
 module.exports = {
   "2.1.1": "80.0.3987.0",

scripts/webdriver-manager-update.js

@@ -10,17 +10,19 @@
  */
 // Use process.cwd() so that this script is portable and can be used in /aio
 // where this will require /aio/node_modules/puppeteer
-const puppeteerVersion = require(`${process.cwd()}/node_modules/puppeteer/package.json`).version;
+const puppeteerPkgPath = require.resolve('puppeteer/package.json', {paths: [process.cwd()]});
+const puppeteerVersion = require(puppeteerPkgPath).version;
 const chromeVersionMap = require('./puppeteer-chrome-versions');
 const spawnSync = require('child_process').spawnSync;
 
 const version = chromeVersionMap[puppeteerVersion];
 if (!version) {
-  console.error(`[webdriver-manager-update.js] Error: Could not Chrome version for Puppeteer version '${puppeteerVersion}' in Chrome/Puppeteer version map. Please update /scripts/puppeteer-chrome-versions.js.`);
+  console.error(`[webdriver-manager-update.js] Error: Could not find Chrome version for Puppeteer version '${puppeteerVersion}' in Chrome/Puppeteer version map. Please update /scripts/puppeteer-chrome-versions.js.`);
   process.exit(1);
 }
 
 const args = [
+  'webdriver-manager',
   'update',
   '--gecko=false',
   '--standalone=false',
@@ -30,13 +32,12 @@ const args = [
   ...process.argv.slice(2),
 ];
 
-const isWindows = process.platform === 'win32';
-const result = spawnSync(`${process.cwd()}/node_modules/.bin/webdriver-manager${isWindows ? '.cmd' : ''}`, args, {stdio: 'inherit'});
+const result = spawnSync('yarn', args, {shell: true, stdio: 'inherit'});
 if (result.error) {
-  console.error(`[webdriver-manager-update.js] Call to 'webdriver-manager update ${args.join(' ')}' failed with error code ${result.error.code}`);
+  console.error(`[webdriver-manager-update.js] Call to 'yarn ${args.join(' ')}' failed with error code ${result.error.code}`);
   process.exit(result.status);
 }
 if (result.status) {
-  console.error(`[webdriver-manager-update.js] Call to 'webdriver-manager update ${args.join(' ')}' failed with error code ${result.status}`);
+  console.error(`[webdriver-manager-update.js] Call to 'yarn ${args.join(' ')}' failed with error code ${result.status}`);
   process.exit(result.status);
 }