如何为可重新排序列表编写剧作家测试用例？ Playwright mouse.move 在尝试重新排序 div 时不起作用

Question

我正在尝试重新排序 div，例如重新排列顺序，但是 div 没有移动。 我无法在这里发布用户界面，但它是这样的

https://codepen.io/dsenneff/pen/JjNPJer/b2bc0298b73dd5605f45828df3b61dd4

重现步骤

const mays= page.locator('div').filter({ hasText: /^texthere$/ });
await mays.getByLabel('drag page').hover();
await page.mouse.down({ button: "left" });
let mosboundingbox = await mays.boundingBox();
console.log(mosboundingbox);
await page.mouse.move(mosboundingbox!.x, mosboundingbox!.y + 500, { steps: 10 }); // Mouse up to stop dragging
console.log("moved to ", "x", mosboundingbox!.x, "y", mosboundingbox!.y + 100)
await page.mouse.up();

预期行为： div 降到其下方

Answer 1

使用

locator.dragTo()

（文档）。它更容易使用并且更不容易出错。

一个例子：

const mays = page.locator('div').filter({ hasText: /^texthere$/ });
const landing = page.locator('ul li:last-of-type');
await mays.dragTo(landing);