[BUG] Drag&Drop doesn't work in 1.18

[mdemenko]

Context:

• Playwright Version: [1.17.0]
• Operating System: [Windows 10]
• Node.js version: [16.13.0]
• Browser: [Chromium]

Code Snippet

import test from '@playwright/test';

test('Example test', async ({page}) => {
const originSelector = ".dx-command-drag >> nth=1"
const targetSelector = ".dx-command-drag >> nth=3"
await this.page.dragAndDrop(originSelector, targetSelector)})

Describe the bug

Origin selector isn't released after moving to the target position. Same code is working in 1.16.2 version
Log.txt

[dgozman]

@mdemenko Could you please share a trace file with us? You can send it to dgozman [at] microsoft [dot] com if you'd like. See here for recording a trace: https://playwright.dev/docs/trace-viewer#recording-a-trace.

[pavelfeldman]

@mdemenko could you confirm that running the test with the following environment variable PLAYWRIGHT_NO_LAYOUT_SHIFT_CHECK=1 resolves the issue?

[mdemenko]

I've checked with this variable. Issue isn't reproducible.
Trace file was sent to @dgozman.

[dgozman]

@mdemenko In this case, please upgrade to v1.17.1 and the problem should be gone. Please let us know whether it worked for you, and we'll close this issue.

[dgozman]

If you could share a repro with us, that would be great! We'll be able to prevent similar breakages in the future.

[mdemenko]

Updated to 1.17.1. Issue is resolved.

[mdemenko]

@dgozman Issue is reproducible on 1.18.0 version. Locator.dragTo(locator) command doesn't work as well.

[dgozman]

@mdemenko Could you please share the page url?

[mdemenko]

@dgozman I can't provide page url since it's internal project. Are you able to reproduce the defect with the steps from description?

Update: I've checked on testing site and issue isn't reproducible.

test("drag&drop", async ({ page }) => {
await page.goto("https://letcode.in/dropable")
const drag = "#draggable"
const drop = "#droppable"
await page.dragAndDrop(drag, drop)
})

So seems it's specific for some components. Current test is checking drag&drop for table rows (DxDataGrid component, DevExpress 21.2)

[mdemenko]

@dgozman Added test for checking on devexpress demo site

import`` { test } from "@playwright/test"

test.only("basic test", async ({ page }) => {

await page.goto("https://codesandbox.io/s/o5s88")
await page.locator("#sandbox-preview").waitFor()
const frame = page.frameLocator("#sandbox-preview")
const originLocator = frame.locator("#app .dx-command-drag >> nth=1")
const targetLocator = frame.locator("#app .dx-command-drag >> nth=3")
await originLocator.dragTo(targetLocator)
await page.waitForTimeout(3000)

})

[aslushnikov]

@mdemenko this is fixed on the tip-of-tree. Can you please try installing npm i @playwright/test@next and give it a try?