[Vuejs]-Issue with WebdriverIO V6 dragAndDrop method

0👍

Built-in dragAndDrop function won’t work because of very custom implementation of drag n drop in vuedraggable.
The only option would be to either fully or partially replace it with js.

Here you go

it('should demonstrate the dragAndDrop command', () => {
  browser.url('https://sortablejs.github.io/Vue.Draggable/#/two-lists')

  const listFrom = $('#two-lists .col-3:nth-child(1) .list-group')
  const listTo = $('#two-lists .col-3:nth-child(2) .list-group')
  const draggable = listFrom.$('.list-group-item')
  const target = listTo.$('.list-group-item')

  target.waitForClickable()

  // before 4 in left and 3 in right list
  expect(listFrom).toHaveChildren(4)
  expect(listTo).toHaveChildren(3)

  // start dragging
  browser.performActions([
    {
      type: 'pointer',
      id: 'finger1',
      parameters: { pointerType: 'mouse' },
      actions: [
        { type: 'pointerMove', origin: draggable, x: 0, y: 0 },
        { type: 'pointerDown', button: 0 },
        { type: 'pointerMove', origin: 'pointer', x: 5, y: 5, duration: 5 },
      ],
    },
  ])

  // emulate drop with js
  browser.execute(
    function (elemDrag, elemDrop) {
      const pos = elemDrop.getBoundingClientRect()
      const center2X = Math.floor((pos.left + pos.right) / 2)
      const center2Y = Math.floor((pos.top + pos.bottom) / 2)

      function fireMouseEvent(type, relatedTarget, clientX, clientY) {
        const evt = new MouseEvent(type, { clientX, clientY, relatedTarget, bubbles: true })
        relatedTarget.dispatchEvent(evt)
      }

      fireMouseEvent('dragover', elemDrop, center2X, center2Y)
      fireMouseEvent('dragend', elemDrag, center2X, center2Y)
      fireMouseEvent('mouseup', elemDrag, center2X, center2Y)
    },
    draggable,
    target
  )

  // after 3 in left and 4 in right list
  expect(listFrom).toHaveChildren(3)
  expect(listTo).toHaveChildren(4)

  browser.pause(2000) // demo
})

See also https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/

Leave a comment