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?

I've executed the following command (without backslash symbols): testcafe --debug-on-fail "chrome:emulation:device=iphone 6" test.js The test was executed with the 428x766 aspect ratio, which looks valid to me. Would you please clarify what TestCafe version you are using? (I've used version 0.22.0) What operating system are you using? (I'm using Windows 10). And what browser version are you using? (I'm using Version 69.0.3497.100 (Official Build) (64-bit)) — Alex Skorkin, Sep 24 '18 at 11:18

score 1 · Answer 1 · edited Feb 24 '21 at 15:10

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}.

Chrome iphone emulation - Testcafe

1 Answers1