angular · gkalpak · Feb 13, 2020 · Feb 13, 2020 · Feb 13, 2020 · gregmagolan
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -65,8 +65,8 @@ var_10: &only_on_master
 #             (Using the tag in not necessary when pinning by ID, but include it anyway for documentation purposes.)
 # **NOTE 2**: If you change the version of the docker images, also change the `cache_key` suffix.
 # **NOTE 3**: If you change the version of the `*-browsers` docker image, make sure the
-#             `CI_CHROMEDRIVER_VERSION_ARG` env var (in `.circleci/env.sh`) points to a ChromeDriver
-#             version that is compatible with the Chrome version in the image.
+#             `--versions.chrome` arg in `integration/bazel-schematics/test.sh` specifies a
+#             ChromeDriver version that is compatible with the Chrome version in the image.
 executors:
   default-executor:
     parameters:
@@ -446,13 +446,13 @@ jobs:
         type: boolean
         default: false
     executor:
-      # Needed because the example e2e tests depend on Chrome.
-      name: browsers-executor
+      name: default-executor
       resource_class: xlarge
     parallelism: 5
     steps:
       - custom_attach_workspace
       - init_environment
+      - install_chrome_libs
         # Install aio
       - run: yarn --cwd aio install --frozen-lockfile --non-interactive
       - when:
@@ -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

diff --git a/.circleci/env.sh b/.circleci/env.sh
@@ -19,11 +19,6 @@ setPublicVar CI_AIO_MIN_PWA_SCORE "95";
 # This is the branch being built; e.g. `pull/12345` for PR builds.
 setPublicVar CI_BRANCH "$CIRCLE_BRANCH";
 setPublicVar CI_BUILD_URL "$CIRCLE_BUILD_URL";
-# ChromeDriver version compatible with the Chrome version included in the docker image used in
-# `.circleci/config.yml`. See http://chromedriver.chromium.org/downloads for a list of versions.
-# This variable is intended to be passed as an arg to the `webdriver-manager update` command (e.g.
-# `"postinstall": "webdriver-manager update $CI_CHROMEDRIVER_VERSION_ARG"`).
-setPublicVar CI_CHROMEDRIVER_VERSION_ARG "--versions.chrome 79.0.3945.130";
 setPublicVar CI_COMMIT "$CIRCLE_SHA1";
 # `CI_COMMIT_RANGE` is only used on push builds (a.k.a. non-PR, non-scheduled builds and rerun
 # workflows of such builds).

diff --git a/aio/content/examples/component-interaction/example-config.json b/aio/content/examples/component-interaction/example-config.json
@@ -4,9 +4,10 @@
       "cmd": "yarn",
       "args": [
         "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]
     }
   ]
-}
+}
diff --git a/aio/content/examples/dependency-injection/example-config.json b/aio/content/examples/dependency-injection/example-config.json
@@ -4,9 +4,10 @@
       "cmd": "yarn",
       "args": [
         "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]
     }
   ]
-}
+}
diff --git a/aio/content/examples/i18n/example-config.json b/aio/content/examples/i18n/example-config.json
@@ -5,9 +5,10 @@
       "cmd": "yarn",
       "args": [
         "e2e",
+        "--protractor-config=e2e/protractor-puppeteer.conf.js",
         "--no-webdriver-update",
         "--port={PORT}"
       ]
     }
   ]
-}
+}
diff --git a/aio/content/examples/service-worker-getting-started/example-config.json b/aio/content/examples/service-worker-getting-started/example-config.json
@@ -1,7 +1,7 @@
 {
   "projectType": "service-worker",
   "e2e": [
-    {"cmd": "yarn", "args": ["e2e", "--no-webdriver-update", "--port={PORT}"]},
+    {"cmd": "yarn", "args": ["e2e", "--protractor-config=e2e/protractor-puppeteer.conf.js", "--no-webdriver-update", "--port={PORT}"]},
     {"cmd": "yarn", "args": ["build", "--prod"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw.json'), 'ngsw.json is missing')"]},
     {"cmd": "node", "args": ["--eval", "assert(fs.existsSync('./dist/ngsw-worker.js'), 'ngsw-worker.js is missing')"]},

diff --git a/aio/karma.conf.js b/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,

diff --git a/aio/scripts/audit-web-app.js b/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);

diff --git a/aio/tests/deployment/e2e/protractor.conf.js b/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',

diff --git a/aio/tests/e2e/protractor.conf.js b/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/',

diff --git a/aio/tools/example-zipper/exampleZipper.js b/aio/tools/example-zipper/exampleZipper.js
@@ -112,6 +112,7 @@ class ExampleZipper {
       '!**/npm-debug.log',
       '!**/example-config.json',
       '!**/wallaby.js',
+      '!e2e/protractor-puppeteer.conf.js',
       // AOT related files
       '!**/aot/**/*.*',
       '!**/*-aot.*'

diff --git a/aio/tools/examples/example-boilerplate.js b/aio/tools/examples/example-boilerplate.js
@@ -15,8 +15,9 @@ const BOILERPLATE_PATHS = {
     'src/environments/environment.prod.ts', 'src/environments/environment.ts',
     'src/assets/.gitkeep', 'browserslist', 'src/favicon.ico', 'karma.conf.js',
     'src/polyfills.ts', 'src/test.ts', 'tsconfig.app.json', 'tsconfig.spec.json',
-    'tslint.json', 'e2e/src/app.po.ts', 'e2e/protractor.conf.js', 'e2e/tsconfig.json',
-    '.editorconfig', 'angular.json', 'package.json', 'tsconfig.json', 'tslint.json'
+    'tslint.json', 'e2e/src/app.po.ts', 'e2e/protractor-puppeteer.conf.js',
+    'e2e/protractor.conf.js', 'e2e/tsconfig.json', '.editorconfig', 'angular.json', 'package.json',
+    'tsconfig.json', 'tslint.json'
   ],
   systemjs: [
     'src/systemjs-angular-loader.js', 'src/systemjs.config.js', 'src/tsconfig.json',

diff --git a/aio/tools/examples/example-boilerplate.spec.js b/aio/tools/examples/example-boilerplate.spec.js
@@ -10,7 +10,7 @@ describe('example-boilerplate tool', () => {
     const sharedDir = path.resolve(__dirname, 'shared');
     const sharedNodeModulesDir = path.resolve(sharedDir, 'node_modules');
     const BPFiles = {
-      cli: 19,
+      cli: 20,
       i18n: 2,
       universal: 2,
       systemjs: 7,

diff --git a/aio/tools/examples/run-example-e2e.js b/aio/tools/examples/run-example-e2e.js
@@ -262,7 +262,13 @@ function runE2eTestsCLI(appDir, outputFile, bufferOutput, port) {
   const config = loadExampleConfig(appDir);
   const commands = config.e2e || [{
     cmd: 'yarn',
-    args: ['e2e', '--prod', '--no-webdriver-update', `--port=${port || DEFAULT_CLI_EXAMPLE_PORT}`]
+    args: [
+      'e2e',
+      '--prod',
+      '--protractor-config=e2e/protractor-puppeteer.conf.js',
+      '--no-webdriver-update',
+      '--port={PORT}',
+    ],
   }];
   let bufferedOutput = `\n\n============== AIO example output for: ${appDir}\n\n`;
 

diff --git a/aio/tools/examples/shared/boilerplate/cli/e2e/protractor-puppeteer.conf.js b/aio/tools/examples/shared/boilerplate/cli/e2e/protractor-puppeteer.conf.js
@@ -0,0 +1,19 @@
+// @ts-check
+// A protractor config to use to run the tests using the Chrome version provided by `puppeteer`.
+// This is useful to ensure deterministic runs on CI and locally. This file is ignored when creating
+// StackBlitz examples and ZIP archives for each example.
+
+const {config} = require('./protractor.conf.js');
+
+exports.config = {
+  ...config,
+  capabilities: {
+    ...config.capabilities,
+    chromeOptions: {
+      ...config.capabilities.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'],
+    },
+  },
+};
diff --git a/aio/tools/examples/shared/package.json b/aio/tools/examples/shared/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "http-server": "http-server",
     "protractor": "protractor",
-    "webdriver:update": "webdriver-manager update --standalone false --gecko false $CI_CHROMEDRIVER_VERSION_ARG",
+    "webdriver:update": "node ../../../../scripts/webdriver-manager-update.js",
     "preinstall": "node ../../../../tools/yarn/check-yarn.js",
     "postinstall": "yarn webdriver:update"
   },
@@ -74,6 +74,7 @@
     "lite-server": "^2.2.2",
     "lodash": "^4.16.2",
     "protractor": "^5.4.2",
+    "puppeteer": "2.1.1",
     "rimraf": "^2.5.4",
     "rollup": "^1.1.0",
     "rollup-plugin-commonjs": "^9.2.1",

diff --git a/aio/tools/examples/shared/protractor.config.js b/aio/tools/examples/shared/protractor.config.js
@@ -20,7 +20,12 @@ exports.config = {
 
   // Capabilities to be passed to the webdriver instance.
   capabilities: {
-    'browserName': 'chrome',
+    browserName: 'chrome',
+    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'],
+    },
   },
 
   // Framework to use. Jasmine is recommended.