如何使用Protractor在测试运行时将Chrome设置为离线模式

核心问题 #

你现有代码缺失CDP（Chrome DevTools Protocol）Network域的前置激活步骤，Network.emulateNetworkConditions 命令必须在Network域启用后才能正常生效。

修正后代码 #

async toggleOfflineMode(action: 'enable' | 'disable') {
  // 前置激活Network域，必须先执行该命令
  await browser.driver.sendChromiumCommand('Network.enable', {});
  action === 'enable'
    ? await browser.driver.sendChromiumCommand('Network.emulateNetworkConditions', {
        offline: true,
        latency: 0,
        downloadThroughput: 0,
        uploadThroughput: 0,
        connectionType: 'none'
      })
    : await browser.driver.sendChromiumCommand('Network.emulateNetworkConditions', {
        offline: false,
        latency: 0,
        downloadThroughput: -1,
        uploadThroughput: -1,
        connectionType: 'ethernet'
      });
}

其他常见异常场景排查 #

• 该命令仅支持Chromium内核浏览器（Chrome、Edge、Electron等），Firefox、Safari不兼容该CDP接口
• 如果你使用的WebdriverIO版本在v8及以上，可尝试替换调用方法为browser.sendDevToolsCommand，旧版本browser.driver层级的调用可能未绑定当前页面上下文
• 多标签页/多窗口测试场景下，需要先切换到目标窗口再执行该命令，否则命令会发送到错误的页面上下文
• 可执行以下代码验证配置是否生效：

  const isOffline = await browser.execute(() => navigator.onLine)
  console.log(isOffline) // 启用离线模式时应返回false
  

内容的提问来源于stack exchange，提问作者Luk Pe