Webdriver.io - 无法在 angular gridster 组件上执行拖放操作
Posted
技术标签:
【中文标题】Webdriver.io - 无法在 angular gridster 组件上执行拖放操作【英文标题】:Webdriver.io - Unable to perform drag drop on angular gridster component 【发布时间】:2021-10-02 16:42:34 【问题描述】:我确实尝试了以下选项:
无头模式 最小化浏览器 原生的 dragAndDrop 方法 await srcEle.dragAndDrop(desEle);
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 ,
],
,
]);
browser.buttonDown -> browser.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
【问题讨论】:
请添加一个可重现的例子 @PDHide - 添加了更多详细信息。 【参考方案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); ```
【讨论】:
【参考方案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)
)
)
【讨论】:
以上是关于Webdriver.io - 无法在 angular gridster 组件上执行拖放操作的主要内容,如果未能解决你的问题,请参考以下文章
Webdriver.io - 如何在配置中使用 beforeEach 钩子
当窗口在 Chrome 87 的后台时,Webdriver.io/Selenium 测试失败
如何在 webdriver.io 中以 32 位模式启动 IE