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常量，我们可以获得需要实现的目标；

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

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

1 个答案: