能否结合WebdriverIO与Playwright，在其启动的浏览器上使用Playwright功能？

答案是肯定的，但需要借助Chrome DevTools Protocol (CDP) 来打通两个框架的能力——毕竟WebdriverIO和Playwright底层都依赖CDP与Chromium浏览器交互，这是实现跨框架复用浏览器实例的核心基础。

具体实现步骤 #

• 获取WebdriverIO启动浏览器的CDP端点
  WebdriverIO启动Chromium后，可通过内置方法直接获取CDP的WebSocket连接地址：

  // WebdriverIO初始化完成后执行
  const cdpEndpoint = await browser.getCdpEndpoint();
  

• 用Playwright连接到该CDP端点
  Playwright提供了connectOverCDP()方法，能直接接入已运行的Chromium实例，无需重新启动浏览器。这样就能在同一个浏览器进程里调用Playwright的API：

  const { chromium } = require('playwright');
  
  // 连接到WebdriverIO启动的浏览器
  const playwrightBrowser = await chromium.connectOverCDP(cdpEndpoint);
  // 选择获取已有页面（与WebdriverIO操作的页面保持一致）
  const playwrightPage = await playwrightBrowser.contexts()[0].pages()[0];
  

• 混合使用两个框架的功能
  比如用WebdriverIO处理常规元素交互，用Playwright实现它不擅长的高级能力（如网络拦截、全页截图、原生DOM操作）：

  // WebdriverIO操作页面元素
  await browser.url('https://example.com');
  await $('h1').click();
  
  // Playwright拦截所有图片请求
  await playwrightPage.route('**/*.png', route => route.abort());
  

注意事项 #

• 确保两个框架操作的是同一个页面上下文，避免出现状态不一致（比如通过Playwright获取WebdriverIO当前激活的页面）。
• WebdriverIO启动Chromium时，建议显式开启--remote-debugging-port参数，确保CDP端点正常暴露。
• 同时运行两个框架的客户端会增加内存占用，测试环境需预留足够资源。
• 部分Playwright的极端场景功能（如移动端原生模拟）可能受WebdriverIO的启动配置限制，需调整Chromium启动参数适配。

完整示例代码 #

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

(async () => {
    // 启动WebdriverIO的Chromium实例
    const wdioBrowser = await remote({
        capabilities: {
            browserName: 'chrome',
            'goog:chromeOptions': {
                args: ['--headless=new', '--remote-debugging-port=9222']
            }
        }
    });

    // 获取CDP端点地址
    const cdpEndpoint = await wdioBrowser.getCdpEndpoint();

    // Playwright接入已运行的浏览器
    const pwBrowser = await chromium.connectOverCDP(cdpEndpoint);
    const pwPage = await pwBrowser.contexts()[0].pages()[0];

    // 混合使用API
    await wdioBrowser.url('https://example.com');
    console.log('WebdriverIO当前页面标题:', await browser.getTitle());

    // Playwright生成全页截图
    await pwPage.screenshot({ path: 'example-fullpage.png', fullPage: true });

    // 清理资源
    await pwBrowser.close();
    await wdioBrowser.deleteSession();
})();

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