javascripttestingdrag-and-drope2e-testingcypress

How to drag and drop in Cypress.io


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");
  });
});

See image

See image


Solution

  • 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");
            });
        });