Chrome iphone emulation - Testcafe

Question

I am running the following script to run my tests:

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

In the TestCafe docs, they use the following to emulate iPhone:

chrome:emulation:device=iphone 6

I do not believe this is working, because when I run my test the device aspect ratio and scaling is nothing like the iPhone 6/7/8 selection on chrome.

I also tested:

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

Which did the same thing.

I am able to emulate all of the other devices in the chrome emulator, ie:

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

Does anyone know what the proper way to do this is?

Answer 1

I can't reproduce the problem. Please note, that if you open Chrome DevTools in device emulation mode, it can reset emulation parameters and you won't get the correct aspect ratio. You can run the following test to check the emulated width and height:

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

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

For iPhone 6/7/8, the test should output something like {width: 375, height: 667}.

See also: Use Chromium Device Emulation