如何在剧作家中实现工作拖放？

Question

我正在使用 Playwright 1.7.1 版本（由于某些原因无法更新）并努力在那里实现拖放机制。到目前为止我尝试过这个 案例一：

const dataTransfert = await page.evaluateHandle(() => new DataTransfer());
await page.dispatchEvent(firstElement, 'dragstart', { dataTransfert });
await page.dispatchEvent(secondElement, 'drop', { dataTransfert }); 

案例二：

await page.hover(firstElement);
await page.mouse.down();
await page.hover(secondElement);
await page.mouse.up();

案例三：

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()
}

还有其他建议吗？

Answer 1

您并不是唯一遇到问题的人，请访问 https://github.com/microsoft/playwright/issues/20254，尽管这已被标记为已关闭，因为显然无法重现。

从这次讨论中汲取建议，我使用与您的案例 III 非常接近的东西来工作。

唯一的区别是省略了第一步的步骤

export async function drag2(page: Page, source: Locator, target: Locator){
    const box = (await source.boundingBox());
    const boxty = (await target.boundingBox());
    if(box && boxty){
        await page.mouse.move(box.x + box.width/2, box.y + box.height / 2);
        await page.mouse.down();
        await page.mouse.move(boxty.x + boxty.width/2, boxty.y + boxty.height/2, {steps:5});
        await page.mouse.up();
    } 
}

// 缩短变量名以使其内联可读