我正在尝试拖动一个元素,然后将其放入放置区区域,但测试未在 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});
});
});
最佳答案
一些更改应该可以实现您正在寻找的内容。以下是为解决此问题而采取的步骤的分割...
首先,不是删除 MyDataTransfer
,而是构建一个新的 DataTransfer对象,其中包含拖动事件所需的必要属性和方法:
const dataTransfer = new DataTransfer;
接下来最好触发native drop and drag events ,而不是 draggable
和 dropzone
。 Selenium Easy 正在监听 dragstart
、dragend
和 drop
(您可以在它们的 drag-and-drop-demo.js source file 中看到它)。将这些放在辅助函数中,稍后在测试中调用:
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.
beforeEach
block 有助于设置视口(viewport)和访问应用程序:
beforeEach(function() {
cy.viewport(1000, 600);
cy.visit('https://www.seleniumeasy.com/test/drag-and-drop-demo.html');
});
最后,测试 block 调用辅助函数,并断言该项目已被拖放:
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)
});
});
这里是完整的解决方案:
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)
});
});
});
drag_n_drop_spec.js在 cypress-example-recipes repo 中提供是有用的资源。
关于javascript - 拖放在 Cypress.io 测试中没有发生,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51889918/