如何使用Google Puppeteer测试带独立面板的Chrome DevTools扩展插件？

Absolutely! Puppeteer fully supports testing custom DevTools extensions—including opening your dedicated panel, interacting with its UI, and validating request interception functionality. Here's a practical breakdown to make it work:

Step 1: Load your DevTools extension in Puppeteer #

First, configure Puppeteer to load your extension when launching the browser. You’ll need the local file path to your extension’s directory for this.

Step 2: Launch the browser and access DevTools #

Use Puppeteer’s launch options to enable extension loading and auto-open DevTools for your test tab. DevTools runs as a separate Chrome target, so you’ll need to filter and retrieve its page instance via Puppeteer’s target API.

Step 3: Switch to your custom panel #

Once you have the DevTools page reference, interact with its UI just like any other web page. Use selectors to find your panel’s tab and click to switch to it.

Step 4: Test UI interactions and request interception #

After switching to your panel, simulate user actions (like clicking buttons or toggling settings) and verify your request interception logic works as expected.

Example Code #

const puppeteer = require('puppeteer');

(async () => {
  // Replace with your extension's local directory path
  const extensionPath = './path/to/your/devtools-extension';
  
  // Launch browser with extension loaded and DevTools auto-opened
  const browser = await puppeteer.launch({
    headless: false, // Required for DevTools interaction (use 'new' headless with extra flags if needed)
    args: [
      `--disable-extensions-except=${extensionPath}`,
      `--load-extension=${extensionPath}`,
      '--auto-open-devtools-for-tabs'
    ]
  });

  // Get or create a test page
  const pages = await browser.pages();
  const testPage = pages[0] || await browser.newPage();
  await testPage.goto('https://example.com');

  // Locate the DevTools target and get its page instance
  const devtoolsTargets = await browser.targets().filter(target => target.type() === 'devtools');
  const devtoolsPage = await devtoolsTargets[0].page();

  // Switch to your custom panel (update selector to match your panel's label/ID)
  await devtoolsPage.waitForSelector('[aria-label="My Custom DevTools Panel"]');
  await devtoolsPage.click('[aria-label="My Custom DevTools Panel"]');

  // Simulate enabling request interception via your panel's UI
  await devtoolsPage.waitForSelector('#enable-intercept-btn');
  await devtoolsPage.click('#enable-intercept-btn');

  // Test interception by navigating to a target URL
  await testPage.goto('https://test-request-domain.com');

  // Verify interception worked (check your panel's UI status)
  const interceptionStatus = await devtoolsPage.evaluate(() => {
    return document.querySelector('#intercept-status').textContent;
  });
  console.log(`Interception result: ${interceptionStatus}`);

  await browser.close();
})();

Key Notes #

• Headless Mode: The traditional headless mode doesn’t support extensions. Use headless: false or the newer headless: 'new' mode (add --enable-extensions if needed).
• Selector Accuracy: Inspect your DevTools panel’s UI elements to get precise selectors—this ensures Puppeteer can reliably interact with your panel’s components.
• Extension Permissions: Ensure your manifest.json includes required permissions like devtools, webRequest, and webRequestBlocking (if applicable) to enable request interception.

内容的提问来源于stack exchange，提问作者suresh rathnaraj