WebDriverIO如何为所有页面导航操作统一追加查询参数

方案1：全局生命周期钩子配置（推荐） #

直接在wdio.conf.js配置文件中添加beforeNavigate钩子，可自动拦截所有页面导航行为，无需修改业务操作代码：

// wdio.conf.js 配置文件
export const config = {
  // 保留你原有其他配置项
  beforeNavigate: function (targetUrl) {
    // 定义需要固定追加的查询参数
    const appendParam = 'block=true'
    // 避免重复追加参数
    if (targetUrl.includes(appendParam)) return targetUrl
    // 识别原URL是否已有查询参数，选择拼接符
    const splitter = targetUrl.includes('?') ? '&' : '?'
    return `${targetUrl}${splitter}${appendParam}`
  }
}

适用场景：覆盖常规browser.url跳转、页面点击触发的整页导航场景。

方案2：DevTools请求拦截（全场景适配） #

适配SPA前端路由跳转、3xx重定向、表单提交跳转等所有导航场景，拦截更彻底：

// 放在测试用例全局前置钩子中执行
before(async () => {
  // 启用网络监听能力
  await browser.cdp('Network', 'enable')
  // 配置拦截所有页面文档类型的请求
  await browser.cdp('Network', 'setRequestInterception', {
    patterns: [{
      urlPattern: '*',
      resourceType: 'Document'
    }]
  })
  // 监听拦截事件，修改请求URL
  browser.on('Network.requestIntercepted', async (interceptData) => {
    let modifiedUrl = interceptData.request.url
    const appendParam = 'block=true'
    if (!modifiedUrl.includes(appendParam)) {
      const splitter = modifiedUrl.includes('?') ? '&' : '?'
      modifiedUrl = `${modifiedUrl}${splitter}${appendParam}`
    }
    // 放行修改后的请求
    await browser.cdp('Network', 'continueInterceptedRequest', {
      interceptionId: interceptData.interceptionId,
      url: modifiedUrl
    })
  })
})

方案3：封装点击操作（精准控制场景） #

如果只需要给特定点击触发的跳转追加参数，可封装自定义点击方法：

// 全局封装带参数追加的点击方法
async function clickAndAppendParam(selector) {
  await $(selector).click()
  // 等待页面跳转完成后补全参数
  await browser.waitUntil(async () => {
    const currentUrl = await browser.getUrl()
    const appendParam = 'block=true'
    if (currentUrl.includes(appendParam)) return true
    const splitter = currentUrl.includes('?') ? '&' : '?'
    await browser.url(`${currentUrl}${splitter}${appendParam}`)
    return true
  })
}

// 测试用例中调用示例
await clickAndAppendParam('#search-submit-btn')

注意事项 #

• 所有方案均内置参数去重逻辑，不会重复追加相同参数
• 需要追加多个参数时，直接修改appendParam变量即可，例如改为block=true&utm_source=autotest

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