click() acting as rightClick() with device emulation 'touch=true' under native automation

[andrewh-agl]

What is your Scenario?

Clicking links/buttons when using device emulation with "touch:true" under native automation.

What is the Current behavior?

On MacOS, click()'s are loading the browser context menu (as if a right click or a "long" touch has been used) rather than actually clicking on the link.

I've also tried on Windows 10 and whilst the browser context menu does not appear (as it does on MacOS), the click() does not perform any visible action.

Note: chrome:emulation:touch=true has the issue, but chrome:emulation:touch=false works as expected. --disable-native-automation also fixes the issue.

What is the Expected behavior?

A click() should act as a left mouse click or "quick" touch

What is the public URL of the test page? (attach your complete example)

https://testcafe.io/

What is your TestCafe test code?

import { Selector } from 'testcafe';

fixture('Load test page').page('https://testcafe.io/');

test('Open mobile menu', async (t) => {
    await t.click(Selector('.burger-stripes'));
    await t.expect(Selector('a').withText('Guides').visible).eql(true);
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

Steps to Reproduce

run testcafe 'chrome:emulation:width=500;height=700;touch=true' -e test.js with the example code above

TestCafe version

3.5.0

Node.js version

18.12.1

Command-line arguments

testcafe 'chrome:emulation:width=500;height=700;touch=true' -e test.js

Browser name(s) and version(s)

Chrome 120

Platform(s) and version(s)

macOS 12.6

Other

No response

[PavelMor25]

Hello @andrewh-agl ,

I can reproduce the issue. If you need to simulate a touchevent on a specific device, replace the touch option
with device=name device as a workaround. As a result, it will automatically simulate the touchevent.
You can find a list of all available devices in the list.

Please try replacing "touch" with "device" and let me know if it works for you.

[github-actions]

We appreciate you taking the time to share information about this issue. We reproduced the bug and added this ticket to our internal task queue. We'll update this thread once we have news.

[andrewh-agl]

Thanks for looking at this issue @PavelMor25.

I can confirm that explicitly setting a device fixes this specific issue in our test suite and also for the example in the issue reported above. Interestingly, device=iphone X also changes the cursor from an arrow to a circle - which does not happen with touch=true/false, maybe this will be relevant to the final fix.

---

Note however, that changing to emulation with device= causes a different issue in our test suite with some clicks now clicking on the wrong element when run under native automation. I suspect they are clicking the element close to the center of the viewport instead. The correct element is clicked when using device= with native automation disabled. I'll raise a separate issue if I can refine a suitable example.

[Bayheck]

Hello,

Thank you for your feedback.

We researched the issue and found that your ‘userAgent’ should be mobile or tablet to use the ‘touch’ emulator option.
If you select a device preset, the browser automatically sets the correct ‘userAgent’ for that device.
We will update our documentation on this matter and close this issue.

Regarding the other issue, please create a separate issue.
You can also refer to the following help topic: How to create a minimal working example.