如何在 Cypress.io 中拖放答案

【问题标题】：How to drag and drop in Cypress.io如何在 Cypress.io 中拖放
【发布时间】：2019-05-23 20:20:24
【问题描述】：

我正在测试 Trello 并尝试拖动最后一个列表，然后将其放入倒数第二列，但如果没有“.wait”，测试将无法运行。如果有人可以在这里就潜在问题提出建议，那将非常有帮助，因为我更喜欢避免使用“.wait”。没有错误抛出，但仍然没有“.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

【问题讨论】：

标签： javascript testing drag-and-drop e2e-testing cypress

【解决方案1】：

这不是开箱即用的，记录的问题是 https://github.com/cypress-io/cypress/issues/845 。但在同一张工单中，也可以使用原生拖放 API 在可拖动元素上具有可拖动属性：

创建自定义命令

Cypress.Commands.add("dragTo", { prevSubject: "element" }, (subject, targetEl) => {
    cy.wrap(subject).trigger("dragstart");
    cy.get(targetEl).trigger("drop");
  }
);

您可以在测试脚本中使用：

cy.get(".source").dragTo(".target");

【讨论】：

【解决方案2】：

您可以使用 Cypress 拖放插件

https://github.com/4teamwork/cypress-drag-drop

【讨论】：

【解决方案3】：

最后我通过使用“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");
        });
    });

【讨论】：

【解决方案4】：

最好的解决方案是使用https://github.com/4teamwork/cypress-drag-drop，它也支持上下拖动。

        cy.get('#placeholder-3').drag('#placeholder-2', {            position: 'top', })

【讨论】：