Chrome iphone 仿真 - Testcafe答案

【问题标题】：Chrome iphone emulation - TestcafeChrome iphone 仿真 - Testcafe
【发布时间】：2019-02-25 22:47:47
【问题描述】：

我正在运行以下脚本来运行我的测试：

testcafe --debug-on-fail \"chrome:emulation:device=iphone 6\" tests/e2e/specs/*.spec.js

在 TestCafe 文档中，他们使用以下内容来模拟 iPhone：

chrome:emulation:device=iphone 6

我不相信这是可行的，因为当我运行测试时，设备的纵横比和缩放与 Chrome 上的 iPhone 6/7/8 选择完全不同。

我也测试过：

chrome:emulation:device=iphone 6/7/8

谁做了同样的事情。

我能够在 chrome 模拟器中模拟所有其他设备，即：

chrome:emulation:device=ipad mini
chrome:emulation:device=pixel 2

有谁知道这样做的正确方法是什么？

【问题讨论】：

我已经执行了以下命令（不带反斜杠符号）： testcafe --debug-on-fail "chrome:emulation:device=iphone 6" test.js 测试以 428x766 方面执行比率，这在我看来是有效的。你能澄清一下你使用的是什么TestCafe版本吗？（我使用的是 0.22.0 版）您使用的是什么操作系统？（我使用的是 Windows 10）。您使用的是什么浏览器版本？（我使用的是版本 69.0.3497.100（官方构建）（64 位））

标签： google-chrome automated-tests e2e-testing webtest testcafe

【解决方案1】：

我无法重现该问题。请注意，如果您在设备仿真模式下打开 Chrome DevTools，它会重置仿真参数，您将无法获得正确的纵横比。您可以运行以下测试来检查模拟的宽度和高度：

fixture `Test Width`
    .page `example.com`;

test('Test', async t => {
    console.log(await t.eval(() => ({ width: outerWidth, height: outerHeight )));
});

对于 iPhone 6/7/8，测试应输出类似 {width: 375, height: 667} 的内容。

另请参阅：Use Chromium Device Emulation

【讨论】：