如何在TypeScript版Selenium中拦截网络请求并获取指定API响应

嘿，我来帮你搞定这个问题！你用的是TypeScript搭配Selenium 4.8.1，其实完全没必要依赖browsermob-proxy这种第三方工具——Selenium 4本身就支持通过**Chrome DevTools Protocol（CDP）**来监听和拦截网络请求，这可比折腾代理简单多了，而且兼容性也更好。

我给你一套完整的实现方案，直接就能套用在你的测试里：

核心思路 #

利用Selenium 4提供的CDP会话能力，直接和Chrome浏览器的DevTools通信，启用网络监听后，捕获所有AJAX（XHR/Fetch）请求的响应，筛选出你需要的目标API，拿到响应体后再做断言。

具体实现步骤 & 代码示例 #

确保你的依赖都装好了（你已经有selenium-webdriver和@types/selenium-webdriver），然后按下面的代码来写：

import { Builder, until } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome';

async function interceptApiResponse() {
  // 1. 初始化ChromeDriver
  const driver = await new Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chrome.Options())
    .build();

  try {
    // 2. 创建CDP会话，这是和Chrome DevTools通信的关键
    const cdpSession = await driver.createCDPSession();
    
    // 3. 启用网络监听
    await cdpSession.send('Network.enable');

    // 定义你要捕获的目标API的URL关键词（替换成实际路径）
    const targetApiUrl = '/your-target-api-path'; 

    // 用来存储目标API的响应体
    let targetResponse: string | null = null;

    // 4. 监听网络响应事件，有响应返回时触发
    cdpSession.on('Network.responseReceived', async (params) => {
      const { response, requestId } = params;
      // 筛选出我们需要的目标API请求
      if (response.url.includes(targetApiUrl)) {
        // 获取响应体内容
        const responseBody = await cdpSession.send('Network.getResponseBody', {
          requestId,
        });
        // 存储响应体，供后续断言使用
        targetResponse = responseBody.body;
        console.log(`捕获到目标API响应：${targetResponse}`);
      }
    });

    // 5. 打开目标网站，触发网络请求
    await driver.get('https://example.com');

    // 6. 等待目标响应被捕获（可根据实际情况调整等待时长）
    await driver.wait(async () => {
      return targetResponse !== null;
    }, 10000); // 最多等待10秒

    // 7. 这里写你的断言逻辑
    if (targetResponse) {
      // 解析响应体为JSON（如果是JSON格式的话）
      const responseData = JSON.parse(targetResponse);
      // 举个断言示例：验证响应状态和数据完整性
      console.assert(responseData.status === 'success', 'API响应状态不符合预期');
      console.assert(responseData.data.length > 0, 'API返回数据为空');
    }

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

// 执行测试函数
interceptApiResponse().catch(err => console.error(err));

关键点说明 #

• 为什么放弃browsermob-proxy？ 这个工具配置繁琐，而且和新版Selenium、Chrome的兼容性容易出问题；CDP是Chrome官方协议，Selenium 4原生支持，稳定性和易用性都更优。
• 响应筛选逻辑：通过response.url.includes()匹配目标API，你可以根据实际需求改成完全匹配、正则匹配等规则。
• 响应体获取：Network.getResponseBody需要传入对应请求的requestId，能准确拿到目标响应，即使响应是gzip压缩的也会自动解压缩。
• 等待机制：用driver.wait确保拿到响应后再执行断言，避免测试代码因执行过快导致断言失败。

可能遇到的小问题 #

• 确保chromedriver版本和你的Chrome浏览器版本完全匹配，否则可能出现CDP会话创建失败的情况。
• 目标API是HTTPS也不用担心，CDP会自动处理证书问题，无需额外配置代理证书。

备注：内容来源于stack exchange，提问作者Kristi Jorgji