Click simulates two pointerup events on Android

[0815Strohhut]

What is your Test Scenario?

We have a page that has an element with both an onTap and an onDoubleTap handler using react-hammerjs. I created a sandbox to show the situation.

Then use Testcafe to simulate a "click" on the div.

What is the Current behavior?

On desktop browsers and iOS: the tap counter is increaed by 1, all is fine.
On Android devices: the tap counter is increased by 2, the double tap counter is increased by 1 (tested with Samsung Galaxy Tab S5e with Andoid 9 and some Huawai Tablet running Android 7)

What is the Expected behavior?

Android devices should simulate a single tap.

What is your web application and your TestCafe test code?

The following code for Testcafe will do the trick using the sandbox above:

fixture("Bug Repro")
  .page(`https://rmkpd.csb.app/`)
  

test("Double Click on Android", async t => {
  const clickable = Selector("#clickme");

  const taps = Selector("#taps");
  const doubleTaps = Selector("#doubletaps");

  await t.click(clickable);

  await t.expect(taps.textContent).eql("1");
  await t.expect(doubleTaps.textContent).eql("0")
});

Note that if you access the page without Testcafe, taping/clicking the "clickme" div works as expected also on Android devices.

Your Environment details:

• testcafe version: 1.8.2
• node.js version: 12.13.1
• browser name and version: Chrome 78.0.3904.62 / Android 9
• platform and version: Android 9 / Android 7 (didn't test the other andoid versions)

I'd be happy about any ideas/input/possible causes you can give me as I have spend quite some time already investigating this and don't have any idea what's the issue. As we have quite some double-taps in our code, that breaks a lots of our tests for andoid devices.
It would for example be helpful to get some info how I can debug the code of testcafe itself while running my test to get an idea of whats happening in that scenario.

[miherlosev]

Hi @0815Strohhut,

Could you please clarify how you run TestCafe tests on an Android device?

[0815Strohhut]

Hi @miherlosev ,

I am running testcafe on a Windows 10 machine while
a) using browserstack with the testcafe-browserstack-provider for the Samsung Galaxy Tab S5e (or any other device available there)
b) using the option "remote" and accessing the given browser url from the Huawai Tablet running Android 7 (which is actually the only "real" device I have available/connected to our infrastructure)

[miherlosev]

I've reproduced the problem. Thank you for the detailed information.
To debug how TestCafe performs the click action, do the following:

• open the node_modules\testcafe\lib\client\automation\index.js file
• find the ClickAutomation.prototype.run = function run(useStrictElementCheck) function.
• insert a debugger statement at start of it
• run TestCafe in development mode.

[0815Strohhut]

Thanks a lot for the info, I did some investigation and came to the conclusion, that pointerevents seem to be the problem here.

I took a deeper look into what Hammerjs is actually doing and noticed that it uses the pointerevents to detect a doubletap. Hence, I simplified the sandbox to show the issue without hammerjs.

Accesing the page using a real device, we get exactly one pointerup event when we press the "clickme" div. However, accessing the page using testcafe

fixture("Bug Repro")
    .page(`https://1bq90.csb.app/`)
  

test("Pointer Events on Android", async t => {
  const clickable = Selector("#clickme");
  const pointerups = Selector("#pointerup");

  await t.click(clickable);

  await t.expect(pointerups.textContent).eql("1");
});

we get two pointerup events on android devices. On ios safari or desktop devices, we still get one pointerup event.

As far as I can see, Testcafe simulates the "normal" chain of touchstart, touchend, mousedown, mouseup and click. My guess would be that for some reason the Chrome browser maps this to two seperate pointer-event sequences (one for the touchstart+end, one for mousedown + up) - but it is just a guess, I wasn't able to find reliable information on it.

Disabling the pointer event handling of hammerjs solves the problem (falling back to handling mouse/touch events).

However, as by now pointer events are supported accross all browsers supported by Testcafe, I feel like Testcafe should probably be able to deal with/simulate pointer events as at least I would expect that we will see more people handling pointer events in the future? It feels like a rather large change to me though.

[AlexSkorkin]

Thank you for sharing your findings with us. Please give us additional time to discuss them.

[HessleHuijser]

ran into the same problem today. t.dragToElement(element, element); worked as a temporary solution for both my test and the sandbox @0815Strohhut provided.

[Farfurix]

@HessleHuijser

Thank you for sharing your workaround.

[miherlosev]

#4837

For the team:

To reproduce the issue without using a real device, use device emulation.

Run the test

import { Selector } from 'testcafe';

fixture("Bug Repro")
    .page(`https://1bq90.csb.app/`)


test("Pointer Events on Android", async t => {
    const clickable = Selector("#clickme");
    const pointerups = Selector("#pointerup");

    await t.click(clickable);

    await t.expect(pointerups.textContent).eql("1");
});

two times with the following commands:

testcafe chrome test.js
testcafe "chrome:emulation:device=pixel 2" test.js

[Aleksey28]

Fixed in PR