我正在尝试拖动一个元素,然后将其拖放到放置区域,但是该测试未在Cypress.io中执行拖放操作。如果有人可以就此处的潜在问题提出建议,那将非常有帮助。没有抛出任何错误,但是这里并没有发生拖放。
describe('Verify the drag and drop test', function() {
it.only('Check whether the drag and drop of an item is working fine', function() {
cy.visit('http://www.seleniumeasy.com/test/drag-and-drop-demo.html')
const MyDataTransfer = function () {};
const dt = new MyDataTransfer ();
dt.types = [];
// cy.wait(3000);
cy.get('#todrag span')
.contains('Draggable 1')
.trigger("draggable", {dataTransfer: dt});
cy.get("#todrag span")
.contains('Draggable 1')
.trigger('mousedown', { which: 1, pageX: 600, pageY: 600 })
.trigger('mousemove', { which: 1, clientX: 330, clientY: 35 });
cy.wait(3000);
cy.get('#mydropzone')
.trigger("dropzone", {dataTransfer: dt});
});
});
答案 0 :(得分:2)
A few changes should achieve what you are looking for. Here's a breakdown of steps taken to solve this question...
First off, instead of stubbing out MyDataTransfer
, just construct a new DataTransfer object, which comes packed with the necessary properties and methods needed for drag events:
const dataTransfer = new DataTransfer;
Next, it's best to trigger native drop and drag events, as opposed to draggable
and dropzone
. Selenium Easy is listening for dragstart
, dragend
, and drop
(you can see this inside of their drag-and-drop-demo.js source file). Put these inside of a helper function, to be called later inside the test:
function dndIt() {
cy.get('#todrag span:first-of-type')
.trigger('dragstart', { dataTransfer });
cy.get('#mydropzone')
.trigger('drop', { dataTransfer });
cy.get('#todrag span:first-of-type')
.trigger('dragend'); // <-- seleniumeasy listens for this...
} // otherwise, draggables are copied.
A beforeEach
block is helpful for setting the viewport and visiting the application:
beforeEach(function() {
cy.viewport(1000, 600);
cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
});
And finally, the test block calls the helper function, and asserts that the item was dragged and dropped:
it('Check whether the drag and drop of an item is working fine', function() {
dndIt();
cy.get('#droppedlist')
.should(($el) => {
expect($el.children()).to.have.lengthOf(1)
});
});
Here's the solution in its entirety:
describe('Verify the drag and drop test', function() {
const dataTransfer = new DataTransfer;
function dndIt() {
cy.get('#todrag span:first-of-type')
.trigger('dragstart', { dataTransfer });
cy.get('#mydropzone')
.trigger('drop', { dataTransfer });
cy.get('#todrag span:first-of-type')
.trigger('dragend'); // <-- seleniumeasy listens for this...
} // if left out, draggables are copied.
beforeEach(function() {
cy.viewport(1000, 600);
cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
});
it('Check whether the drag and drop of an item is working fine', function() {
dndIt();
cy.get('#droppedlist')
.should(($el) => {
expect($el.children()).to.have.lengthOf(1)
});
});
});
The drag_n_drop_spec.js provided in the cypress-example-recipes repo was a helpful resource.