Running in headed mobile view doesn't maintain screen size

[rob4629]

What is your Test Scenario?

I'm trying to test our website in mobile view ( e.g. 'chrome:emulation:device=iphone X'). The tests run without any problems (both headless and headed mode. My issue relates to trying to debug the tests in headed mode...

What is the Current behavior?

The screen resolution constantly switches between web and mobile view (but maintaining the window size), making it impossible to actually interact with the website in debug mode.

What is the Expected behavior?

I would expect the screen resolution to remain in mobile view mode, rather than switching between mobile and web views.

What is your web application and your TestCafe test code?

Your website URL (or attach your complete example):
I've been testing www.change.org, however I can observe the same behaviour with Google

Your complete test code (or attach your test files):

 test('This is a demo test', async () => {
  await t
    .navigateTo('www.google.com');
  await t.debug();
});

Your complete configuration file (if any):

Your complete test report:

Screenshots:

![Screen Shot 2019-09-12 at 2 53 16 PM](https://user-images.githubusercontent.com/37812673/64824543-35127900-d56f-11e9-8fcf-8d9688074c92.png)
![Screen Shot 2019-09-12 at 2 53 11 PM](https://user-images.githubusercontent.com/37812673/64824556-39d72d00-d56f-11e9-99d6-819999252183.png)

Steps to Reproduce:

1. Add a debug to your test (or an intentional failure)
2. Run testcafe 'chrome:emulation:device=iphone X' --debug-on-fail
3. Observe the run, and attempt to interact with the browser window during debug

Your Environment details:

• testcafe version: 1.4.1
• node.js version: 10.15.3
• command-line arguments: testcafe 'chrome:emulation:device=iphone X' --debug-on-fail
• browser name and version: Chrome 76.0.3...
• platform and version: macOS 10.14

[VasilyStrelyaev]

Thank you for reporting this issue. However, I cannot reproduce the behavior you described.
 
I tried the following test:
 

import { Selector } from 'testcafe';
 
fixture `My fixture`;
 
test('This is a demo test', async t => {
    await t
        .navigateTo('https://www.change.org')
        .debug()
        .click('.js-sap-link')
        .click(Selector('div').withAttribute('data-testid', 'Human rights'));
});

 
I ran it with both the portrait and landscape orientations in iPhone X emulation mode.
 
The browser didn't switch to the web view when I resized the window. In landscape mode, I unlocked the page and clicked some buttons. The page remained in the mobile view.
 
Could you please describe how you interact with the browser window? Do you resize it? Do you use the 'Unlock page' button in the footer and then interact with the page?

[rob4629]

Our tests don't resize the browser or run it using any particular settings, here's an example of our tests:

await t
    .navigateTo('/start-a-petition?tag_selected=none')
    .typeText(this.petitionAsk, 'Some Petition Title')
    .click(this.saveContinueButton)
    .typeText(this.chooseDMs, 'Some Name')
    .pressKey('tab')
    .click(this.saveContinueButton)
    .switchToIframe(this.descriptionFrame)
    .typeText(this.descriptionTextBox, 'Some description')
    .switchToMainWindow()
    .click(this.saveContinueButton);

I can provide the Selectors for this test, but the point I'm making is we're not manipulating the browser during the test. I'm unsure why I'm seeing the weird re-sizing issue when running in headed mode and you're not... I've checked out your source code so will try to run again using that to see if there's any difference.

[alexey-lin]

Hi @rob4629,
 
I tried to reproduce the issue using the test example you posted, but without success. We'd be happy to help you, but we need to be able to reproduce this problem first.
I see that you are working with TestCafe v1.4.1. Сould you try to update to the latest TestCafe version (v1.5.0) and check if it solves the problem?

[rob4629]

Hi Alexey, I'll update and try again. I'll also try to give you more information in order to reproduce (if it still doesn't work). Regards, Rob

…

On Wed, 25 Sep 2019 at 05:45, Alexey Lindberg ***@***.***> wrote: #4273 <#4273> Hi @rob4629 <https://github.com/rob4629>, I tried to reproduce the issue using the test example you posted, but without success. We'd be happy to help you, but we need to be able to reproduce this problem first. I see that you are working with TestCafe v1.4.1. Сould you try to update to the latest TestCafe version (v1.5.0) and check if it solves the problem? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4273?email_source=notifications&email_token=AJAPTQPRZT4NY6MIAEUMSL3QLNMOBA5CNFSM4IWKKH62YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD7RYJZQ#issuecomment-535004390>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJAPTQNURFWBOTOWV5VAYFDQLNMOBANCNFSM4IWKKH6Q> .

[no-response]

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

[rob4629]

Hi 👋,

I'm returned to testing mobile emulation (now using TC v1.7.0), and this issue is still occuring. I've recorded a video of the screen, and the command I'm using is:

testcafe 'chrome:emulation:device=iphone X'

iPhone emulation in headed mode.mov.zip

This is causing me issues, as I'm trying to debug failures in Mobile mode where TC can't see the DOM elements (however manually testing our site in Google's device emulation works).

[LavrovArtem]

Hi,
I'm not able to reproduce this behavior on macOS in Chrome. By your video, it seems like the devicePixelRatio property somehow is changing. Could you please provide us the full test script for reproducing this issue?

[rob4629]

I was able to reproduce it just by starting on www.google.ca:

1. Enter text in the search box
2. Click search
3. Check search list is visible

The constant resizing occurs from the moment Google page loads...

We can jump on a zoom call and go through it, if that will help... but it seems to be happening for others in my office when running the same command line args:

testcafe 'chrome:emulation:device=iphone X'

🤷‍♂

[no-response]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.

[rob4629]

Sorry for the delay. I'll try to get a reproducible example up shortly (as this is still something I experience).

[rob4629]

Can you run the following test, against our site, please? This is consistently presenting the resizing issue I've mentioned.

I'm using the latest TestCafe (1.8.2) against Chrome 80.0.3987.116

Command: testcafe 'chrome:emulation:device=iphone X'

import { Selector, t } from 'testcafe';

fixture('Verify the Careers page is working').page('https://www.change.org/');

test('Load the careers page, and apply for first available job', async () => {
  const openings = Selector('#openings');
  const firstAvailableJob = openings.child().find('a');

  // Job Application
  const submitApplicationForm = Selector('.application-form').filterVisible();
  const submitApplicationHeader = submitApplicationForm.find('h4');

  await t
    .navigateTo('/careers')
    .expect(openings.visible)
    .ok()
    .click(firstAvailableJob)
    .click(Selector('a').withText('Apply now'));

  await t.expect(submitApplicationHeader.innerText).ok();
});

[AlexSkorkin]

Thank you for the update, Rob.

Here's what I see when I run your test. The browser is not resized when the test is started, running, stopped on fail, and when I unlock the page.

[rob4629]

Hi @AlexSkorkin, can you provide me with the command you're using?

Myself and my colleagues are experiencing the re-sizing behaviour when using the below command... and haven't been able to resolve it:

testcafe 'chrome:emulation:device=iphone X'

TestCafe Mobile Screen Recording.mov.zip

[AlexSkorkin]

I used both of these commands, but I couldn't replicate this behavior:

testcafe 'chrome:emulation:device=iphone X'
testcafe 'chrome:emulation:device=iphone X' --debug-on-fail

[rob4629]

Would the version of Node make a difference? I'm using the latest Chrome version, on Catalina OS.

I can't think of any other reason for the difference in behaviour... and would be reluctant to close this issue due to "It works on my machine".

[AlexanderMoiseev]

We tried to run your test on several different machines with a similar configuration, including the node.js version 10.15.3, but our attempts to replicate the issue were unsuccessful. Right now, we are out of any ideas on why this issue occurs and how to reproduce it on our side.

[no-response]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.

[ajadhav]

Would the version of Node make a difference? I'm using the latest Chrome version, on Catalina OS.

I can't think of any other reason for the difference in behaviour... and would be reluctant to close this issue due to "It works on my machine".

Hey Rob, were you able to find a fix for this behavior? I'm seeing something similar but the resize only happens a few time after page load and then goes away but it is enough to cause testcafe retry/reload of the page and results in some unstable tests.