Shopify Question posted in
The Shopify help center can be found here.

Cypress .trigger commands with mousedown, mousemove & mouseup do not work – Shopify

Is there some secret method to get this working?

We are using the draggable library to do this in the UI.

https://github.com/Shopify/draggable/tree/master/src/Draggable

I am trying to drag one column to the next using the Cypress automation runner.

This is my code:

cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('mousedown', { which: 1 });
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .trigger('mousemove')
      .trigger('mouseup');

Executing this code has no visible result whatsoever.

Also tried this:

cy.get(dataExplorerTableAttributeDraggable)
      .eq(2)
      .trigger('mousedown', { which: 1 })
      .trigger('dragstart', {})
      .trigger('drag', {});
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .trigger('dragover')
      .trigger('drop')
      .trigger('dragend')
      .trigger('mouseup');

I must make it clear that I need the automation to actually DO the drag & drop, not just trigger events.

What am I missing?

Tags:

3

Answers


  1. 0

    I have even faced the similar issue; only tweak which helped me was setting – {clientX: 505, clientY: 357}

    cy.get(etlWidget)
    .trigger('mouseover')
    .trigger('mousedown', {which: 1})
    .trigger('mousemove', {clientX: 505, clientY: 357})
    .xpath(PageElements.workflow.x_initial_drop_target_area)
    .trigger('mousemove')
    .trigger('mouseup', {force: true})

    FYI., you have to listen to the browser events and set these details. More details here – https://developers.google.com/web/tools/chrome-devtools/console/events

    Also, I think this will run only on fixed viewport. Please see if this helps.

    Login or Signup to reply.
  2. 0

    Problem description

    I have came across with same issue but I wasn’t using any library.

    Problem was that somewhere in code I had type check for event, like this:

    if (event instanceof MouseEvent) {
    /* this never gets executed in Cypress but works fine when manually testing in browser */
}

    After some debugging, I found out that mousedown event (fired from Cypress) is instance of Event but from different environment (event instanceof Event always returned false). I never dug deep into this, so I could be wrong about that.

    Anyway, solution for me was to fire native JavaScript event in Cypress using MouseEvent from cy.window().

    Potential solution for your case

    Now after looking around a bit that library that you are using, I see it uses events such as DragMouseEvent which might be same problem like I had.
    If that is the case, I guess that following code would get it working (I haven’t tested):

    cy.window().then(win => {
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(0)
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mousedown', {button: 1, clientX: 100, clientY: 100})));
    cy.get(dataExplorerTableAttributeDraggable)
      .eq(1)
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mousemove', {clientX: 100, clientY: 100})))
      .then($element => $element[0].dispatchEvent(new win.MouseEvent('mouseup', {clientX: 100, clientY: 100})));
})

    Please note that $element is jQuery wrapped element. Also clientX and clientY should have proper position values of element in page that you want to drag (100 is just placeholder).

    Alternative solution for my problem above is to perform duck-type check in code like this: 

    if (event.pageX && event.pageY) {
    /* this now gets executed in Cypress and when manually testing in browser */
}

    This would work only if you are writing your own code (not using library).

    Login or Signup to reply.
  3. 0

    Going off of DRAX’s answer, their solution worked great for my use case, and gave good insight as too why a regular .trigger() wasn’t invoking the event. Although, it’s a bit messy to call cy.window() then get the element to dispatch the event with a new constructor.

    Cypress’s .trigger() has a parameter that let’s you specify a different event constructor in the trigger command (at least as of version 8.0.0).

    Something as simple as

       cy.get('body').trigger('mousedown', { eventConstructor: 'MouseEvent' });

    For OP’s use case:

    cy.get(dataExplorerTableAttributeDraggable)
  .eq(0)
  .trigger('mousedown', {
    eventConstructor: 'MouseEvent', // Change the constructor here
    button: 1, 
    clientX: 100, 
    clientY: 100 
  });

cy.get(dataExplorerTableAttributeDraggable)
  .eq(1)
  .trigger('mousemove', {
    eventConstructor: 'MouseEvent', // Change the constructor here
    clientX: 100, 
    clientY: 100 
  })
  .trigger('mouseup', {
    eventConstructor: 'MouseEvent', // Change the constructor here
    clientX: 100,
    clientY: 100
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search