无法使用ng2-dragula在网站中使用量角器进行拖放

本文介绍了无法使用ng2-dragula在网站中使用量角器进行拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我的公司项目网站上有一个基于ng2-dragula的拖放块.这是基本功能，但是即使我尝试了很多方法，我也无法使用量角器成功拖放.有人对我有同样的问题.据我所知，没有办法用Dragula进行端到端测试My company project website has a drag and drop block based on ng2-dragula. This is fundamental function but i cannot use protractor to drag and drop successfully even i tried a lot of ways.Someone has the same issue with me. As i know there is no way to proceed E2E test with dragula https://github.com/bevacqua/angularjs-dragula/Issues/86 . WebDriver使用Dragula拖放到应用程序中 仅限于Protractor/Jasmine拖放抓取文字而不是元素 https://github.com/bevacqua/dragula/issues/452 https://github.com/bevacqua/angularjs-dragula/issues/86.WebDriver Drag and Drop in application using DragulaProtractor/Jasmine drag and drop only grabbing text not the elementhttps://github.com/bevacqua/dragula/issues/452 ================================================ ======================= ========================================================================但是因为ng2-dragula现在很流行，所以我认为我们将有很多使用此库的网站，如果量角器不能这样做，那一定是一个大问题吗?But because ng2-dragula is quite popular now, i think that we will have a lot of website using this library and if protractor cannot do, it must be a big issue? import {code as dragAndDrop} from 'html-dnd';........... p_Login.openUrl("http://valor-software.com/ng2-dragula/"); let ele1=element(by.xpath("//example-app//div[contains(text(),'Whenever an')]")); let ele2=element(by.xpath("//example-app//div[contains(text(),'DOM as a result')]/..")); browser.driver.executeScript(dragAndDrop, ele1.getWebElement(), ele2.getWebElement());推荐答案可以做到！ 我的同事在相同的dragula.js测试中检测到了解决方法The workaround was detected by my co-worker inside the same dragula.js test https://github.com/bevacqua/dragula/blob/master/test/drag.js 完全events.raise(o.containerClick ? div : item, 'mousedown', eventOptions);在上声明了提升功能 https://github.com/bevacqua/dragula/blob/master/test/lib/events.js 我们将发送一个要执行的脚本，该脚本将分派具有正确参考元素的自定义事件. We are going to send a script to execute which will dispatch custom events with the correct reference elements. 您可以使用类似以下内容(打字稿版本):You could use something like this (typescript version):import { browser } from 'protractor';/** @param target css selector of element to drag & drop* @param destination css selector of destination element */async function simulateDragAndDrop(target: string,destination: string): Promise<void> { await browser.executeScript(() => { let getEventOptions = (el, relatedElement) => { //coordinates from destination element const coords = el.getBoundingClientRect(); const x = coords.x || coords.left; const y = coords.y || coords.top; return { x: x, y: y, clientX: x, clientY: y, screenX: x, screenY: y, //target reference relatedTarget: relatedElement }; }; let raise = (el, type, options?) => { const o = options || { which: 1 }; const e = document.createEvent('Event'); e.initEvent(type, true, true); Object.keys(o).forEach(apply); el.dispatchEvent(e); function apply(key) { e[key] = o[key]; } }; let targetEl = document.querySelector(target); let destinationEl = document.querySelector(destination); let options = getEventOptions(destinationEl, targetEl); //start drag raise(targetEl, 'mousedown'); raise(targetEl, 'mousemove'); //set event on location raise(destinationEl, 'mousemove', options); //drop raise(destinationEl, 'mouseup', options); }, target, destination);}或以javascript版本直接在浏览器上进行测试:Or in javascript version to test directly on browser:var target = 'body > example-app > div > example-a div.container:first-child > div:first-child'; //css selector of element to drag & dropvar destination = 'body > example-app > div > example-a div.container:last-child'; //css selector of destination elementvar getEventOptions = function (el, relatedElement) { //coordinates from element var coords = el.getBoundingClientRect(); var x = coords.x || coords.left; var y = coords.y || coords.top; return { x: x, y: y, clientX: x, clientY: y, screenX: x, screenY: y, relatedTarget: relatedElement };};var raise = function (el, type, options) { var o = options || { which: 1 }; var e = document.createEvent('Event'); e.initEvent(type, true, true); Object.keys(o).forEach(apply); el.dispatchEvent(e); function apply(key) { e[key] = o[key]; }};var targetEl = document.querySelector(target);var destinationEl = document.querySelector(destination);var options = getEventOptions(destinationEl, targetEl);//start dragraise(targetEl, 'mousedown');raise(targetEl, 'mousemove');//set event on locationraise(destinationEl, 'mousemove', options);//dropraise(destinationEl, 'mouseup', options);此解决方案对我有用，也许应该适合ng2-dragula测试.This solution work for me, maybe should be adapted to ng2-dragula tests. 这篇关于无法使用ng2-dragula在网站中使用量角器进行拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！