lighthouse 9.5.0-dev.20220607 → 9.6.2

package/lighthouse-core/fraggle-rock/gather/session.js

@@ -6,6 +6,7 @@
 'use strict';
 
 const LHError = require('../../lib/lh-error.js');
+const SessionEmitMonkeypatch = Symbol('monkeypatch');
 
 // Controls how long to wait for a response after sending a DevTools protocol command.
 const DEFAULT_PROTOCOL_TIMEOUT = 30000;
@@ -13,7 +14,7 @@ const DEFAULT_PROTOCOL_TIMEOUT = 30000;
 /** @implements {LH.Gatherer.FRProtocolSession} */
 class ProtocolSession {
   /**
-   * @param {LH.Puppeteer.CDPSession} session
+   * @param {import('puppeteer').CDPSession} session
    */
   constructor(session) {
     this._session = session;
@@ -23,12 +24,22 @@ class ProtocolSession {
     this._nextProtocolTimeout = undefined;
     /** @type {WeakMap<any, any>} */
     this._callbackMap = new WeakMap();
-  }
 
-  sessionId() {
-    return this._targetInfo && this._targetInfo.type === 'iframe' ?
-      this._targetInfo.targetId :
-      undefined;
+    // FIXME: Monkeypatch puppeteer to be able to listen to *all* protocol events.
+    // This patched method will now emit a copy of every event on `*`.
+    const originalEmit = session.emit;
+    // @ts-expect-error - Test for the monkeypatch.
+    if (originalEmit[SessionEmitMonkeypatch]) return;
+    session.emit = (method, ...args) => {
+      // OOPIF sessions need to emit their sessionId so downstream processors can recognize
+      // the target the event came from.
+      const sessionId = this._targetInfo && this._targetInfo.type === 'iframe' ?
+        this._targetInfo.targetId : undefined;
+      originalEmit.call(session, '*', {method, params: args[0], sessionId});
+      return originalEmit.call(session, method, ...args);
+    };
+    // @ts-expect-error - It's monkeypatching 🤷‍♂️.
+    session.emit[SessionEmitMonkeypatch] = true;
   }
 
   /** @param {LH.Crdp.Target.TargetInfo} targetInfo */
@@ -82,7 +93,7 @@ class ProtocolSession {
    * @param {(session: ProtocolSession) => void} callback
    */
   addSessionAttachedListener(callback) {
-    /** @param {LH.Puppeteer.CDPSession} session */
+    /** @param {import('puppeteer').CDPSession} session */
     const listener = session => callback(new ProtocolSession(session));
     this._callbackMap.set(callback, listener);
     this._getConnection().on('sessionattached', listener);
@@ -99,31 +110,19 @@ class ProtocolSession {
   }
 
   /**
-   * Bind to puppeteer's '*' event that fires for *any* protocol event,
-   * and wrap it with data about the protocol message instead of just the event.
+   * Bind to our custom event that fires for *any* protocol event.
    * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
    */
   addProtocolMessageListener(callback) {
-    /**
-     * @param {any} method
-     * @param {any} event
-     */
-    const listener = (method, event) => callback({
-      method,
-      params: event,
-      sessionId: this.sessionId(),
-    });
-    this._callbackMap.set(callback, listener);
-    this._session.on('*', /** @type {*} */ (listener));
+    this._session.on('*', /** @type {*} */ (callback));
   }
 
   /**
+   * Unbind to our custom event that fires for *any* protocol event.
    * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
    */
   removeProtocolMessageListener(callback) {
-    const listener = this._callbackMap.get(callback);
-    if (!listener) return;
-    this._session.off('*', /** @type {*} */ (listener));
+    this._session.off('*', /** @type {*} */ (callback));
   }
 
   /**

package/lighthouse-core/fraggle-rock/gather/snapshot-runner.js

@@ -17,7 +17,7 @@ const {initializeConfig} = require('../config/config.js');
 const {getBaseArtifacts, finalizeArtifacts} = require('./base-artifacts.js');
 
 /**
- * @param {{page: LH.Puppeteer.Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
+ * @param {{page: import('puppeteer').Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
  * @return {Promise<LH.Gatherer.FRGatherResult>}
  */
 async function snapshotGather(options) {
@@ -36,14 +36,13 @@ async function snapshotGather(options) {
   const artifacts = await Runner.gather(
     async () => {
       const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'snapshot'});
-      baseArtifacts.URL = {
-        initialUrl: url,
-        finalUrl: url,
-      };
+      baseArtifacts.URL.requestedUrl = url;
+      baseArtifacts.URL.finalUrl = url;
 
       const artifactDefinitions = config.artifacts || [];
       const artifactState = getEmptyArtifactState();
       await collectPhaseArtifacts({
+        url,
         phase: 'getArtifact',
         gatherMode: 'snapshot',
         driver,

package/lighthouse-core/fraggle-rock/gather/timespan-runner.js

@@ -18,7 +18,7 @@ const {initializeConfig} = require('../config/config.js');
 const {getBaseArtifacts, finalizeArtifacts} = require('./base-artifacts.js');
 
 /**
- * @param {{page: LH.Puppeteer.Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
+ * @param {{page: import('puppeteer').Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
  * @return {Promise<{endTimespanGather(): Promise<LH.Gatherer.FRGatherResult>}>}
  */
 async function startTimespanGather(options) {
@@ -32,11 +32,12 @@ async function startTimespanGather(options) {
   /** @type {Map<string, LH.ArbitraryEqualityMap>} */
   const computedCache = new Map();
   const artifactDefinitions = config.artifacts || [];
-  const initialUrl = await driver.url();
+  const requestedUrl = await driver.url();
   const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'timespan'});
   const artifactState = getEmptyArtifactState();
   /** @type {Omit<import('./runner-helpers.js').CollectPhaseArtifactOptions, 'phase'>} */
   const phaseOptions = {
+    url: requestedUrl,
     driver,
     artifactDefinitions,
     artifactState,
@@ -53,14 +54,13 @@ async function startTimespanGather(options) {
   return {
     async endTimespanGather() {
       const finalUrl = await driver.url();
+      phaseOptions.url = finalUrl;
 
       const runnerOptions = {config, computedCache};
       const artifacts = await Runner.gather(
         async () => {
-          baseArtifacts.URL = {
-            initialUrl,
-            finalUrl,
-          };
+          baseArtifacts.URL.requestedUrl = requestedUrl;
+          baseArtifacts.URL.finalUrl = finalUrl;
 
           await collectPhaseArtifacts({phase: 'stopSensitiveInstrumentation', ...phaseOptions});
           await collectPhaseArtifacts({phase: 'stopInstrumentation', ...phaseOptions});

package/lighthouse-core/gather/connections/cri.js

@@ -82,14 +82,12 @@ class CriConnection extends Connection {
    */
   _runJsonCommand(command) {
     return new Promise((resolve, reject) => {
-      const request = http.request({
-        method: 'PUT', // GET and POST are deprecated: https://crrev.com/c/3595822
+      const request = http.get({
         hostname: this.hostname,
         port: this.port,
         path: '/json/' + command,
       }, response => {
         let data = '';
-        response.setEncoding('utf8');
         response.on('data', chunk => {
           data += chunk;
         });
@@ -110,8 +108,6 @@ class CriConnection extends Connection {
         });
       });
 
-      request.end();
-
       // This error handler is critical to ensuring Lighthouse exits cleanly even when Chrome crashes.
       // See https://github.com/GoogleChrome/lighthouse/pull/8583.
       request.on('error', reject);

package/lighthouse-core/gather/driver/execution-context.js

@@ -97,8 +97,7 @@ class ExecutionContext {
             .catch(${pageFunctions.wrapRuntimeEvalErrorInBrowserString})
             .then(resolve);
         });
-      }())
-      //# sourceURL=_lighthouse-eval.js`,
+      }())`,
       includeCommandLineAPI: true,
       awaitPromise: true,
       returnByValue: true,
@@ -196,8 +195,7 @@ class ExecutionContext {
       ${ExecutionContext._cachedNativesPreamble};
       ${depsSerialized};
       (${mainFn})(${argsSerialized});
-    })()
-    //# sourceURL=_lighthouse-eval.js`;
+    })()`;
 
     await this._session.sendCommand('Page.addScriptToEvaluateOnNewDocument', {source: expression});
   }
@@ -215,7 +213,6 @@ class ExecutionContext {
       window.__nativePerformance = window.performance;
       window.__nativeFetch = window.fetch;
       window.__ElementMatches = window.Element.prototype.matches;
-      window.__HTMLElementBoundingClientRect = window.HTMLElement.prototype.getBoundingClientRect;
       // Ensure the native `performance.now` is not overwritable.
       const performance = window.performance;
       const performanceNow = window.performance.now;

package/lighthouse-core/gather/driver/navigation.js

@@ -80,7 +80,7 @@ function resolveWaitForFullyLoadedOptions(options) {
  * @param {LH.Gatherer.FRTransitionalDriver} driver
  * @param {LH.NavigationRequestor} requestor
  * @param {NavigationOptions} options
- * @return {Promise<{requestedUrl: string, mainDocumentUrl: string, warnings: Array<LH.IcuMessage>}>}
+ * @return {Promise<{requestedUrl: string, finalUrl: string, warnings: Array<LH.IcuMessage>}>}
  */
 async function gotoURL(driver, requestor, options) {
   const status = typeof requestor === 'string' ?
@@ -130,17 +130,14 @@ async function gotoURL(driver, requestor, options) {
 
   let requestedUrl = navigationUrls.requestedUrl;
   if (typeof requestor === 'string') {
-    if (requestedUrl && !URL.equalWithExcludedFragments(requestor, requestedUrl)) {
-      log.error(
-        'Navigation',
-        `Provided URL (${requestor}) did not match initial navigation URL (${requestedUrl})`
-      );
+    if (requestor !== requestedUrl) {
+      log.error('Navigation', 'Provided URL did not match initial navigation URL');
     }
     requestedUrl = requestor;
   }
   if (!requestedUrl) throw Error('No navigations detected when running user defined requestor.');
 
-  const mainDocumentUrl = navigationUrls.mainDocumentUrl || requestedUrl;
+  const finalUrl = navigationUrls.finalUrl || requestedUrl;
 
   // Bring `Page.navigate` errors back into the promise chain. See https://github.com/GoogleChrome/lighthouse/pull/6739.
   await waitForNavigationTriggered;
@@ -153,26 +150,26 @@ async function gotoURL(driver, requestor, options) {
   log.timeEnd(status);
   return {
     requestedUrl,
-    mainDocumentUrl,
-    warnings: getNavigationWarnings({timedOut, mainDocumentUrl, requestedUrl}),
+    finalUrl,
+    warnings: getNavigationWarnings({timedOut, finalUrl, requestedUrl}),
   };
 }
 
 /**
- * @param {{timedOut: boolean, requestedUrl: string, mainDocumentUrl: string; }} navigation
+ * @param {{timedOut: boolean, requestedUrl: string, finalUrl: string; }} navigation
  * @return {Array<LH.IcuMessage>}
  */
 function getNavigationWarnings(navigation) {
-  const {requestedUrl, mainDocumentUrl} = navigation;
+  const {requestedUrl, finalUrl} = navigation;
   /** @type {Array<LH.IcuMessage>} */
   const warnings = [];
 
   if (navigation.timedOut) warnings.push(str_(UIStrings.warningTimeout));
 
-  if (!URL.equalWithExcludedFragments(requestedUrl, mainDocumentUrl)) {
+  if (!URL.equalWithExcludedFragments(requestedUrl, finalUrl)) {
     warnings.push(str_(UIStrings.warningRedirected, {
       requested: requestedUrl,
-      final: mainDocumentUrl,
+      final: finalUrl,
     }));
   }
 

package/lighthouse-core/gather/driver/network-monitor.js

@@ -133,7 +133,7 @@ class NetworkMonitor {
     this._sessions = new Map();
   }
 
-  /** @return {Promise<{requestedUrl?: string, mainDocumentUrl?: string}>} */
+  /** @return {Promise<{requestedUrl?: string, finalUrl?: string}>} */
   async getNavigationUrls() {
     const frameNavigations = this._frameNavigations;
     if (!frameNavigations.length) return {};
@@ -143,22 +143,9 @@ class NetworkMonitor {
     const mainFrameNavigations = frameNavigations.filter(frame => frame.id === mainFrameId);
     if (!mainFrameNavigations.length) log.warn('NetworkMonitor', 'No detected navigations');
 
-    // The requested URL is the initiator request for the first frame navigation.
-    /** @type {string|undefined} */
-    let requestedUrl = mainFrameNavigations[0]?.url;
-    if (this._networkRecorder) {
-      const records = this._networkRecorder.getRawRecords();
-
-      let initialUrlRequest = records.find(record => record.url === requestedUrl);
-      while (initialUrlRequest?.redirectSource) {
-        initialUrlRequest = initialUrlRequest.redirectSource;
-        requestedUrl = initialUrlRequest.url;
-      }
-    }
-
     return {
-      requestedUrl,
-      mainDocumentUrl: mainFrameNavigations[mainFrameNavigations.length - 1]?.url,
+      requestedUrl: mainFrameNavigations[0]?.url,
+      finalUrl: mainFrameNavigations[mainFrameNavigations.length - 1]?.url,
     };
   }
 

package/lighthouse-core/gather/driver.js

@@ -64,7 +64,7 @@ class Driver {
   defaultSession = this;
 
   // eslint-disable-next-line no-invalid-this
-  fetcher = new Fetcher(this.defaultSession);
+  fetcher = new Fetcher(this.defaultSession, this.executionContext);
 
   /**
    * @param {Connection} connection
@@ -477,11 +477,6 @@ class Driver {
     this._devtoolsLog.endRecording();
     return this._devtoolsLog.messages;
   }
-
-  async url() {
-    const {frameTree} = await this.sendCommand('Page.getFrameTree');
-    return `${frameTree.frame.url}${frameTree.frame.urlFragment || ''}`;
-  }
 }
 
 module.exports = Driver;

package/lighthouse-core/gather/fetcher.js

@@ -6,55 +6,124 @@
 'use strict';
 
 /**
- * @fileoverview Fetcher is a utility for making requests to any arbitrary resource,
- * ignoring normal browser constraints such as CORS.
+ * @fileoverview Fetcher is a utility for making requests within the context of the page.
+ * Requests can circumvent CORS, and so are good for fetching source maps that may be hosted
+ * on a different origin.
  */
 
-/* global fetch */
+/* global document */
 
 /** @typedef {{content: string|null, status: number|null}} FetchResponse */
 
+const log = require('lighthouse-logger');
+const {getBrowserVersion} = require('./driver/environment.js');
+
 class Fetcher {
   /**
    * @param {LH.Gatherer.FRProtocolSession} session
+   * @param {import('./driver/execution-context.js')} executionContext
    */
-  constructor(session) {
+  constructor(session, executionContext) {
     this.session = session;
+    this.executionContext = executionContext;
+    /** @type {Map<string, (event: LH.Crdp.Fetch.RequestPausedEvent) => void>} */
+    this._onRequestPausedHandlers = new Map();
+    this._onRequestPaused = this._onRequestPaused.bind(this);
+    this._enabled = false;
   }
 
   /**
-   * Fetches any resource using the network directly.
+   * Chrome M92 and above:
+   * We use `Network.loadNetworkResource` to fetch each resource.
+   *
+   * Chrome <M92:
+   * The Fetch domain accepts patterns for controlling what requests are intercepted, but we
+   * enable the domain for all patterns and filter events at a lower level to support multiple
+   * concurrent usages. Reasons for this:
+   *
+   * 1) only one set of patterns may be applied for the entire domain.
+   * 2) every request that matches the patterns are paused and only resumes when certain Fetch
+   *    commands are sent. So a listener of the `Fetch.requestPaused` event must either handle
+   *    the requests it cares about, or explicitly allow them to continue.
+   * 3) if multiple commands to continue the same request are sent, protocol errors occur.
    *
+   * So instead we have one global `Fetch.enable` / `Fetch.requestPaused` pair, and allow specific
+   * urls to be intercepted via `fetcher._setOnRequestPausedHandler`.
+   */
+  async enable() {
+    if (this._enabled) return;
+
+    this._enabled = true;
+    await this.session.sendCommand('Fetch.enable', {
+      patterns: [{requestStage: 'Request'}, {requestStage: 'Response'}],
+    });
+    await this.session.on('Fetch.requestPaused', this._onRequestPaused);
+  }
+
+  async disable() {
+    if (!this._enabled) return;
+
+    this._enabled = false;
+    await this.session.off('Fetch.requestPaused', this._onRequestPaused);
+    await this.session.sendCommand('Fetch.disable');
+    this._onRequestPausedHandlers.clear();
+  }
+
+  /**
    * @param {string} url
-   * @param {{timeout: number}=} options timeout is in ms
-   * @return {Promise<FetchResponse>}
+   * @param {(event: LH.Crdp.Fetch.RequestPausedEvent) => void} handler
    */
-  async fetchResource(url, options = {timeout: 2_000}) {
-    // In Lightrider, `Network.loadNetworkResource` is not implemented, but fetch
-    // is configured to work for any resource.
-    if (global.isLightrider) {
-      return this._wrapWithTimeout(this._fetchWithFetchApi(url), options.timeout);
+  async _setOnRequestPausedHandler(url, handler) {
+    this._onRequestPausedHandlers.set(url, handler);
+  }
+
+  /**
+   * @param {LH.Crdp.Fetch.RequestPausedEvent} event
+   */
+  _onRequestPaused(event) {
+    const handler = this._onRequestPausedHandlers.get(event.request.url);
+    if (handler) {
+      handler(event);
+    } else {
+      // Nothing cares about this URL, so continue.
+      this.session.sendCommand('Fetch.continueRequest', {requestId: event.requestId}).catch(err => {
+        log.error('Fetcher', `Failed to continueRequest: ${err.message}`);
+      });
     }
+  }
 
-    return this._fetchResourceOverProtocol(url, options);
+  /**
+   * `Network.loadNetworkResource` was introduced in M88.
+   * The long timeout bug with `IO.read` was fixed in M92:
+   * https://bugs.chromium.org/p/chromium/issues/detail?id=1191757
+   * Lightrider has a bug forcing us to use the old version for now:
+   * https://docs.google.com/document/d/1V-DxgsOFMPxUuFrdGPQpyiCqSljvgNlOqXCtqDtd0b8/edit?usp=sharing&resourcekey=0-aIaIqcHFKG-0dX4MAudBEw
+   * @return {Promise<boolean>}
+   */
+  async shouldUseLegacyFetcher() {
+    const {milestone} = await getBrowserVersion(this.session);
+    return milestone < 92 || Boolean(global.isLightrider);
   }
 
   /**
+   * Requires that `fetcher.enable` has been called.
+   *
+   * Fetches any resource in a way that circumvents CORS.
+   *
    * @param {string} url
+   * @param {{timeout: number}=} options timeout is in ms
    * @return {Promise<FetchResponse>}
    */
-  async _fetchWithFetchApi(url) {
-    const response = await fetch(url);
+  async fetchResource(url, options = {timeout: 2_000}) {
+    if (!this._enabled) {
+      throw new Error('Must call `enable` before using fetchResource');
+    }
 
-    let content = null;
-    try {
-      content = await response.text();
-    } catch {}
+    if (await this.shouldUseLegacyFetcher()) {
+      return this._fetchResourceIframe(url, options);
+    }
 
-    return {
-      content,
-      status: response.status,
-    };
+    return this._fetchResourceOverProtocol(url, options);
   }
 
   /**
@@ -103,6 +172,18 @@ class Fetcher {
     };
   }
 
+  /**
+   * @param {string} requestId
+   * @return {Promise<string>}
+   */
+  async _resolveResponseBody(requestId) {
+    const responseBody = await this.session.sendCommand('Fetch.getResponseBody', {requestId});
+    if (responseBody.base64Encoded) {
+      return Buffer.from(responseBody.body, 'base64').toString();
+    }
+    return responseBody.body;
+  }
+
   /**
    * @param {string} url
    * @param {{timeout: number}} options timeout is in ms
@@ -110,7 +191,18 @@ class Fetcher {
    */
   async _fetchResourceOverProtocol(url, options) {
     const startTime = Date.now();
-    const response = await this._wrapWithTimeout(this._loadNetworkResource(url), options.timeout);
+
+    /** @type {NodeJS.Timeout} */
+    let timeoutHandle;
+    const timeoutPromise = new Promise((_, reject) => {
+      timeoutHandle = setTimeout(reject, options.timeout, new Error('Timed out fetching resource'));
+    });
+
+    const responsePromise = this._loadNetworkResource(url);
+
+    /** @type {{stream: LH.Crdp.IO.StreamHandle|null, status: number|null}} */
+    const response = await Promise.race([responsePromise, timeoutPromise])
+      .finally(() => clearTimeout(timeoutHandle));
 
     const isOk = response.status && response.status >= 200 && response.status <= 299;
     if (!response.stream || !isOk) return {status: response.status, content: null};
@@ -121,21 +213,105 @@ class Fetcher {
   }
 
   /**
-   * @template T
-   * @param {Promise<T>} promise
-   * @param {number} ms
+   * Fetches resource by injecting an iframe into the page.
+   * @param {string} url
+   * @param {{timeout: number}} options timeout is in ms
+   * @return {Promise<FetchResponse>}
    */
-  async _wrapWithTimeout(promise, ms) {
+  async _fetchResourceIframe(url, options) {
+    /** @type {Promise<FetchResponse>} */
+    const requestInterceptionPromise = new Promise((resolve, reject) => {
+      /** @param {LH.Crdp.Fetch.RequestPausedEvent} event */
+      const handlerAsync = async event => {
+        const {requestId, responseStatusCode} = event;
+
+        // The first requestPaused event is for the request stage. Continue it.
+        if (!responseStatusCode) {
+          // Remove cookies so we aren't buying stuff on Amazon.
+          const headers = Object.entries(event.request.headers)
+            .filter(([name]) => name !== 'Cookie')
+            .map(([name, value]) => {
+              return {name, value};
+            });
+
+          await this.session.sendCommand('Fetch.continueRequest', {
+            requestId,
+            headers,
+          });
+          return;
+        }
+
+        if (responseStatusCode >= 200 && responseStatusCode <= 299) {
+          resolve({
+            status: responseStatusCode,
+            content: await this._resolveResponseBody(requestId),
+          });
+        } else {
+          resolve({status: responseStatusCode, content: null});
+        }
+
+        // Fail the request (from the page's perspective) so that the iframe never loads.
+        await this.session.sendCommand('Fetch.failRequest', {requestId, errorReason: 'Aborted'});
+      };
+      this._setOnRequestPausedHandler(url, event => handlerAsync(event).catch(reject));
+    });
+
+    /**
+     * @param {string} src
+     */
+    /* c8 ignore start */
+    function injectIframe(src) {
+      const iframe = document.createElement('iframe');
+      // Try really hard not to affect the page.
+      iframe.style.display = 'none';
+      iframe.style.visibility = 'hidden';
+      iframe.style.position = 'absolute';
+      iframe.style.top = '-1000px';
+      iframe.style.left = '-1000px';
+      iframe.style.width = '1px';
+      iframe.style.height = '1px';
+      iframe.src = src;
+      iframe.onload = iframe.onerror = () => {
+        iframe.remove();
+        iframe.onload = null;
+        iframe.onerror = null;
+      };
+      document.body.appendChild(iframe);
+    }
+    /* c8 ignore stop */
+
     /** @type {NodeJS.Timeout} */
-    let timeoutHandle;
+    let asyncTimeout;
+    /** @type {Promise<never>} */
     const timeoutPromise = new Promise((_, reject) => {
-      timeoutHandle = setTimeout(reject, ms, new Error('Timed out fetching resource'));
+      asyncTimeout = setTimeout(reject, options.timeout, new Error('Timed out fetching resource.'));
     });
 
-    /** @type {Promise<T>} */
-    const wrappedPromise = await Promise.race([promise, timeoutPromise])
-      .finally(() => clearTimeout(timeoutHandle));
-    return wrappedPromise;
+    const racePromise = Promise.race([
+      timeoutPromise,
+      requestInterceptionPromise,
+    ]).finally(() => clearTimeout(asyncTimeout));
+
+    // Temporarily disable auto-attaching for this iframe.
+    await this.session.sendCommand('Target.setAutoAttach', {
+      autoAttach: false,
+      waitForDebuggerOnStart: false,
+    });
+
+    const injectionPromise = this.executionContext.evaluate(injectIframe, {
+      args: [url],
+      useIsolation: true,
+    });
+
+    const [fetchResult] = await Promise.all([racePromise, injectionPromise]);
+
+    await this.session.sendCommand('Target.setAutoAttach', {
+      flatten: true,
+      autoAttach: true,
+      waitForDebuggerOnStart: true,
+    });
+
+    return fetchResult;
   }
 }