如何用Playwright的connectOverCDP反复连接断开同一浏览器及页面实例？

核心问题原因 #

• 调用browser.close()/context.close()/page.close()会直接销毁浏览器/上下文/页面实例，导致后续连接无有效目标
• 用process.exit()强制终止脚本，Playwright无法正常清理CDP连接会话，浏览器端残留的无效会话会干扰后续连接
• 页面在两次脚本运行间发生导航时，旧的page对象引用会失效，直接取context.pages()[0]可能拿到已销毁的执行上下文

解决方案 #

1. 使用browser.disconnect()替代关闭类方法 #

Playwright的browser.disconnect()方法和Puppeteer的disconnect()功能完全一致——只会断开脚本与浏览器的CDP连接，不会关闭浏览器或页面，完美适配“保留实例多次操作”的需求。

2. 每次连接后重新获取有效页面 #

不要缓存页面引用，每次脚本启动连接后，从上下文的页面列表中筛选未关闭的活动页面，避免拿到已失效的页面对象。

完整代码示例 #

const { chromium } = require('playwright');

async function operateExistingBrowser() {
  // 连接到已运行的CDP浏览器实例
  const browser = await chromium.connectOverCDP("http://localhost:9222");
  
  try {
    // 获取目标浏览器上下文（假设目标页面在第一个上下文）
    const context = browser.contexts()[0];
    if (!context) {
      throw new Error("未找到浏览器上下文");
    }

    // 筛选出未关闭的页面，优先取最新的活动页面（适配导航场景）
    const validPages = context.pages().filter(page => !page.isClosed());
    if (validPages.length === 0) {
      throw new Error("未找到有效页面");
    }
    const page = validPages[validPages.length - 1];

    // 执行你的页面操作示例
    await page.waitForLoadState('networkidle');
    await page.click('#target-button');
    console.log("页面操作完成");

  } catch (error) {
    console.error("操作出错:", error);
  } finally {
    // 关键步骤：仅断开连接，保留浏览器和页面实例
    await browser.disconnect();
    console.log("已断开与浏览器的连接，实例可继续复用");
  }
}

operateExistingBrowser();

额外注意事项 #

• 确保浏览器启动时开启CDP端口：比如Chrome启动参数需添加--remote-debugging-port=9222
• 若页面存在频繁导航，建议每次操作前检查页面状态，必要时重新定位元素（避免旧元素句柄失效）
• 绝对不要在脚本中调用任何会销毁实例的close()方法，除非你确实需要关闭浏览器

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