WebdriverIO V6 dragAndDrop 方法的问题

问题描述

我尝试过使用 dragAndDrop 和 performAction 进行拖放，但它们都不适用于 vue.draggable 网络应用（例如 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)    
})

解决方法

内置 dragAndDrop 函数将不起作用，因为 vuedraggable 中拖放的实现非常自定义。 唯一的选择是用 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,bubbles: true })
        relatedTarget.dispatchEvent(evt)
      }

      fireMouseEvent('dragover',elemDrop,center2X,center2Y)
      fireMouseEvent('dragend',elemDrag,center2Y)
      fireMouseEvent('mouseup',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/