剧作家拖放

Question

尝试测试一些拖放功能，看起来 playwright 没有拖放功能，所以我使用

mouse.move()

、

mouse.down()

和

mouse.up()

。

然而我的尝试似乎失败了，目标却没有移动。代码如下：

test("drag and drop test", async () => {
  await page.goto("https://www.w3schools.com/html/html5_draganddrop.asp");
  await page.waitForSelector("#accept-choices");
  await page.click("#accept-choices");
  await page.waitForSelector("#div1");
  let xStart, yStart, xFinish, yFinish, elementHandle, rect;
  elementHandle = await page.$("#div1");
  rect = await elementHandle.boundingBox();
  xStart = rect.x + rect.width / 2;
  yStart = rect.y + rect.height / 2;
  elementHandle = await page.$("#div2");
  rect = await elementHandle.boundingBox();
  xFinish = rect.x + rect.width / 2;
  yFinish = rect.y + rect.height / 2;
  console.log(`move from (${xStart}, ${yStart}) to (${xFinish},${yFinish})`);
  await page.screenshot({ path: "before drag.png" });
  await page.mouse.move(xStart, yStart);
  await page.mouse.down();
  await page.mouse.move(xFinish, yFinish);
  await page.mouse.up();
  await page.screenshot({ path: "after drag.png" });
});

Answer 1

我也一直在努力思考如何与剧作家一起实现

drag and drop

。

例如，我需要垂直移动，

重新订购前 1 2 3

重新订购后 2 1 3

    const exampleOneDrag = await page.$(
      `[data-testid="${exampleOne}-drag-icon-button"]`
    )
    const exampleTwoDrag = await page.$(
      `[data-testid="${exampleTwo}-drag-icon-button"]`
    )
    const oneBoundingBox = await exampleOneDrag?.boundingBox()
    const twoBoundingBox = await exampleTwoDrag?.boundingBox()

    if (oneBoundingBox && twoBoundingBox) {
      await page.mouse.move(
        oneBoundingBox.x + oneBoundingBox.width / 2,
        oneBoundingBox.y + oneBoundingBox.height / 2,
        { steps: 5 }
      )
      await page.mouse.down()
      await page.mouse.move(
        twoBoundingBox.x + twoBoundingBox.width / 2,
        twoBoundingBox.y + twoBoundingBox.height / 2,
        { steps: 5 }
      )
      await page.mouse.up()
    }

能够做到这一点的关键点是

steps:5

选项。我不完全确定它的作用，但我从这里找到了：https://github.com/codeceptjs/CodeceptJS/blob/e815d82af028e904051b5b6c70873164e1df1bfd/lib/helper/Playwright.js#L2289-L2307e

希望这对你有用。我觉得你的情况，你应该这样改变

  await page.mouse.move(xStart, xFinish);
  await page.mouse.down();
  await page.mouse.move(yStart, yFinish);

Answer 2

1.13.0 版本为此添加了 API 方法。查看文档。
从文档复制：

page.dragAndDrop(source, target[, options])

• 来源：

  string

• 目标：

  string

• 选项：

  Object

  • force

    boolean

    是否绕过可操作性检查。默认为 false。
  • noWaitAfter

    boolean

    启动导航的操作正在等待这些导航发生并等待页面启动 加载中。您可以通过设置此标志来选择不等待。你会 仅在特殊情况下需要此选项，例如导航到 无法访问的页面。默认为 false。
  • timeout

    number

    最长时间以毫秒为单位，默认为 30 秒，传递 0 禁用超时。默认值可以更改 通过使用

    browserContext.setDefaultTimeout(timeout)

    或

    page.setDefaultTimeout(timeout)

    方法。
  • Trial：

    boolean

    设置后，此方法仅执行可操作性检查并跳过操作。默认为 false。有用 等待元素准备好执行操作而不执行 它。
• 返回：

  Promise<void>

Answer 3

以下代码适用于我自己的 vue 拖放库vue-fluid-dnd：

async function dragDrop(
  page: Page,
  originSelector: string,
  destinationSelector: string
) {
  const originElement = await page.waitForSelector(originSelector);
  const destinationElement = await page.waitForSelector(destinationSelector);

  const originElementBox = await originElement.boundingBox();
  const destinationElementBox = await destinationElement.boundingBox();
  if (!originElementBox || !destinationElementBox) {
    return;
  }
  await page.mouse.move(
    originElementBox.x + originElementBox.width / 2,
    originElementBox.y + originElementBox.height / 2
  );
  await page.mouse.down();
  // I added more steps to see a smoother animation.
  await page.mouse.move(
    destinationElementBox.x + destinationElementBox.width / 2,
    destinationElementBox.y + destinationElementBox.height / 2,
    { steps: 20 }
  );
  await page.mouse.up();
}