Playwright test drag

Question

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};

As far as I understand timeouts in playwright, they will not slow the execution for actions, it will just wait for element or wait for action to be visible or completed. It is very interesting because it is not working in headless mode, maybe it is an issue with the playwright itself. — Gaj Julije, Mar 28 '22 at 06:33
Yeah, it is odd that it won't behave the same headless. Any other way to slow down the tests you reckon? — user9857359, Mar 28 '22 at 06:53
If built in drag drop does not work, try standard approach, mouse on element, hold click, move to other elem, release click, like in sellenium. Hard wait goes with page.waitForTimeout , but if it is sequential action there is no slow down. :-) — Gaj Julije, Mar 28 '22 at 07:32

score 2 · Answer 1 · answered Mar 28 '22 at 07:58

2

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)

answered Mar 28 '22 at 07:58

SuchAnIgnorantThingToDo-UKR

3,170
4
16

Source and target are correct since the test runs successfully in headful mode :). Just issues when running headless :( – user9857359 Mar 28 '22 at 22:05
Yeah I got that. Maybe a visibility check `this.page.locator('div:has-text("Column"):visible')` . – SuchAnIgnorantThingToDo-UKR Mar 28 '22 at 22:42

score 0 · Answer 2 · answered Mar 28 '22 at 05:38

0

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

answered Mar 28 '22 at 05:38

Alapan Das

17,144
3
29
52

Hey, tried what you said. but it does not take the 3 seconds time. Is there any other way I could make the action take longer to run? – user9857359 Mar 28 '22 at 05:55

score 0 · Accepted Answer · answered Mar 28 '22 at 23:49

So, the only way I could make this work was using the following code:

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

3 Answers3