如何使用Cypress获取页面加载后的网络请求 筛选查询参数并获取响应

你可以通过以下两种方案实现按查询字符串参数过滤请求、并获取对应响应：

方案1：回调内解析查询参数过滤（推荐） #

该方案灵活性更高，支持多参数组合校验、模糊匹配等复杂过滤逻辑，适配广告请求参数多变的场景：

// 1. 监听目标广告域名的所有请求
cy.intercept('GET', '替换为你的广告网络请求域名/**', (req) => {
  // 解析请求URL中的查询字符串
  const queryParams = new URL(req.url).searchParams
  // 按你的需求过滤参数，示例为匹配ad_id=1001、position=feed的广告请求
  if (queryParams.get('ad_id') === '1001' && queryParams.get('position') === 'feed') {
    // 给匹配到的目标请求设置别名
    req.alias = 'matchedAdRequest'
  }
})
// 2. 执行触发广告请求的操作，比如访问测试页面
cy.visit('/你的测试页面路径')
// 3. 等待目标请求完成，获取请求&响应数据
cy.wait('@matchedAdRequest').then((interception) => {
  // 可直接打印/断言响应内容
  console.log('广告响应数据：', interception.response.body)
  // 示例断言：响应状态码为200
  expect(interception.response.statusCode).to.eq(200)
})

方案2：直接匹配带查询参数的URL #

如果过滤规则简单，参数固定，可以直接在cy.intercept的匹配规则里写查询参数匹配规则，写法更简洁：

// 直接匹配包含指定查询参数的广告请求
cy.intercept('GET', '替换为你的广告网络请求域名/**?ad_id=1001*').as('matchedAdRequest')
cy.visit('/你的测试页面路径')
cy.wait('@matchedAdRequest')

相关参考截图 #

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