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

Question

我必须为web应用程序编写测试，还必须在移动chrome浏览器上使用它们。有没有可能在测试期间使用chrome开发工具和移动设备模拟器？

感谢的帮助

Answer 1

对于Puppeter，使用defaultViewport值在配置中使用chrome选项。

https://codecept.io/helpers/Puppeteer/#configurationhttps://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，使用：在自定义助手中，创建自己的函数，该函数将与页面一起使用，例如：

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

其中选项是带有视口和userAgent的对象：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pageemulateoptionshttps://codecept.io/helpers/Puppeteer/#access-来自助手

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

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

你可以在你的代码中称之为：

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

Answer 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