[browser tests] update Puppeteer

The version of Puppeteer we had is quite old and includes a version of
Chromium that does not support some of the DOM API functions we use in the
code base. e.g. HTMLElement.replaceChildren() [1], that we use in
hover-service.ts

The latest version seems to work well, and supports the example above,
so I went with that. Note that Puppeteer now bundles its typing file, and
that some of the APIs have changed slightly, requiring a small adaptation
on our end.

[1]: https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren#browser_compatibility

Signed-off-by: Marc Dumais <[email protected]>

dev-packages/cli/package.json

@@ -39,24 +39,23 @@
     "@types/chai": "^4.2.7",
     "@types/mocha": "^10.0.0",
     "@types/node-fetch": "^2.5.7",
-    "@types/puppeteer": "^2.0.0",
     "chai": "^4.2.0",
     "chalk": "4.0.0",
     "decompress": "^4.2.1",
     "glob": "^8.0.3",
     "limiter": "^2.1.0",
     "log-update": "^4.0.0",
     "mocha": "^10.1.0",
-    "puppeteer": "^2.0.0",
-    "puppeteer-to-istanbul": "^1.2.2",
+    "puppeteer": "^19.7.2",
+    "puppeteer-core": "^19.7.2",
+    "puppeteer-to-istanbul": "^1.4.0",
     "temp": "^0.9.1",
     "yargs": "^15.3.1"
   },
   "devDependencies": {
     "@types/chai": "^4.2.7",
     "@types/mocha": "^10.0.0",
     "@types/node-fetch": "^2.5.7",
-    "@types/proxy-from-env": "^1.0.1",
-    "@types/puppeteer": "^2.0.0"
+    "@types/proxy-from-env": "^1.0.1"
   }
 }

dev-packages/cli/src/run-test.ts

@@ -17,12 +17,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import * as net from 'net';
-import * as puppeteer from 'puppeteer';
+import * as puppeteer from 'puppeteer-core';
 import newTestPage, { TestFileOptions } from './test-page';
 
 export interface TestOptions {
     start: () => Promise<net.AddressInfo>
-    launch?: puppeteer.LaunchOptions
+    launch?: puppeteer.PuppeteerLaunchOptions
     files?: Partial<TestFileOptions>
     coverage?: boolean
 }
@@ -50,8 +50,14 @@ export default async function runTest(options: TestOptions): Promise<void> {
             // the app has focus, to avoid failures of tests that query the UI's state.
             if (launch && launch.devtools) {
                 promises.push(testPage.waitForSelector('#theia-app-shell.p-Widget.theia-ApplicationShell')
-                    .then(e => e.click()));
+                    .then(e => {
+                        // eslint-disable-next-line no-null/no-null
+                        if (e !== null) {
+                            e.click();
+                        }
+                    }));
             }
+
             // Clear application's local storage to avoid reusing previous state
             promises.push(testPage.evaluate(() => localStorage.clear()));
             await Promise.all(promises);

dev-packages/cli/src/test-page.ts

@@ -16,7 +16,7 @@
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import * as puppeteer from 'puppeteer';
+import * as puppeteer from 'puppeteer-core';
 const collectFiles: (options: TestFileOptions) => string[] = require('mocha/lib/cli/collect-files');
 
 export interface TestFileOptions {

dev-packages/cli/src/theia.ts

@@ -26,6 +26,8 @@ import downloadPlugins from './download-plugins';
 import runTest from './run-test';
 import { LocalizationManager, extract } from '@theia/localization-manager';
 
+const { executablePath } = require('puppeteer');
+
 process.on('unhandledRejection', (reason, promise) => {
     throw reason;
 });
@@ -527,7 +529,8 @@ async function theiaCli(): Promise<void> {
                         args: ['--no-sandbox'],
                         // eslint-disable-next-line no-null/no-null
                         defaultViewport: null, // view port can take available space instead of 800x600 default
-                        devtools: testInspect
+                        devtools: testInspect,
+                        executablePath: executablePath()
                     },
                     files: {
                         extension: testExtension,

package.json

@@ -15,7 +15,6 @@
     "@types/chai-string": "^1.4.0",
     "@types/jsdom": "^11.0.4",
     "@types/node": "16",
-    "@types/puppeteer": "^2.0.0",
     "@types/sinon": "^10.0.6",
     "@types/temp": "^0.8.29",
     "@types/uuid": "^7.0.3",
@@ -45,8 +44,9 @@
     "node-gyp": "^9.0.0",
     "nsfw": "^2.2.4",
     "nyc": "^15.0.0",
-    "puppeteer": "^2.0.0",
-    "puppeteer-to-istanbul": "^1.2.2",
+    "puppeteer": "^19.7.2",
+    "puppeteer-core": "^19.7.2",
+    "puppeteer-to-istanbul": "^1.4.0",
     "rimraf": "^2.6.1",
     "sinon": "^12.0.0",
     "temp": "^0.8.3",