3
私の分度器テスト（他の人のように）ではドラッグ＆ドロップに問題がありますが、一般的ではありません。分度器のドラッグ＆ドロップ：HTML5の角度と角度角度
デモンストレーションのために、ドラッグアンドドロップ機能を示す2つのWebページを使用して、小さな分度器テストスイートを作成しました。 最初のページ（最初のテストケースで使用）は、AngualarJSのjQueryUIドラッグアンドドロップ機能の実装を示しています。これはうまく動作しています。 2番目のページ（2番目のテストケースで使用されます）は、HTML5でAngular drag &ドロップを使用します。これは私のテストの中では機能しません。
私の次の試みは、この投稿があまりにも私をもたらしたヘルパー機能を使用していた：誰もが、なぜで&ドロップをドラッグを教えてもらえますhttps://gist.github.com/druska/624501b7209a74040175 Unfortunalyを私の第三のテストは
を示し、これは私のためneighter動作しませんしませんでしたHTML 5は動作しません。これを実行するには何が必要ですか？事前に
感謝
Akki
私のシステム：2.22
- 分度器4.0.0
- セレンサーバースタンドアロン2.53.1
- 2.53.1
- geckodriver 0.9.0
私のテストスイート：
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);
});
私の設定ファイル：
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
capabilities: {
//browserName: 'internet explorer'
browserName: 'chrome'
//browserName: 'firefox'
},
};
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)
}