1

我的公司项目网站有一个基于 ng2-dragula 的拖放块。这是基本功能,但即使我尝试了很多方法,我也无法使用量角器成功拖放。有人跟我有同样的问题。据我所知,没有办法用 Dragula 进行 E2E 测试

==================================================== =======================

但是因为 ng2-dragula 现在很流行,我想我们会有很多网站使用这个库,如果量角器不能做,那一定是个大问题?

   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());
4

2 回答 2

2

可以做到!!

browser.executeScript

我的同事在同一个 dragula.js 测试中检测到了解决方法

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

我们将发送一个脚本来执行,该脚本将使用正确的参考元素调度自定义事件。

你可以使用这样的东西(打字稿版本):

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 版本中直接在浏览器上测试:

https://valor-software.com/ng2-dragula/

var target = 'body > example-app > div > example-a div.container:first-child > div:first-child'; //css selector of element to drag & drop
var destination = 'body > example-app > div > example-a div.container:last-child'; //css selector of destination element
var 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 drag
raise(targetEl, 'mousedown');
raise(targetEl, 'mousemove');
//set event on location
raise(destinationEl, 'mousemove', options);
//drop
raise(destinationEl, 'mouseup', options);

这个解决方案对我有用,也许应该适应 ng2-dragula 测试。

于 2017-09-26T19:08:16.580 回答
0

我刚刚对使用 ng2-dragula 的 Angular 5 应用程序进行了 e2e 测试,它使用以下默认量角器方法工作:

browser.actions()
       .dragAndDrop(sourceElem, targetElem)
       .perform();

我正在使用 chromedriver v2.38 和 chrome v67.0.3396.87 运行量角器 v5.3.2。

不知道是谁修复了什么,但我的回答是使用我上面给出的版本并且它有效!

于 2018-06-14T09:25:21.287 回答