TestCafe device emulation doesn't resize Chrome browser with Node v17+

[jantonypdx]

What is your Scenario?

I'm trying to run a TestCafe 1.17.1 test using Chrome "iPhone X" device emulation using Node v17 (Node is installed via nvm on a Macbook Pro).

What is the Current behavior?

After upgrading to Node v17.0.1 or v17.2.0 (latest), running TestCafe tests with "iPhone X" device emulation results in the Chrome browser no longer resizing. (Chrome's window size remains the default desktop viewport.) If I run the same test with Node v16.9.1, device emulation works correctly (window resizes).

What is the Expected behavior?

Expect device emulation in latest TestCafe to keep working with Node v17+.

What is your public website URL? (or attach your complete example)

http://devexpress.github.io/testcafe/example

What is your TestCafe test code?

fixtureGetting Started.pagehttp://devexpress.github.io/testcafe/example; test("My first test", async (t) => { await t.typeText("#developer-name", "John Smith").click("#submit-button"); });

Your complete configuration file

// package.json { "name": "testcafe-helloworld", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "keywords": [], "author": "author [email protected]", "license": "UNLICENSED", "dependencies": { "testcafe": "^1.17.1" } }

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Create a new test subdirectory
2. Run: npm init -y
3. Install & save TestCafe: npm install --save testcafe
4. Make a tests subdirectory.
5. Copy above test file into tests\hello.js file
6. Run test using "iPhone X" device emulation: node_modules/.bin/testcafe "chrome:emulation:device=iphoneX" tests/hello.js -e --hostname 127.0.0.1

TestCafe version

1.17.1

Node.js version

v17.2.0

Command-line arguments

"chrome:emulation:device=iphoneX" -e --hostname 127.0.0.1

Browser name(s) and version(s)

Chrome v96.0.4664.55

Platform(s) and version(s)

macOS Catalina 10.15.7

Other

No response

[AlexanderMoiseev]

Hi,

Unfortunately, we could not reproduce this behavior. Please send us your system overview like in the attached screenshot so that we can investigate it.

[jantonypdx]

I've updated the test to display Node version & window size information:

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`;

test("My first test", async (t) => {
  const windowSize = await t.eval(() => {
    return {
      width: $(window).width(),
      height: $(window).height(),
    };
  });
  console.log(`  node: ${process.version}, windowSize:`, windowSize);

  await t.typeText("#developer-name", "John Smith").click("#submit-button");
});

I am using nvm to change Node versions: nvm list v13.9.0 v16.9.1 -> v17.2.0 system default -> 16.9.1 (-> v16.9.1)

---

node_modules/.bin/testcafe "chrome:emulation:device=iphoneX" tests/hello.js -e --hostname 127.0.0.1 Running tests in:

• Chrome 96.0.4664.55 / macOS 10.15.7 (Emulating iPhone X)

Getting Started node: v17.2.0, windowSize: { width: 1185, height: 689 } ✓ My first test

1 passed (1s)

---

nvm use 16.9.1 Now using node v16.9.1 (npm v7.21.1)

---

node_modules/.bin/testcafe "chrome:emulation:device=iphoneX" tests/hello.js -e --hostname 127.0.0.1 Running tests in:

• Chrome 96.0.4664.55 / macOS 10.15.7 (Emulating iPhone X)

Getting Started node: v16.9.1, windowSize: { width: 980, height: 2122 } ✓ My first test

1 passed (2s)

[AlexanderMoiseev]

Hi @jantonypdx

Thank you for your input. We have reproduced the problem. Please stay tuned.

Note for team - reproducible only on an Intel machine.

[torrinworx]

Hi there,

Can confirm that I am seeing this issue on Node 17.3.0 as well. Here is my system information:

[aleks-pro]

Hi @torrinworx ,

Thank you for the information. We will take it into account.

[jantonypdx]

Any update on this issue?

On Intel based Macs, TestCafe device emulation still doesn't resize Chrome browser with any version Node v17 (including latest v17.8.0). If I use v16 LTS (currently v16.14.2), the device emulated browser resizes correctly.

I'm hoping we see a fix for this before Node LTS moves off of v16 releases in October 2022. thanks!

[testcafe-build-bot]

No updates yet. Once we get any results, we will post them in this thread.

[jantonypdx]

Is anybody else seeing this device emulation resizing problem using Node v17+ or v18+? Node v16.17.0 is the last version that successfully resizes for me with device emulation. I'm using TestCafe v2.0.0.

I'm seeing this same behavior on a new MacBook Pro M1 system so this is not just an Intel issue (as mentioned before). Macbook Pro (16 inch 2021) Chip: Apple M1 Pro Memory: 32 GB Startup Disk: Macintosh HD

Details:

// filename: test.js

fixture`Getting Started`.page`http://devexpress.github.io/testcafe/example`;

test('My first test', async (t) => {
  const windowSize = await t.eval(() => {
    return {
      width: $(window).width(),
      height: $(window).height()
    };
  });
  console.log(`  node: ${process.version}, windowSize:`, windowSize);

  await t.typeText('#developer-name', 'John Smith').click('#submit-button');
});

Test command: node_modules/.bin/testcafe "chrome:emulation:device=iphoneX" ./test.js -e --hostname 127.0.0.1

Log:

: nvm use 18.9.0 Now using node v18.9.0 (npm v8.19.1)

: node_modules/.bin/testcafe "chrome:emulation:device=iphoneX" ./test.js -e --hostname 127.0.0.1 Running tests in:

• Chrome 105.0.0.0 / Monterey 12 (Emulating iPhone X)

Getting Started node: v18.9.0, windowSize: { width: 1200, height: 956 }. <-- this window looks like a small desktop window ✓ My first test

1 passed (2s)

: nvm use 16.17.0 Now using node v16.17.0 (npm v8.15.0)

: node_modules/.bin/testcafe "chrome:emulation:device=iphoneX" ./test.js -e --hostname 127.0.0.1 Running tests in:

• Chrome 105.0.0.0 / Monterey 12 (Emulating iPhone X)

Getting Started node: v16.17.0, windowSize: { width: 980, height: 2122 }. <-- this window looks like the correct iPhoneX window size ✓ My first test

1 passed (2s)

Any ideas or help on why this might be happening is appreciated!

[VasilyStrelyaev]

Thank you for the additional information! We have no news regarding this issue at the moment. We will update this thread once we have something to share.

I raised the frequency level for this issue, which gives it an increased priority during future plannings.

[jamesryan-dev]

im still experiencing resize issues with mac and chrome using 5.2.0

[Aleksey28]

Hi @jamesryan-dev

What do you mean by 5.2.0? Did you mean testcafe 2.5.0? We had an issue with resizing the Chrome browser on MacOS independent of the node version and already fixed it in v2.6.1. Please update testcafe to the latest version and check the issue again.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

[github-actions[bot]]

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.