编剧试拖

Question

我正在处理这个模板，我在其中使用 dragTo() 函数进行拖放。当我运行我在头部模式下进行测试时，它工作正常。但是当我运行在无头模式下进行测试时，它不会拖动任何东西并且测试将通过页面空白。有什么办法可以减慢拖动速度，以便页面可以在跳转到其他操作之前识别被拖动的元素？

我尝试通过以下方式添加超时，但仍然没有成功：

await this.page.locator('text=Column').first().dragTo(this.page.locator('[role="tabpanel"]').first(),{force:true}), {timeout:3000};

Answer 1

您必须像这样应用超时。正如你在docs中看到的，强制和超时都是选项。

await this.page
  .locator('text=Column')
  .first()
  .dragTo(this.page.locator('[role="tabpanel"]').first(), {
    force: true,
    timeout: 3000,
  })

Answer 2

我会说 {force:true} 对你不利。

force Whether to bypass the actionability checks

听起来可操作性是您做想要等待的事情。

此外，默认超时为 30 秒，您正在将其减少到 3 秒。

并尝试分解命令并检查源和目标

const source = this.page.locator('text=Column').first()
const target = this.page.locator('[role="tabpanel"]').first()
await source.dragTo(target)

Answer 3

所以，我能完成这项工作的唯一方法是使用以下代码：

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

    await originElement.hover();
    await page.mouse.down();
    const box = (await destinationElement.boundingBox())!;
    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
    await destinationElement.hover();
    await page.mouse.up();
}

编剧试拖

Playwright test drag

typescript

playwright

playwright-test