Webdriver.io -无法在角度网格组件上执行拖放

Question

我尝试了以下选项:

<<ul>

无头模式/gh><<li>最小化浏览器/gh>

原生拖放方法

await srcEle.dragAndDrop(desEle);

• performaction

await browser.performActions([
{
type: 'pointer',
id: 'finger1',
parameters: { pointerType: 'mouse' },
actions: [
{ type: 'pointerMove', duration: 0, x: parseInt(sourceX + 20), y: parseInt(sourceY + 20) },
{ type: 'pointerDown', button: 0 },
{ type: 'pause', duration: 10 },
{ type: 'pointerMove', duration: 0, origin: 'pointer', x: parseInt(sourceX + 120), y: parseInt(sourceY + 20) },

{ type: 'pointerUp', button: 0 },
],
},
]);

• 浏览器。buttonDown→浏览器。moveToElement→browser.buttonUp

await browser.moveToElement(srcEle.elementId)
await browser.pause(1000);
await browser.buttonDown(0)
await browser.pause(1000);
await browser.moveToElement(desEle.elementId)
await browser.pause(1000);
await browser.buttonUp(0)

看起来光标在移动，但是元素没有被删除。

使用"chromedriver"; "^92.0.0" wdio-chromedriver-service"; "^7.1.0" @wdio/cli"; "^7.7.3"

例如访问- https://tiberiuzuld.github.io/angular-gridster2/emptyCell

Answer 1

可以使用JS执行…

const JS_HTML5_DND = 'function e(e,t,n,i){var r=a.createEvent("DragEvent");r.initMouseEvent(t,!0,!0,o,0,0,0,c,g,!1,!1,!1,!1,0,null),Object.defineProperty(r,"dataTransfer",{get:function(){return d}}),e.dispatchEvent(r),o.setTimeout(i,n)}var t=arguments[0],n=arguments[1],i=arguments[2]||0,r=arguments[3]||0;if(!t.draggable)throw new Error("Source element is not draggable.");var a=t.ownerDocument,o=a.defaultView,l=t.getBoundingClientRect(),u=n?n.getBoundingClientRect():l,c=l.left+(l.width>>1),g=l.top+(l.height>>1),s=u.left+(u.width>>1)+i,f=u.top+(u.height>>1)+r,d=Object.create(Object.prototype,{_items:{value:{}},effectAllowed:{value:"all",writable:!0},dropEffect:{value:"move",writable:!0},files:{get:function(){return this._items.Files}},types:{get:function(){return Object.keys(this._items)}},setData:{value:function(e,t){this._items[e]=t}},getData:{value:function(e){return this._items[e]}},clearData:{value:function(e){delete this._items[e]}},setDragImage:{value:function(e){}}});if(n=a.elementFromPoint(s,f),!n)throw new Error("The target element is not interactable and need to be scrolled into the view.");u=n.getBoundingClientRect(),e(t,"dragstart",101,function(){var i=n.getBoundingClientRect();c=i.left+s-u.left,g=i.top+f-u.top,e(n,"dragenter",1,function(){e(n,"dragover",101,function(){n=a.elementFromPoint(c,g),e(n,"drop",1,function(){e(t,"dragend",1,callback)})})})})';
await browser.execute(JS_HTML5_DND, srcEle, desEle); ```

Answer 2

可以使用拖放方法

describe("amp validation", () => {
it("amp valtation testing", async () => {
await browser.url('https://tiberiuzuld.github.io/angular-gridster2/drag')  
await browser.maximizeWindow()
let elemlist = await $$('gridster-item[class="ng-star-inserted"]')
await browser.pause(5000)
await elemlist[0].dragAndDrop(elemlist[3])
await browser.pause(5000)
})
})