量角器拖放：Angular与Angular与HTML5 [英] Protractor drag-and-drop: Angular vs. Angular with HTML5
问题描述
我在量角器测试中存在拖放问题（就像其他人一样），但总的来说不是-仅在使用HTML5的角度应用程序中。
<为了演示，我用两个演示了拖放功能的网页编写了一个量角器测试套件。
第一个页面（在第一个测试用例中使用）演示了AngualarJS中jQueryUI拖放功能的实现。这个很好用。
第二页（在第二个测试用例中使用）使用Angular拖动&用HTML5删除。此操作在我的测试中不起作用。
我的下一个尝试是使用此发布功能也带给我的帮助功能： https://gist.github.com/druska/624501b7209a74040175
不幸的是，这对于我的第3次测试来说对我来说不起作用节目
谁能告诉我为什么拖动&用HTML 5删除不起作用，我必须怎么做才能使其运行？
在此先感谢
Akki
我的系统：
- 量角器4.0.0
- 硒服务器独立2.53.1
- chromedriver 2.22
- iedriver 2.53.1
- geckodriver 0.9.0
我的测试者：
describe（'量角器拖放测试'，function（）{
afterEach（function（）{
browser.sleep（5000 ）;
}）;
it（'第一个测试-jQueryUI拖放AngularJS'，function（）{
//在这里找到：http：// stackoverflow。 com / questions / 24315571 / drag-drop-with-protractor-by-repeater
browser.get（'http://codef0rmer.github.io/angular-dragdrop/#!/'）;
var elem = element（by.css（'。ui-draggable'））;
var target = element（by.css（'。thumbnail'））;
browser.sleep（3000）;
elem.click （）;
browser.actions（）。dragAndDrop（elem，target）.perform（）;
}）；
it（'第二测试-使用HTML5进行角度拖放'，function（）{
browser.get（'http://marceljuenemann.github.io/angular-drag-和下拉列表/演示/＃/简单'）;
var elem = element.all（by.xpath（ / html / body / div [2] / div [2] / div [2] / div [1] / div [1] / div [2] / div / div [2] / ul / li [1]））。first（）;
var target = $（' ul [dnd-list = list]'）;
Expect（elem.getText（））。toEqual（ Item B1）; //应该拖放的项目
Expect （target.getText（））。toContain（ Item A1）; //元素包围 ItemA1， Item A2， ItemA3
elem.click（）;
browser.actions（）。dragAndDrop（elem，target）.perform（）;
}）;
it（'第三次测试-使用native_js_drag_and_drop_helper用HTML5进行角度拖放'，function（）{
browser.get（'http://marceljuenemann.github.io/angular-拖放列表/演示/＃/简单'）;
var dragAndDropFn = require（'./ native_js_drag_and_drop_helper.js'）;
var elem = element.all（by .xpath（ / html / body / div [2] / div [2] / div [2] / div [1] / div [1] / div [2] / div / div [2] / ul / li [ 1]））。first（）;
var target = $（'ul [dnd-list = list]'）;
Expect（elem.getText（））。toEqual（ Item B1）; //应该拖放的项目
Expect（target.getText（））。toContain（ Item A1）; //围绕元素 ItemA1， Item A2， ItemA3
elem.click（）;
browser.executeScript（dragAndDropFn，target.getWebElement（），elem.getWebElement（））;
}）;
xit（'第四项测试-本机拖放帮助的测试'，function（）{
//在https://gist.github.com/druska/624501b7209a74040175上找到的测试失败
var dragAndDropFn = require（'./ native_js_drag_and_drop_helper.js'）;
浏览器中显示在页面http://html5demos.com/drag上找不到Angular：超出重试次数以寻找角度。 get（ http://html5demos.com/drag）;
var字段= element.all（by.className（'drag-handle'））。get（0）;
var src = element.all（by.className（'box-list-compact-hover'））。get（0）;
browser.executeScript（dragAndDropFn，field.getWebElement（），src.getWebElement（））;
}，120000）；
}）；
我的配置文件：
exports.config = {
seleniumAddress：'http：// localhost：4444 / wd / hub'，
specs：['spec.js']，
功能：{
//浏览器名称：互联网浏览器
browserName： chrome
//浏览器名称： firefox
}，
};
native_js_drag_and_drop_helper：
module.exports =函数simulateDragDrop（sourceNode，destinationNode）{
var EVENT_TYPES = {
DRAG_END：'dragend'，
DRAG_START：'dragstart'，
DROP：'drop'
}
函数createCustomEvent（type）{
var event = new CustomEvent（ CustomEvent）
event.initCustomEvent（type，true， true，null）
event.dataTransfer = {
data：{
}，
setData：function（type，val）{
this.data [type] = val
}，
getData：function（type）{
返回this.data [type]
}
}
返回事件
}
函数dispatchEvent（节点，类型，事件）{
if（node.dispatchEvent）{
返回node.dispatchEvent（event）
}
if （node.fireEvent）{
返回node.fireEvent（ on +类型，事件）
}
}
var event = createCustomEvent（EVENT_TYPES.DRAG_START）
dispatchEvent（sourceNode，EVENT_TYPES.DRAG_START，event）
var dropEvent = createCustomEvent（EVENT_TYPES.DROP）
dropEvent。 dataTransfer = event.dataTransfer
dispatchEvent（destinationNode，EVENT_TYPES.DROP，dropEvent）
var dragEndEvent = createCustomEvent（EVENT_TYPES.DRAG_END）
dragEndEvent.dataTransfer = event.dataTransfer
dispatchEvent（sourceNode，EVENT_TYPES.DRAG_END，dragEndEvent）
}
对于各种dnd模拟库，我似乎也遇到了同样的问题，这些库似乎不适用于有角度的拖放列表。
最后，我分叉了 html-dnd 仅添加一个拖动事件，就需要一些角度拖放列表，因为它计算通过拖动事件被放置到的元素的索引。它还会粘贴到临时li元素中，代码在删除之前将其用作实际的放置点。这是用户在屏幕上看到的移动列表点。
叉子位于分叉的html-dnd 。我通过git pull将其包括在package.json文件中的依赖项中。
html-dnd： git：/ /github.com/PloughingAByteField/html-dnd.git
用于量角器
//在规范的顶部
var dragAndDrop = require（'html-dnd'）。code;
< snip>
it（'should dragover and drop'，function（）{
var draggable = browser.findElement（by.id（'id1'））;
var droppable =浏览器.findElement（by.id（'id2'））;
browser.driver.executeScript（dragAndDrop，draggable，droppable）;
）;
更新：
html-dnd项目已在拖动事件中合并，因此您可以使用而不是我没有保养的叉子。
i've got an issue with drag and drop in my protractor tests (like some other people), but not in general - only within an angular app using HTML5.
For demonstration i wrote a little protractor test-suite using two webpages demonstrating drag-and-drop functionality. The fist page (used in first test-case) demonstrates an implementation of jQueryUI drag and drop functionality in AngualarJS. This one is working just fine. The second page (used in second test-case) uses Angular drag & drop with HTML5. This one does not work within my test.
My next try was to use a helper-function this posting brought me too: https://gist.github.com/druska/624501b7209a74040175 Unfortunaly this didn't not work for me neighter as my 3rd test shows
Can anyone tell me why drag & drop with HTML 5 does not work and what i've got to do to get this running?
Many thanks in advance
Akki
My system:
- protractor 4.0.0
- selenium-server-standalone 2.53.1
- chromedriver 2.22
- iedriver 2.53.1
- geckodriver 0.9.0
My testsuite:
describe('Protractor drag-and-drop test', function() {
afterEach(function(){
browser.sleep(5000);
});
it('1st test - jQueryUI drag and drop for AngularJS', function() {
//found here: http://stackoverflow.com/questions/24315571/drag-drop-with-protractor-by-repeater
browser.get('http://codef0rmer.github.io/angular-dragdrop/#!/');
var elem = element(by.css('.ui-draggable'));
var target = element(by.css('.thumbnail'));
browser.sleep(3000);
elem.click();
browser.actions().dragAndDrop(elem, target).perform();
});
it('2nd test - Angular drag & drop with HTML5', function() {
browser.get('http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple');
var elem =element.all(by.xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1]")).first();
var target = $('ul[dnd-list=list]');
expect(elem.getText()).toEqual("Item B1"); //Item that should be dragged and dropped
expect(target.getText()).toContain("Item A1"); //element sorrounding "ItemA1", "Item A2", "ItemA3"
elem.click();
browser.actions().dragAndDrop(elem, target).perform();
});
it('3rd test - Angular drag & drop with HTML5 with native_js_drag_and_drop_helper', function() {
browser.get('http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple');
var dragAndDropFn = require('./native_js_drag_and_drop_helper.js');
var elem =element.all(by.xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1]")).first();
var target = $('ul[dnd-list=list]');
expect(elem.getText()).toEqual("Item B1"); //Item that should be dragged and dropped
expect(target.getText()).toContain("Item A1"); //element sorrounding "ItemA1", "Item A2", "ItemA3"
elem.click();
browser.executeScript(dragAndDropFn, target.getWebElement(), elem.getWebElement());
});
xit(' 4th test - Test of native drag and drop helper ', function() {
// test found on https://gist.github.com/druska/624501b7209a74040175 failing with "Angular could not be found on the page http://html5demos.com/drag : retries looking for angular exceeded"
var dragAndDropFn = require('./native_js_drag_and_drop_helper.js');
browser.get("http://html5demos.com/drag");
var field = element.all(by.className('drag-handle')).get(0);
var src = element.all(by.className('box-list-compact-hover')).get(0);
browser.executeScript(dragAndDropFn, field.getWebElement(), src.getWebElement());
}, 120000);
});
My configuration file:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
capabilities: {
//browserName: 'internet explorer'
browserName: 'chrome'
//browserName: 'firefox'
},
};
The native_js_drag_and_drop_helper:
module.exports = function simulateDragDrop(sourceNode, destinationNode) {
var EVENT_TYPES = {
DRAG_END: 'dragend',
DRAG_START: 'dragstart',
DROP: 'drop'
}
function createCustomEvent(type) {
var event = new CustomEvent("CustomEvent")
event.initCustomEvent(type, true, true, null)
event.dataTransfer = {
data: {
},
setData: function(type, val) {
this.data[type] = val
},
getData: function(type) {
return this.data[type]
}
}
return event
}
function dispatchEvent(node, type, event) {
if (node.dispatchEvent) {
return node.dispatchEvent(event)
}
if (node.fireEvent) {
return node.fireEvent("on" + type, event)
}
}
var event = createCustomEvent(EVENT_TYPES.DRAG_START)
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)
var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
dropEvent.dataTransfer = event.dataTransfer
dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)
var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
dragEndEvent.dataTransfer = event.dataTransfer
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}
I had the same issue with various dnd simulate libaries not seeming to work with angular-drag-and-drop-lists.
In the end I forked html-dnd simpling just adding a dragover event, something angular-drag-and-drop-lists requires as it calculates the index of the element being dropped upon via the dragover event. It also sticks in a temp li element which the code uses as the actual drop point before removing it. This is what the user sees as the shifting list points on the screen.
The fork is at forked html-dnd. I include it via a git pull in the dependancies in my package.json file
"html-dnd": "git://github.com/PloughingAByteField/html-dnd.git"
For usage in protractor
// at the top of the spec
var dragAndDrop = require('html-dnd').code;
<snip>
it('should dragover and drop', function() {
var draggable = browser.findElement(by.id('id1'));
var droppable = browser.findElement(by.id('id2'));
browser.driver.executeScript(dragAndDrop, draggable, droppable);
);
Update: The html-dnd project has merged in the dragover event so you can use that instead of my not maintained fork.
这篇关于量角器拖放：Angular与Angular与HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
