[Feature]: Support connectOverCDP in defineConfig in @playwright/test

[winston0410]

🚀 Feature Request

From the type of defineConfig and more specifically ConnectOptions, there is no option for connection over CDP, which is already supported by Playwright since 1.9.

Example

it would be great if the config allow something like this:

export default defineConfig({
  // omitted

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'],
        connectOptions: {
          connectOverCDP: "http://localhost:9222",
        }
      },
    },
  ]
})

Motivation

By support connectOverCDP in the config of @playwright/test, we will be able to connect to a remote headless browser through CDP for testing.

[jesseduffield]

I would also like this very much. I've got a workaround which overrides the base fixture like so:

// path: support/baseTest.ts
import http from 'http'

import { test as base, chromium } from '@playwright/test'

// This extends the base fixture to support dev containers, by having the dev container
// control the browser in the host.
// Unfortunately there's no way to tell playwright not to create the initial
// browser in the X server.
// See https://github.com/microsoft/playwright/issues/31624 for a better long-term
// solution
export const test = base.extend({
  page: async ({ page, baseURL, headless }, use) => {
    if (headless || process.env.IN_DEV_CONTAINER !== 'true') {
      await use(page)
      return
    }

    // Get browser id for cdp
    const response = await new Promise<{ text: () => string; json: () => any }>(
      (resolve, reject) => {
        const options = {
          hostname: 'host.docker.internal',
          port: 9222,
          path: '/json/version',
          headers: {
            Host: 'localhost',
          },
        }

        // We can't use `fetch` because it doesn't support overriding the Host header.
        // See https://github.com/nodejs/node/issues/50305
        http
          .get(options, (res) => {
            let data = ''
            res.on('data', (chunk) => (data += chunk))
            res.on('end', () =>
              resolve({ text: () => data, json: () => JSON.parse(data) }),
            )
          })
          .on('error', (error) => {
            if (error.message.includes('ECONNREFUSED')) {
              throw new Error(
                'Could not connect to Chrome DevTools. Please ensure chromium is running on the host machine with remote debugging enabled (--remote-debugging-port=9222)',
              )
            }
            reject(error)
          })
      },
    )

    const data = await response.json()
    const browserId = data.webSocketDebuggerUrl.split('/').pop()

    // Connect to the browser via CDP
    const browser = await chromium.connectOverCDP(
      `ws://host.docker.internal:9222/devtools/browser/${browserId}`,
    )

    const context = await browser.newContext({
      baseURL,
    })

    const newPage = await context.newPage()

    await use(newPage)
  },
})

export { expect } from '@playwright/test'

Then in my test file I import test and expect from this fixture file:

import { test, expect } from './support/baseTest'

test('my test', async ({ page }) => {
  ...
})

This works well except for the fact that playwright will still create the initial browser (in my case, spawning it through an X server) despite the fact that it doesn't get used by the test itself. If anybody knows a fix for that in lieu of the solution proposed by the OP, please let me know.