deps: upgrade puppeteer to v21.3.6 (#15490)

build/build-bundle.js

@@ -190,7 +190,6 @@ async function buildBundle(entryPath, distPath, opts = {minify: true}) {
         // resolved eventually.
         plugins.partialLoaders.inlineFs({
           verbose: Boolean(process.env.DEBUG),
-          ignorePaths: [require.resolve('puppeteer-core/lib/esm/puppeteer/common/Page.js')],
         }),
         plugins.partialLoaders.rmGetModuleDirectory,
         plugins.partialLoaders.replaceText({

cli/test/smokehouse/test-definitions/dobetterweb.js

@@ -494,18 +494,6 @@ const expectations = {
                 }],
               },
             },
-            {
-              // Support for this was added in M109
-              // https://crbug.com/1350944
-              _maxChromiumVersion: '108',
-              reason: 'Pages that have requested notifications permissions are not currently eligible for back/forward cache.',
-              failureType: 'Pending browser support',
-              subItems: {
-                items: [{
-                  frameUrl: 'http://localhost:10200/dobetterweb/dbw_tester.html',
-                }],
-              },
-            },
             {
               // This issue only appears in the DevTools runner for some reason.
               // TODO: Investigate why this doesn't happen on the CLI runner.

clients/lightrider/lightrider-entry.js

@@ -9,8 +9,8 @@
 import {Buffer} from 'buffer';
 
 import log from 'lighthouse-logger';
-import {CDPBrowser} from 'puppeteer-core/lib/esm/puppeteer/common/Browser.js';
-import {Connection as PptrConnection} from 'puppeteer-core/lib/esm/puppeteer/common/Connection.js';
+import {CdpBrowser} from 'puppeteer-core/lib/esm/puppeteer/cdp/Browser.js';
+import {Connection as PptrConnection} from 'puppeteer-core/lib/esm/puppeteer/cdp/Connection.js';
 
 import lighthouse, * as api from '../../core/index.js';
 import {LighthouseError} from '../../core/lib/lh-error.js';
@@ -46,7 +46,7 @@ async function getPageFromConnection(connection) {
 
   const pptrConnection = new PptrConnection(mainTargetInfo.url, transport);
 
-  const browser = await CDPBrowser._create(
+  const browser = await CdpBrowser._create(
     'chrome',
     pptrConnection,
     [] /* contextIds */,

core/gather/session.js

@@ -29,6 +29,7 @@ class ProtocolSession extends CrdpEventEmitter {
     this._nextProtocolTimeout = undefined;
 
     this._handleProtocolEvent = this._handleProtocolEvent.bind(this);
+    // @ts-expect-error Puppeteer expects the handler params to be type `unknown`
     this._cdpSession.on('*', this._handleProtocolEvent);
   }
 
@@ -106,6 +107,7 @@ class ProtocolSession extends CrdpEventEmitter {
    * @return {Promise<void>}
    */
   async dispose() {
+    // @ts-expect-error Puppeteer expects the handler params to be type `unknown`
     this._cdpSession.off('*', this._handleProtocolEvent);
     await this._cdpSession.detach();
   }

core/scripts/pptr-run-devtools.js

@@ -28,7 +28,7 @@ import {fileURLToPath} from 'url';
 import * as puppeteer from 'puppeteer-core';
 import yargs from 'yargs';
 import * as yargsHelpers from 'yargs/helpers';
-import {getChromePath} from 'chrome-launcher';
+import {launch} from 'chrome-launcher';
 import esMain from 'es-main';
 
 import {parseChromeFlags} from '../../cli/run.js';
@@ -300,12 +300,17 @@ function dismissDialog(dialog) {
  * @return {Promise<{lhr: LH.Result, artifacts: LH.Artifacts, logs: string[]}>}
  */
 async function testUrlFromDevtools(url, options = {}) {
-  const {config, chromeFlags} = options;
+  const {config, chromeFlags = []} = options;
 
-  const browser = await puppeteer.launch({
-    executablePath: getChromePath(),
-    args: chromeFlags,
-    devtools: true,
+  const newChromeFlags = [
+    ...chromeFlags,
+    '--auto-open-devtools-for-tabs',
+  ];
+
+  const chrome = await launch({chromeFlags: newChromeFlags});
+
+  const browser = await puppeteer.connect({
+    browserURL: `http://127.0.0.1:${chrome.port}`,
     defaultViewport: null,
   });
 

core/test/gather/driver/target-manager-test.js

@@ -6,7 +6,7 @@
 
 import {EventEmitter} from 'events';
 
-import {CDPSessionImpl} from 'puppeteer-core/lib/cjs/puppeteer/common/Connection.js';
+import {CdpCDPSession} from 'puppeteer-core/lib/cjs/puppeteer/cdp/CDPSession.js';
 
 import {TargetManager} from '../../../gather/driver/target-manager.js';
 import {createMockCdpSession} from '../mock-driver.js';
@@ -251,9 +251,9 @@ describe('TargetManager', () => {
       }
 
       const mockCdpConnection = new MockCdpConnection();
-      /** @type {LH.Puppeteer.CDPSession} */
+      /** @type {import('puppeteer-core').CDPSession} */
       // @ts-expect-error - close enough to the real thing.
-      const cdpSession = new CDPSessionImpl(mockCdpConnection, '', sessionId);
+      const cdpSession = new CdpCDPSession(mockCdpConnection, '', sessionId);
       return cdpSession;
     }
 

core/test/gather/session-test.js

@@ -6,7 +6,7 @@
 
 import {EventEmitter} from 'events';
 
-import {CDPSessionImpl} from 'puppeteer-core/lib/cjs/puppeteer/common/Connection.js';
+import {CdpCDPSession} from 'puppeteer-core/lib/cjs/puppeteer/cdp/CDPSession.js';
 
 import {ProtocolSession} from '../../gather/session.js';
 import {
@@ -17,6 +17,27 @@ import {
   timers,
 } from '../test-utils.js';
 
+/**
+ * @param {number} id
+ * @return {LH.Crdp.Page.FrameNavigatedEvent}
+ */
+function mockFrameNavigated(id) {
+  return {
+    frame: {
+      id: String(id),
+      loaderId: String(id),
+      url: `https://example.com/page${id}`,
+      domainAndRegistry: 'example.com',
+      securityOrigin: 'https://example.com',
+      mimeType: 'text/html',
+      secureContextType: 'Secure',
+      crossOriginIsolatedContextType: 'NotIsolated',
+      gatedAPIFeatures: [],
+    },
+    type: 'Navigation',
+  };
+}
+
 describe('ProtocolSession', () => {
   before(() => timers.useFakeTimers());
   after(() => timers.dispose());
@@ -30,46 +51,49 @@ describe('ProtocolSession', () => {
 
   beforeEach(() => {
     // @ts-expect-error - Individual mock functions are applied as necessary.
-    puppeteerSession = new CDPSessionImpl({_rawSend: fnAny(), send: fnAny()}, '', 'root');
+    puppeteerSession = new CdpCDPSession({_rawSend: fnAny(), send: fnAny()}, '', 'root');
     session = new ProtocolSession(puppeteerSession);
   });
 
   describe('responds to events from the underlying CDPSession', () => {
+    const mockNavigated1 = mockFrameNavigated(1);
+    const mockNavigated2 = mockFrameNavigated(2);
+
     it('once', async () => {
       const callback = fnAny();
 
       session.once('Page.frameNavigated', callback);
-      puppeteerSession.emit('Page.frameNavigated', {id: 1});
+      puppeteerSession.emit('Page.frameNavigated', mockNavigated1);
       expect(callback).toHaveBeenCalledTimes(1);
-      expect(callback).toHaveBeenCalledWith({id: 1});
+      expect(callback).toHaveBeenCalledWith(mockNavigated1);
 
-      puppeteerSession.emit('Page.frameNavigated', {id: 2});
+      puppeteerSession.emit('Page.frameNavigated', mockNavigated2);
       expect(callback).toHaveBeenCalledTimes(1);
     });
 
     it('on', async () => {
       const callback = fnAny();
 
       session.on('Page.frameNavigated', callback);
-      puppeteerSession.emit('Page.frameNavigated', {id: 1});
+      puppeteerSession.emit('Page.frameNavigated', mockNavigated1);
       expect(callback).toHaveBeenCalledTimes(1);
-      expect(callback).toHaveBeenCalledWith({id: 1});
+      expect(callback).toHaveBeenCalledWith(mockNavigated1);
 
-      puppeteerSession.emit('Page.frameNavigated', {id: 2});
+      puppeteerSession.emit('Page.frameNavigated', mockNavigated2);
       expect(callback).toHaveBeenCalledTimes(2);
-      expect(callback).toHaveBeenCalledWith({id: 2});
+      expect(callback).toHaveBeenCalledWith(mockNavigated2);
     });
 
     it('off', async () => {
       const callback = fnAny();
 
       session.on('Page.frameNavigated', callback);
-      puppeteerSession.emit('Page.frameNavigated', {id: 1});
+      puppeteerSession.emit('Page.frameNavigated', mockNavigated1);
       expect(callback).toHaveBeenCalledTimes(1);
-      expect(callback).toHaveBeenCalledWith({id: 1});
+      expect(callback).toHaveBeenCalledWith(mockNavigated1);
 
       session.off('Page.frameNavigated', callback);
-      puppeteerSession.emit('Page.frameNavigated', {id: 2});
+      puppeteerSession.emit('Page.frameNavigated', mockNavigated2);
       expect(callback).toHaveBeenCalledTimes(1);
     });
   });

core/test/scenarios/api-test-pptr.js

@@ -164,7 +164,7 @@ describe('Individual modes API', function() {
       const run = await api.startTimespan(state.page);
       for (const iframe of page.frames()) {
         if (iframe.url().includes('/oopif-simple-page.html')) {
-          iframe.click('button');
+          await iframe.click('button');
         }
       }
       await page.waitForNetworkIdle().catch(() => {});
@@ -180,10 +180,6 @@ describe('Individual modes API', function() {
         .map((r) => ({url: r.url, sessionTargetType: r.sessionTargetType}))
         // @ts-expect-error
         .sort((a, b) => a.url.localeCompare(b.url));
-      expect(networkRequests).toHaveLength(10);
-      expect(networkRequests.filter(r => r.sessionTargetType === 'page')).toHaveLength(2);
-      expect(networkRequests.filter(r => r.sessionTargetType === 'iframe')).toHaveLength(2);
-      expect(networkRequests.filter(r => r.sessionTargetType === 'worker')).toHaveLength(6);
       expect(networkRequests).toMatchInlineSnapshot(`
 Array [
   Object {

package.json

@@ -166,7 +166,7 @@
     "pako": "^2.0.3",
     "preact": "^10.7.2",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "21.1.1",
+    "puppeteer": "^21.3.6",
     "resolve": "^1.22.1",
     "rollup": "^2.52.7",
     "rollup-plugin-polyfill-node": "^0.12.0",
@@ -199,7 +199,7 @@
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "puppeteer-core": "21.1.1",
+    "puppeteer-core": "^21.3.6",
     "robots-parser": "^3.0.1",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",

types/internal/rxjs.d.ts

@@ -22,5 +22,8 @@ declare module 'rxjs' {
   export const tap: any;
   export const throwIfEmpty: any;
   export const firstValueFrom: any;
+  export const delay: any;
+  export const startWith: any;
+  export const switchMap: any;
 }