如何在Cypress中打开带有动态参数的URL链接？

云上老周

2026-10-3

Cypress 处理带动态参数子窗口链接解决方案

方案1：拦截页面触发的弹窗（推荐）

该方案贴合真实用户操作路径，不需要手动拼接参数，直接捕获页面触发的子窗口链接即可。

// 提前监听弹窗事件，拦截window.open调用
cy.window().then(win => {
  cy.stub(win, 'open').as('popupOpen')
})

// 执行页面上触发子窗口打开的操作，比如点击对应按钮
cy.contains('打开搜索筛选窗口').click()

// 校验弹出的链接符合规则，用正则匹配动态数字部分，无需写死参数
cy.get('@popupOpen').should('be.calledWith', 
  Cypress.sinon.match(/^http:\/\/localhost:8080\/#\/investigation\/\d+\/popupwindow\/\d+\/searchinstancefilter$/)
)

// 获取子窗口链接并访问，操作子窗口内容
cy.get('@popupOpen').then(stub => {
  const popupUrl = stub.firstCall.args[0]
  cy.visit(popupUrl)
  // 此处可继续编写子窗口内的元素操作逻辑
})

方案2：手动拼接动态链接访问

如果你已经通过接口/页面元素获取到两个动态参数的值，可以直接拼接生成目标链接访问。

// 示例1：从页面元素获取动态参数
cy.get('.current-case-id').invoke('text').then(caseId => {
  cy.get('.current-search-instance-id').invoke('text').then(searchInstanceId => {
    const targetUrl = `http://localhost:8080/#/investigation/${caseId}/popupwindow/${searchInstanceId}/searchinstancefilter`
    cy.visit(targetUrl)
  })
})

// 示例2：从接口响应获取动态参数
cy.intercept('GET', '/api/case/**').as('getCaseInfo')
// 触发案件查询操作
cy.contains('进入案件').click()
cy.wait('@getCaseInfo').then(res => {
  const { caseId, searchInstanceId } = res.response.body.data
  const targetUrl = `http://localhost:8080/#/investigation/${caseId}/popupwindow/${searchInstanceId}/searchinstancefilter`
  cy.visit(targetUrl)
})