fix: use cdp fetch

Author: danielroe

lighthouse-setup.cjs

@@ -8,18 +8,20 @@
  * The color mode is determined by the LIGHTHOUSE_COLOR_MODE environment variable.
  * If not set, defaults to 'dark'.
  *
- * Request interception uses CDP (Chrome DevTools Protocol) at the browser level
- * so it applies to all pages Lighthouse opens, not just the setup page.
+ * Request interception uses CDP (Chrome DevTools Protocol) Fetch domain
+ * at the browser level, which avoids conflicts with Lighthouse's own
+ * Puppeteer-level request interception.
  */
 
 const mockRoutes = require('./test/fixtures/mock-routes.cjs')
 
 module.exports = async function setup(browser, { url }) {
   const colorMode = process.env.LIGHTHOUSE_COLOR_MODE || 'dark'
 
-  // Set up browser-level request interception via CDP.
-  // This ensures mocking applies to pages Lighthouse creates after setup.
-  setupBrowserRequestInterception(browser)
+  // Set up browser-level request interception via CDP Fetch domain.
+  // This operates below Puppeteer's request interception layer so it
+  // doesn't conflict with Lighthouse's own setRequestInterception usage.
+  await setupCdpRequestInterception(browser)
 
   const page = await browser.newPage()
 
@@ -36,37 +38,52 @@ module.exports = async function setup(browser, { url }) {
 }
 
 /**
- * Set up request interception on every new page target the browser creates.
- * Uses Puppeteer's page-level request interception, applied automatically
- * to each new page via the 'targetcreated' event.
+ * Set up request interception using CDP's Fetch domain on the browser's
+ * default context. This intercepts requests at a lower level than Puppeteer's
+ * page.setRequestInterception(), avoiding "Request is already handled!" errors
+ * when Lighthouse sets up its own interception.
  *
  * @param {import('puppeteer').Browser} browser
  */
-function setupBrowserRequestInterception(browser) {
+async function setupCdpRequestInterception(browser) {
+  // Build URL pattern list for CDP Fetch.enable from our route definitions
+  const cdpPatterns = mockRoutes.routes.map(route => ({
+    urlPattern: route.pattern.replace('/**', '/*'),
+    requestStage: 'Request',
+  }))
+
+  // Listen for new targets so we can attach CDP interception to each page
   browser.on('targetcreated', async target => {
     if (target.type() !== 'page') return
 
     try {
-      const page = await target.page()
-      if (!page) return
+      const cdp = await target.createCDPSession()
 
-      await page.setRequestInterception(true)
-      page.on('request', request => {
-        const requestUrl = request.url()
+      cdp.on('Fetch.requestPaused', async event => {
+        const requestUrl = event.request.url
         const result = mockRoutes.matchRoute(requestUrl)
 
         if (result) {
-          request.respond({
-            status: result.response.status,
-            contentType: result.response.contentType,
-            body: result.response.body,
+          const body = Buffer.from(result.response.body).toString('base64')
+          await cdp.send('Fetch.fulfillRequest', {
+            requestId: event.requestId,
+            responseCode: result.response.status,
+            responseHeaders: [
+              { name: 'Content-Type', value: result.response.contentType },
+              { name: 'Access-Control-Allow-Origin', value: '*' },
+            ],
+            body,
           })
         } else {
-          request.continue()
+          await cdp.send('Fetch.continueRequest', {
+            requestId: event.requestId,
+          })
         }
       })
+
+      await cdp.send('Fetch.enable', { patterns: cdpPatterns })
     } catch {
-      // Target may have been closed before we could set up interception.
+      // Target may have been closed before we could attach.
       // This is expected for transient targets like service workers.
     }
   })