I am testing Trello and trying to drag the last list and then drop it into a penultimate column, but the test is not working without ".wait". It would be really helpful if someone could advise about the potential issue here because I prefer to avoid using ".wait". There are no errors throwing, but still, the drag and drop is not happening without ".wait".
describe("Moving list", () => {
it("Waiting For Accept list should be moved from last column to the penultimate column", () => {
cy.get("#board")
.children(".js-list")
.should("have.length", 4)
.and("be.visible");
cy.get(":nth-child(4) > .list")
.should("be.visible")
.and("contain", "Waiting For Accept")
cy.get(":nth-child(4) > .list").trigger("mousedown", {
which: 1
});
cy.get("#board > div:nth-child(2) > .list")
.trigger("mousemove");
cy.get("#board > div:nth-child(3) > .list")
.trigger("mousemove")
.trigger("mouseup");
cy.get(":nth-child(3) > .list")
.should("contain", "Waiting For Accept");
});
});
That doesn't work out of the box, the logged issue for that is https://github.com/cypress-io/cypress/issues/845 . But in that same ticket is also a work around available using the native drag and drop API with draggable attribute on draggable elements:
Create a custom command
Cypress.Commands.add("dragTo", { prevSubject: "element" }, (subject, targetEl) => {
cy.wrap(subject).trigger("dragstart");
cy.get(targetEl).trigger("drop");
}
);
In the testscript you can use:
cy.get(".source").dragTo(".target");
You can use the Cypress drap and drop plugin
Finally I resolved this issue by using "cy.request"
https://docs.cypress.io/api/commands/request.html#Syntax
describe("Moving list", () => {
it("Waiting For Accept list should be moved from last column to the penultimate column", () => {
cy.request("https://trello.com/b/9lfzKIRu/trello-tests").then(response => {
expect(response.status).to.eq(200);
});
cy.get("#board > div:nth-child(4) > .list").trigger("mousedown", {
which: 1
});
cy.get("#board > div:nth-child(2) > .list").trigger("mousemove");
cy.get("#board > div:nth-child(3) > .list")
.trigger("mousemove")
.trigger("mouseup");
cy.get(":nth-child(3) > .list").should("contain", "Waiting For Accept");
});
});
最好的解决方案是使用https://github.com/4teamwork/cypress-drag-drop它也支持拖动到顶部和底部。
cy.get('#placeholder-3').drag('#placeholder-2', { position: 'top', })
I solved it by downgrading my drag and drop version from 2.1.0 to 1.8.0
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.