可以使用 CodeceptJS 在 chrome 浏览器上使用 devtools答案

【问题标题】：Possibility to use devtools on chrome browser using CodeceptJS可以使用 CodeceptJS 在 chrome 浏览器上使用 devtools
【发布时间】：2019-04-10 20:46:30
【问题描述】：

我必须为 Web 应用程序编写测试，而且我必须在移动 chrome 浏览器上使用它们。在测试期间是否有可能使用 chrome devtools 和移动设备模拟器？

感谢您的帮助

【问题讨论】：

标签： node.js webdriver selenium-chromedriver codeceptjs

【解决方案1】：

对于 Puppeteer，在配置中使用带有 defaultViewport 值的 chrome 选项。

https://codecept.io/helpers/Puppeteer/#configuration https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions

"Puppeteer": {
  "url": "https://rambler.ru",
  "browser": "chrome",
  ...
  "chrome": {
      "defaultViewport": {
          "width": 640,
          "height": 360,
          "deviceScaleFactor": 1,
          "isMobile": true,
          "hasTouch": true,
          "isLandscape": false
      }
  }
}

或者在每次测试之前使用page.emulate() https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions

UPD：添加 page.emulate 示例

对于page.emulate，使用：在自定义助手中，创建自己的函数，该函数将与页面一起使用，例如：

async emulateDevice(options) {
  const currentPage = this.helpers['Puppeteer'].page;
  await currentPage.emulate(options);
}

其中 option 是具有视口和 userAgent 的对象： https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptions https://codecept.io/helpers/Puppeteer/#access-from-helpers

然后在测试中：创建选项：

const myCustomViewPort = {
  viewport: {
    width: 640,
    height: 360,
    deviceScaleFactor: 1,
    isMobile: true,
    hasTouch: true,
    isLandscape: false
  },
  userAgent: ""
}

你可以在你的代码中调用它：

Before(async (I) => {
  await I.emulateDevice(myCustomViewPort);
});

【讨论】：

您能提供任何使用 codeceptjs 的 page.emulate() 示例吗？因为 puppeteer 文档中的这个例子对我不起作用。我不确定这是我的错误还是我的具体项目有问题。

【解决方案2】：

您可以通过将 chrome 选项传递给 webdriver 来使用 Chrome 移动仿真。

例如，如果您使用 WebDriverIO 助手并想使用 Nexus 5：

helpers: {
  WebDriverIO: {
    url: "https://rambler.ru",
    browser: "chrome",
    ...
    desiredCapabilities: {
      chromeOptions: {
        mobileEmulation: {
          deviceName: "Nexus 5"
        }
      }
    }
  }
}

或者，如果您想指定更具体的内容：

chromeOptions: {
    mobileEmulation: {
        deviceMetrics: { width: 360, height: 640, pixelRatio: 3.0 },
        userAgent:
            "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
        }
    }
}

更多信息在这里： http://chromedriver.chromium.org/mobile-emulation

【讨论】：