build: use puppeteer in integration/bazel-schematics (#33927)

PR Close #33927

integration/bazel-schematics/package.json

@@ -19,9 +19,15 @@
     "@angular/router": "file:../../node_modules/@angular/router",
     "@bazel/bazel": "file:../../node_modules/@bazel/bazel",
     "@types/node": "file:../../node_modules/@types/node",
+    "protractor": "file:../../node_modules/protractor",
+    "puppeteer": "file:../../node_modules/puppeteer",
     "typescript": "file:../../node_modules/typescript",
     "tslib": "file:../../node_modules/tslib"
   },
+  "//resolutions-comment": "Ensure a single version of webdriver-manager which comes from root node_modules that has already run webdriver-manager update",
+  "resolutions": {
+    "**/webdriver-manager": "file:../../node_modules/webdriver-manager"
+  },
   "scripts": {
     "test": "./test.sh"
   }

integration/bazel-schematics/test.sh

@@ -27,20 +27,27 @@ function installLocalPackages() {
     local_packages+=("@angular/${package}@file:${pwd}/../node_modules/@angular/${package}")
   done
 
-  # keep typescript, tslib, and @types/node versions in sync with the ones used in this repo
+  # keep protractor, typescript, tslib, and @types/node versions in sync with the ones used in this repo
+  local_packages+=("protractor@file:${pwd}/../node_modules/protractor")
   local_packages+=("typescript@file:${pwd}/../node_modules/typescript")
   local_packages+=("tslib@file:${pwd}/../node_modules/tslib")
   local_packages+=("@types/node@file:${pwd}/../node_modules/@types/node")
 
+  # add protractor, puppeteer & webdriver-manager so we get the chrome & chromedriver binaries
+  # that have already been downloaded at the root
+  local_packages+=("puppeteer@file:${pwd}/../node_modules/puppeteer")
+  local_packages+=("webdriver-manager@file:${pwd}/../node_modules/webdriver-manager")
+
   yarn add --ignore-scripts --silent "${local_packages[@]}"
 }
 
-function patchKarmaConfForHeadless() {
+function patchKarmaConf() {
+  sedi "s#module.exports#process.env.CHROME_BIN = require\('puppeteer'\).executablePath\(\); module.exports#" ./karma.conf.js
   sedi "s#browsers\: \['Chrome'\],#customLaunchers\: \{ ChromeHeadlessNoSandbox\: \{ base\: 'ChromeHeadless', flags\: \['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'\] \} \}, browsers\: \['ChromeHeadlessNoSandbox'\],#" ./karma.conf.js
 }
 
-function patchProtractorConfForHeadless() {
+function patchProtractorConf() {
-  sedi "s#browserName\: 'chrome'#browserName\: 'chrome', chromeOptions\: \{ args: \['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'\] \},#" ./e2e/protractor.conf.js
+  sedi "s#browserName\: 'chrome'#browserName\: 'chrome', chromeOptions\: \{ binary: require\('puppeteer'\).executablePath\(\), args: \['--no-sandbox', '--headless', '--disable-gpu', '--disable-dev-shm-usage', '--hide-scrollbars', '--mute-audio'\] \},#" ./e2e/protractor.conf.js
 }
 
 function testBazel() {
@@ -51,8 +58,8 @@ function testBazel() {
   # Create project
   ng new demo --collection=@angular/bazel --routing --skip-git --skip-install --style=scss
   cd demo
-  patchKarmaConfForHeadless
+  patchKarmaConf
-  patchProtractorConfForHeadless
+  patchProtractorConf
   installLocalPackages
   ng generate component widget --style=css
   ng build
@@ -73,9 +80,6 @@ function testNonBazel() {
   yarn --cwd node_modules/@angular/cli version --new-version 0.0.0 --no-git-tag-version
   # re-add build-angular
   yarn add --dev file:../node_modules/@angular-devkit/build-angular
-  # TODO: Find a way to use the Chrome version provided by `puppeteer` as the rest of the
-  #       integration projects. See https://github.com/angular/angular/pull/35049 for details.
-  yarn webdriver-manager update --gecko=false --standalone=false --versions.chrome=79.0.3945.130;
   ng build --progress=false
   ng test --progress=false --watch=false
   ng e2e --port 0 --configuration=production --webdriver-update=false