0

dragAndDrop我尝试过使用&拖放performAction，但没有一个适用于 Vue.Draggable Web 应用程序（例如vuedraggable: Two Lists）。

如果可能，任何人都可以分享解决方案吗？

示例代码：

it('should demonstrate the dragAndDrop command', () => {
    browser.url('https://sortablejs.github.io/Vue.Draggable/#/two-lists')
    const elem = $('#two-lists .row div:nth-child(1) div.list-group div.list-group-item:nth-child(1)')
    const target = $('#two-lists .row div:nth-child(2) div.list-group')    
    elem.dragAndDrop(target)
    browser.pause(5000)    
})
4

1 回答 1

0

由于 vuedraggable 中非常自定义的拖放实现，内置dragAndDrop功能将不起作用。唯一的选择是用 js 完全或部分替换它。

干得好

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
})

另请参阅https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/

于 2021-01-18T20:02:11.377 回答