Testcafe: Drag not working in Chrome responsive v69+ / Android Chrome v69+

[chifffon]

What is your Test Scenario?

I'm trying to test elements being dragged in Chrome v69 and v70, this action used to work before version 69 of Chrome was released.

What is the Current behavior?

When running a test that has a drag action in either Chrome responsive or Chrome in an Android mobile device it's not working, it appears to make the drag action but doesn't actually move the elements to the offset its supposed to. However, these same tests with drag actions used to work before Chrome was updated to v69.

These elements are able to be dragged manually by an user in any Chrome responsive and Android Chrome, and Testcafe is able to drag them appropriately in IOS Chrome/Safari.

What is the Expected behavior?

When running a test through Testcafe that has a drag action in Chrome responsive or Chrome in Android it should drag the element to the specified offset.

Steps to Reproduce:

1. Run a test with a drag action in a draggable element, for example a swiper.
2. Make the test run in Chrome V69+ responsive.
3. See that the drag doesn't drag the element.

Code:
Example 1:

fixture`Example`
  .page`http://kidjp85.github.io/react-id-swiper/`

test('swiper test', async t => {
  const swiperSelector = Selector('.swiper-container')

  await t
    .drag(swiperSelector, -120, 0, { speed: 0.5 })
})

Example 2:

fixture`Another example`
  .page`http://kenwheeler.github.io/slick/`;

test('drag2', async t => {
  await t.drag('.slider', -100, 0, { speed: 0.5 });
});

Your Environment details:

• testcafe version: v0.22.0
• node.js version: v8.9.0
• browser name and version: Chrome Version 70.0.3538.67 (Official Build) (64-bit)
• platform and version: MacOS High Sierra 10.13.6

[AlexisGlez]

I'm experiencing this exact same issue

[AlexKamaev]

Do you mean HTML5 drag and drop or some custom drag behavior? I've checked HTML5 drag and drop and it works as expected on the latest Chrome on Android and Mac.

fixture `A set of examples that illustrate how to use TestCafe API`
     .page `https://www.w3schools.com/html/html5_draganddrop.asp`;
 
     test('drag1', async t => {
          await t.dragToElement('#drag1', '#div2');
     });
 
     test('drag2', async t => {
          await t.drag('#drag1', 200, 0);
     });

If you use some custom functionality which implements drag behavior, could you please provide us with an example?

[chifffon]

Thanks for answering quickly @AlexKamaev, I see your example working, my problem is similar, but it is when using swiper libraries, I have two examples with different swipers, you can check both:

Example 1:

fixture`Example`
  .page`http://kidjp85.github.io/react-id-swiper/`

test('swiper test', async t => {
  const swiperSelector = Selector('.swiper-container')

  await t
    .drag(swiperSelector, -120, 0, { speed: 0.5 })
})

Example 2:

fixture`Another example`
  .page`http://kenwheeler.github.io/slick/`;

test('drag2', async t => {
  await t.drag('.slider', -100, 0, { speed: 0.5 });
});

Let me know if you have any insight over these, thanks for your help, I don't understand why testcafe wouldn't be able to swipe these elements, do you think it could be that its selecting an incorrect parent element? I tried selecting inner divs but it didn't work either

[AlexisGlez]

Yeah I'm actually using react-id-swiper in my project and for some reason testcafe is not being able to do drags in neither Android devices nor Chrome in responsive mode. It works completely fine in Iphone with iOS 9+ tho.

[AlexKamaev]

Thank you for the examples. I've checked the example with react-id-swiper on Windows and Android and confirm that it does not work as expected. I've also checked it on Chrome 68 and found that it works. I think that the cause of the issue is connected with Chrome updates, but I need to research it.
 
I've also tried to reproduce the issue on http://kenwheeler.github.io/slick/ but this test works for me on Windows and Android.

[AlexKamaev]

Probably connected with https://github.com/DevExpress/testcafe/issues/2856

[AndreyBelym]

Both tests work on my Chrome 70 both on Windows and Android with [email protected]. Please, check it in your environment and feel free to reopen the issue if you can reproduce the problem.

[scriptin]

I can reproduce it now on Chrome 73.0.3683.86, OS X, Testcafe 1.1.0 when I set "chrome:emulation:device=iphone X". What I see is element being dragged exactly 1px instead of the amount I pass as an offset.

I see this in the console:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

And the stacktrace:

preventDefault @ hammerhead.js:6
o @ hammerhead.js:13
t @ testcafe-ui.js:1
(anonymous) @ hammerhead.js:6

Judging by the stacktrace, the error is happening inside the Testcafe's internals. I experimented with my code to see if something in it causes this error, but couldn't find anything.

Here's what I do in my code to implement dragging:

type DragEvent = "start" | "move" | "end";

const drag = (eventType: DragEvent, e: React.MouseEvent | React.TouchEvent) => {
    e.stopPropagation();
    if (!isTouchEvent(e)) {
        e.preventDefault();
    }
    // change left offset
};

<div style={{ left: getLeftOffset() }} // set the offset
     onMouseDown={e => drag("start", e)}
     onTouchStart={e => drag("start", e)}
     onMouseMove={e => drag("move", e)}
     onTouchMove={e => drag("move", e)}
     onMouseUp={e => drag("end", e)}
     onTouchEnd={e => drag("end", e)}
     onMouseLeave={e => drag("end", e)}
     onTouchCancel={e => drag("end", e)}>
    { items }
</div>

(That is React in TypeScript.)

[AndreyBelym]

@scriptin this means that TestCafe won't be able to prevent real user events if you do some actions in the browser during testing. It can't cause a problem with drag events.

I guess TestCafe's drag event simulation is incompatible with your page. Could you please create a new bug report and provide an example page that can be used to reproduce the issue?

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.