如何用Selenium Node.js监听点击按钮时的网络请求？

你之前用await driver.manage().logs().get('network').then(console.log);没效果，是因为Selenium的原生日志系统根本不支持network这个日志类型——它只提供browser、driver、client、server这几类日志，拿不到网络请求数据。

要捕获网络请求，得用Chrome DevTools Protocol（CDP），这是Chromium内核浏览器（Chrome、Edge等）自带的调试协议，Selenium Node.js已经集成了对它的支持。下面是具体实现步骤：

1. 配置浏览器启动参数 #

初始化ChromeDriver时，不需要额外复杂配置，但要确保浏览器是Chromium系的。

2. 启用CDP的Network模块并监听事件 #

通过CDP的Network.enable命令开启网络监控，然后监听Network.requestWillBeSent（捕获请求发送前的信息）或Network.responseReceived（捕获响应返回的信息）事件，就能拿到点击按钮时触发的网络请求。

完整代码示例 #

const { Builder, By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

(async function captureNetworkRequests() {
  // 初始化Chrome浏览器配置
  const options = new chrome.Options();
  
  // 启动浏览器
  const driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(options)
    .build();

  try {
    // 导航到目标页面
    await driver.get('你的目标页面URL');

    // 通过CDP启用Network监控
    const cdpConnection = await driver.createCDPConnection('page');
    await cdpConnection.send('Network.enable');

    // 监听请求发送事件
    cdpConnection.on('Network.requestWillBeSent', (request) => {
      // 过滤出你关心的请求，比如包含特定接口路径的
      if (request.request.url.includes('你要监听的接口关键词')) {
        console.log('捕获到请求:', {
          url: request.request.url,
          method: request.request.method,
          headers: request.request.headers,
          timestamp: request.timestamp
        });
      }
    });

    // 监听响应接收事件（可选，看你需要请求还是响应数据）
    cdpConnection.on('Network.responseReceived', (response) => {
      if (response.response.url.includes('你要监听的接口关键词')) {
        console.log('捕获到响应:', {
          url: response.response.url,
          status: response.response.status,
          headers: response.response.headers
        });
      }
    });

    // 点击目标按钮
    await driver.findElement(By.css('你的按钮选择器')).click();

    // 等待几秒让请求完成（根据实际情况调整时长）
    await driver.sleep(3000);

  } finally {
    // 关闭浏览器
    await driver.quit();
  }
})();

关键说明 #

• 如果你用的是Firefox，需要换成Firefox的Remote Debugging Protocol，逻辑类似但API不同，上面的代码只适用于Chromium系浏览器。
• 可以通过request.request.url的过滤条件，只捕获你关心的接口，避免输出大量无关请求。
• 点击按钮后最好加个sleep，确保网络请求有足够时间完成并被捕获。

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