google-chrome - Chrome iphone 仿真 - Testcafe

Question

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

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

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

Answer 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