如何在Karate中添加DevToolsDriver监听器捕获UI触发的API请求

核心方案：直接利用DevTools的Network事件监听 #

你之前用driver.intercept()结合mock导致请求无法继续，是因为intercept默认会拦截请求并等待手动放行或修改；如果只是捕获请求信息、不需要拦截修改，直接监听DevTools的Network事件即可，无需启用mock。

具体实现步骤 #

• 初始化WebDriver并启用DevTools
• 启用Network模块，注册requestWillBeSent事件监听
• 执行UI交互，请求会自动正常流转，同时捕获请求信息

Karate示例代码 #

Feature: 捕获UI交互触发的API请求

  Scenario: 监听并收集页面请求信息
    Given driver = { type: 'chrome' }
    And driver.devTools.enable()
    # 启用Network模块，无需额外参数
    And driver.devTools.send('Network.enable', {})
    # 注册requestWillBeSent事件监听，捕获请求详情
    And driver.devTools.on('Network.requestWillBeSent',
      function(event) {
        // 打印请求基础信息
        karate.log('请求URL:', event.request.url)
        karate.log('请求方法:', event.request.method)
        // 将请求存入变量，供后续校验或存储
        karate.set('capturedRequests', karate.append(karate.get('capturedRequests') || [], event.request))
      }
    )
    # 执行触发API的UI操作，比如点击按钮
    When driver.click('#api-trigger-btn')
    # 等待请求完成（根据实际接口响应时间调整）
    Then wait 2000
    # 验证捕获到的请求（示例：检查是否包含目标API）
    And match capturedRequests contains { url: '#regex .*/target-api/.*', method: 'POST' }

关键说明 #

• 无需driver.intercept()：该方法用于拦截并修改请求/响应，仅在需要篡改请求内容时使用；单纯捕获信息用Network事件监听更高效，且不会阻塞请求。
• Network.enable参数简化：Karate中传空对象{}即可对应Selenium示例里的Optional.empty()配置。
• 事件回调灵活处理：可在回调函数内完成日志打印、数据存储、实时校验等操作。

若需拦截并放行请求（修改场景备用） #

如果后续需要拦截请求并允许其继续执行，可在intercept回调中调用cont()方法放行：

And driver.intercept('request', function(req) {
  karate.log('拦截到请求:', req.url)
  // 放行请求，使其正常发送
  req.cont()
})

内容的提问来源于stack exchange，提问作者Tuấn Anh Trần