剧作家拖放

问题描述

尝试测试某些拖放功能，好像剧作家没有拖放功能，因此我正在使用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" });
});

解决方法

我也一直在努力使剧作家能够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);

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

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 设置后，此方法仅执行可操作性检查并跳过操作。默认为假。有用等待元素准备好执行操作而不执行
返回：Promise<void>

drag-and-drop playwright