Playwright test drag-CodePudding

I am working on this template where I am using dragTo() function for dragging and dropping. When I run my tests on headed mode, it works fine. But when I run the tests in headless mode, it simply wont drag anything and the test will pass with the page blank. Is there any way I can slow down the dragging so that the page could identify the dragged element before jumping onto the other action?

I tried adding timeout the following way but still no luck:

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

CodePudding user response：

You have to apply the timeout like this. As you can see in the docs, both force and timeout are options.

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

CodePudding user response：

I would say {force:true} is working against you.

force Whether to bypass the actionability checks

Sounds like actionability is something you do want to wait for.

Also default timeout is 30 seconds, you are reducing it to 3 seconds.

And try breaking up the command and checking your source and target

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