Unable to click on an element that uses use-gesture (FF / iOS)

[Arthy000]

What is your Scenario?

Clicking on an element that uses use-gesture
Updating TestCafe to the latest version actually made the issue worse

What is the Current behavior?

With TestCafé 1.18.1 (original issue)

When running the test on FireFox, getting a JS exception.

 A JavaScript error occurred on "https://0don3.csb.app/".
      Repeat test actions in the browser and check the console for errors.
      To ignore client-side JavaScript errors, enable the "--skip-js-errors" CLI option, or set the "skipJsErrors" configuration file property to "true".
      If the website only throws this error when you test it with TestCafe, please create a new issue at:
      "https://github.com/DevExpress/testcafe/issues/new?template=bug-report.md".

      JavaScript error details:
      Element.setPointerCapture: Invalid pointer id
      [...]

Ignoring the error doesn't solve the issue as the expected behavior doesn't happen
(no issues when doing the same action manually, or in any other browser)

With TestCafé 1.18.3 (original issue + new issue)

The original Firefox issue still occurs exactly the same way
But now clicking on the same component, running on an iOS device, has no effect at all (neither a JS exception nor the effect of the button)
(no issue manually or in other browsers - full disclosure I haven't tested Android yet)
Regarding the iOS devices I used, I could reproduce the issue consistently on browserstack devices AND on a chrome emulation run
"browserstack:iPhone 13 Pro@15"
"chrome:emulation:device=iphone X"

What is the Expected behavior?

Clicking on that component doesn't raise an exception on any browser/device, and the desired effect of the click happens normally

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

We made a sandbox with very little content and were able to reproduce the issue easily:
https://0don3.csb.app/
The code is here:
https://codesandbox.io/s/replicate-use-gesture-fail-tce-0don3?file=/src/App.js

What is your TestCafe test code?

import { fixture, Selector, test } from "testcafe";

fixture`Test fixture`;

test("Fails on firefox with TC 1.18.1 but succeeds with chrome/ios/android", async (t) => {
  const element = Selector("button");
  await t.navigateTo("https://0don3.csb.app/").click(element);
});

test("Fails on iOS with TC 1.18.3", async (t: TestController) => {
  const button = Selector("button");
  const toggleView = Selector("p");
  await t
    .navigateTo("https://0don3.csb.app/")
    .click(button)
    .expect(toggleView.textContent)
    .contains("true");
});

TestCafe version

1.18.3

Node.js version

16.13.2

Command-line arguments

testcafe firefox test.ts
testcafe "chrome:emulation:device=iphone X" test.ts
testcafe "browserstack:iPhone 13 Pro@15" test.ts

Browser name(s) and version(s)

Firefox 96.0.3
Chrome 97.0.4692.99
Browserstack => Safari 15.0 / iOS 15.0

[felis2803]

Hello @Arthy000,

Thanks for your report. I reproduced this behavior.

[github-actions]

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]

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.

[ska-kialo]

Any progress on this? This just broke a lot of our testcafe tests and I'd rather not re-introduce a hacky homebrew solution.

We can reproduce the issue with @Arthy000's example.

[AlexKamaev]

@ska-kialo
We have not researched this issue yet. Could you please clarify if your tests fail in FF/iOS/chrome:emulation?

If your tests fail in Firefox, please share a simple sample as there could be another underlying issue.

[ska-kialo]

Thanks for getting back on this so quickly :)

Our own tests worked in Chrome but failed in Firefox with the "Invalid pointer id" error.
When I use @Arthy000's example above:

• both tests fail in Firefox with the "Invalid pointer id" error
• both tests work in Chrome
• on iOS with Browserstack the first test succeeds, the second fails
• in Chrome with emulation ("chrome:emulation:device=iphone X") the browser context menu opens, then nothing happens

Edit: The issue that affected our project was the "invalid pointer id" error in Firefox.

[AlexKamaev]

@ska-kialo, I've researched the issue using the attached example in Firefox. It seems there is an underlying bug in Firefox, which is why I would like to investigate your example to validate my assumption.

[ska-kialo]

@AlexKamaev I'll have to spend some time to set up a small example with our code as it is quite intertwined with our whole application and the failing version is not publicly accessible. I can take a look in the coming days :)

[ska-kialo]

Okay, so this is an example.

Source code: https://codesandbox.io/p/sandbox/recursing-shtern-6t8g7k?file=%2Fsrc%2FApp.js%3A20%2C43
Application: https://6t8g7k.csb.app/

The test fails in Firefox only if I specify mouse: false in the pointer configuration when calling useDrag (line 20 in App.js). Without that it works fine. Unfortunately we need that setting for our specific use case.

Testcafe script:

import { fixture, Selector, test } from 'testcafe';

fixture`Test fixture`;

test('Fails on firefox with TC 3.3.0 but succeeds with chrome', async (t) => {
    const element = Selector('button').withText('Click me!');
    await t.navigateTo('https://6t8g7k.csb.app').click(element);
});

TestCafe version: 3.3.0
Node.js version: 21.2.0

Works with testcafe chrome test.ts.
Fails with testcafe firefox test.ts.

[AlexKamaev]

@ska-kialo
I managed to reproduce the issue using your example. Your issue is exactly the same as the initial one. There is unexpected behavior of the Firefox browser, which does not allow dispatching pointer events. You can reproduce this behavior without TestCafe using the following example:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
 
<button>click me</button>
<script>
    document.querySelector('button').addEventListener('pointerdown', event => {
        event.target.setPointerCapture(event.pointerId);
    });
 
    setTimeout(() => {
        const ev = new PointerEvent('pointerdown', { pointerId: 0 });
 
        document.querySelector('button').dispatchEvent(ev);
    }, 1000);
</script>
</body>
</html>

To reproduce this behavior, you need to run Firefox using the Terminal. I used Windows cmd.exe with the following command:

C:\Program Files\Mozilla Firefox\firefox.exe" C:\Projects\6852\pages\index.html

If you open Inspector Panel in Firefox, you will see the same error.
However, if you run this page from an already opened Firefox, you will unlikely reproduce this issue.

I will reopen the issue. However, we need additional time to research the cause of the described behavior and find possible solutions.

[dcsaszar]

We ran into this issue with https://github.com/inferpse/testcafe-browser-provider-playwright.
It occurs in the Webkit mobile device emulation mode, e.g. using @ska-kialo's example from #6852 (comment):

npx testcafe "playwright:webkit:emulation:device=iPhone 14 Pro Max landscape" test.ts

 Running tests in:
 - Safari 17.4 / iOS 16.0

 Test fixture
 ✖ Fails on firefox with TC 3.3.0 but succeeds with chrome

   1) Uncaught object

   "{"callsite":{"filename":"XXX/test.ts","lineNum":6,"callsiteFrameIdx":5,"stackFrames":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"isV8Frames":true}}"
      was thrown. Throw Error instead.

      Browser: Safari 17.4 / iOS 16.0



 1/1 failed (12s)

(TestCafe 3.4.0)

[AlexKamaev]

@dcsaszar
testcafe-browser-provider-playwright is a third-party module, so we cannot offer any recommendations. Anyway, the issue with emulation exists, as described in the initial post.

[TAkbay]

I'm facing this issue mentioned by @dcsaszar since version 3.4.0. For 3.3.0 everything works normally.
I'm not using a third party browser provider and it happens on chrome, firefox and edge for several scenarios. You can clearly see that the mouse is slowly moving to the place where it should click next but it does not reach it and throws the error.

1. Uncaught object
   {"callsite":{"filename":"XXX/test.ts","lineNum":62,"callsiteFrameIdx":5,"stackFrames":[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],"isV8Frames":true}} was thrown. Throw Error instead.

Not sure if it's related to this issue thread, but I can create another issue if it would make sense.

[Bayheck]

@TAkbay,
This information is not sufficient to reproduce the issue. Please create a separate ticket using a template and add a minimal working example so that the TestCafe team can research the issue and help you.