Click event triggered twice

[hd-esteban]

Hi

I have a test case where we expected the zoom module to be opened when the user clicks on the zoom button. It works on mobile when I tap the button manually. The problem I'm facing is when I run the test on a real mobile device using the remote tool from test cafe. The zoom panel is opened and then closed, I checked the events and the button is getting clicked twice.

The double click does not happen on desktop devices, or when I click/tap it manually you can verify it at:

http://test-viewer.kristianhristov.com/test/A2-simple-with-zoom.html

(On desktop devices zoom button is not displayed, but zoom module opens when you click the viewport)

const testCaseName = `Zoom`;

fixture(testCaseName).page('http://test-viewer.kristianhristov.com/test/A2-simple-with-zoom.html');

test("Zoom panel should be opened when clicked", async t => {
    let mainZoomCnt = await Selector('.cylindo-zoom-imagery').parent();
    
    await t.wait(20000).click(Selector('.threesixty-button'));

    await t.debug();

    await t
        .wait(10000)
        .expect(mainZoomCnt.exists).ok()
        .expect(mainZoomCnt.visible).ok();
});

• testcafe version: 1.8.5

• node.js version: v10.13.0

• command-line arguments: testcafe "remote" "-S" "-s" "artifacts/screenshots" "-p" "${USERAGENT}${FIXTURE}_${TEST}.png" "test/spec/complete/A1-*.spec.ts" "--app" "node test/serve.js" "--speed" "1" "--quarantine-mode" "--qr-code"

• browser name and version: Chrome mobile 84.0.4147.105

• platform and version: Huawei mate 20 lite

[wentwrong]

I changed the test code and was able to reproduce the issue: a click event on the zoom button (which appears only with a mobile version) is triggered twice.

This test fails although it shouldn't:

import { Selector } from 'testcafe';

const testCaseName = `Zoom`;

fixture(testCaseName).page('http://test-viewer.kristianhristov.com/test/A2-simple-with-zoom.html');

test("Zoom panel should be opened when clicked", async t => {
    const zoomPanel = await Selector('.cylindo-zoom-imagery');
    
    await t
        .expect(zoomPanel.visible)
        .notOk('Zoomed viewport should not be visible before click on zoom button');

    await t.click(Selector('.threesixty-button'));

    await t
        .expect(zoomPanel.visible)
        .ok('Zoomed viewport should be visible after click on zoom button');
});

It is possible to run the following command:

npx testcafe "chrome:emulation:device=iPhone 4" test.js 

(or use the remote mode)

Thank you for bringing this to our attention. We'll update this issue when we have any news.

[hd-esteban]

@wentwrong any ETA for this issue? This is really urgent for us and this is not the only event that is being triggered twice, some other clicks are being triggered multiple times too...

[LavrovArtem]

Unfortunately, at the moment we cannot give any ETA for this bug. Once we have news to report, we will notify you here.

[hd-esteban]

Hi @LavrovArtem thanks for your quick reply.

Do you think it is important to list you some other examples where I noticed the same behavior here?

One more thing that I think is important to mention is that we have enabled touch and click events at the same time in case users have devices with touch screen and mouse. This is because we don't know which device will be used to execute the functionality, so, we have both listeners enabled. Internally we handle it with preventDefaults, stopPropagation and stopImmediatePropagation, etc.

[Farfurix]

@Esteban26

Hello,

Do you think it is important to list you some other examples where I noticed the same behavior here?

At present, we have all the information we need to process this issue. If you encounter any other issues after the fix is published, please report them.

This is because we don't know which device will be used to execute the functionality, so, we have both listeners enabled.

Thank you for the information. Our goal in this case is not to break the native behavior.

[AlexKamaev]

To the team:
I researched the issue. It occurs because the zoom view is toggled on two events: touchend and  mousedown. It is shown on touchend and then it's immediately closed on mousedown. However,  without TestCafe it works, since the target site calls the preventDefault method on the touchend event, so mousedown is not raised. Thus, to fix the issue, we need to support the case when the preventDefault method is called on the touchend event to prevent mousedown.

[hd-esteban]

Hi @AlexKamaev, do you have any update on this issue?

[arubtsov]

Hello @Esteban26,

There are no updates yet.

[hd-esteban]

thanks!