如何在cypress中拖放ul> li元素

Question

在系统中，自动化拖放功能需要考虑两个方面。 div有一个叫做“时间表”的东西，而ul > li是另一种东西。 这是时间表html示例，

<div class="time-update__top-block">

在测试脚本中，我使用了这种方式，如下所示进行拖放，

cy.get(".time-update-block", { timeout: 60000 })
      .trigger("mousedown", { force: true })
      .wait(2000);
    cy.get(
      '.anotherElement',
      { timeout: 60000 }
    )
      .trigger("mousemove", { force: true }, "topLeft")
      .wait(2000);
    cy.get(
      '.anotherElement',
      { timeout: 60000 }
    )
      .trigger("mouseup", { force: true }, "topLeft")
      .wait(2000);

上面的代码已成功执行，并且按照我想要的方式拖放了元素。

他人的html示例如下，

 <ul class="schedule-movie-list">
    <li class="undefined schedule-movie-list__item " title="Drag me!" draggable="true">Name1</li>
    <li class="undefined schedule-movie-list__item " title="Drag me!" draggable="true">Name2</li>
    <li class="undefined schedule-movie-list__item " title="Drag me!" draggable="true">Name3</li></ul>

在测试脚本中，我使用了这种方式，如下所示进行拖放，

cy.get(".schedule-movie-list > .schedule-movie-list__item", {
      timeout: 60000
    })
      .eq(1)
      .click()
      .trigger("mousedown", { force: true });

    cy.get(
      '.anotherElement2',
      { timeout: 60000 }
    ).trigger("mousemove", { force: true }, "topLeft");
    cy.get(
      '.anotherElement2',
      { timeout: 60000 }
    ).trigger("mouseup", { force: true }, "topLeft");

但是最终上述代码没有成功执行。 元素未自动拖放。 如果有人有解决此问题的想法，将不胜感激。

Answer 1

使用dataTransfer const，我们可以获得需要实现的目标；

describe("Main Page", () => {
  const dataTransfer = new DataTransfer;
  it("Drag & Drop elements", () => {
      cy.get('.schedule-movie-list > .schedule-movie-list__item')
        .first()
        .trigger('dragstart', { dataTransfer });

      cy.get(schedulerPerformancePanel)
        .first()
        .trigger('drop', { dataTransfer })
        .wait(3000);